/*Language-specific*/
:lang(af){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(ak){font-family:Lucida,"DejaVu Sans",inherit;}
:lang(ar){font-family:Tahoma 12,Nazli,KacstOne,"DejaVu Sans",inherit;}
:lang(bg){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(bn){font-family:FreeSans,MuktiNarrow,Vrinda,inherit;font-size:1.1em;line-height:1.4em;}
:lang(cs){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(da){quotes:'\00BB' '\00AB' '\203A' '\2039';}
:lang(de){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(el){font-family:"DejaVu Sans",inherit;quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
:lang(es){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(fa){font-family:Terafik,Traffic,Roya,Nazli,Nazanin,sans;font-size:1.5em;}
:lang(fi){quotes:'\201D' '\201D' '\2019' '\2019';}
:lang(fr){quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a';}
:lang(hr){quotes:'\00BB' '\00AB' '\203A' '\2039';}
:lang(is){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(ja){font-size:1.1em;}
:lang(km){font-family:"Khmer OS System","Khmer OS","Khmer Kampongtrach","CDT Khmer",inherit;line-height:2em;}
:lang(ko){font-size:1.1em;}
:lang(lt){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(nl){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(pl){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(ro){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sk){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sq){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(sr){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sv){quotes:'\201D' '\201D' '\2019' '\2019';}
:lang(tr){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(vi){font-family:"Lucida Grande","Vu Phu Tho","DejaVu Sans",inherit;}
:lang(vi) a:hover,:lang(vi) a:active{text-decoration:none;color:#606047;}
:lang(zh){font-size:1.5em;}
Internationalization Language CSS
Chris Coyier
on
Never knew you could detect language in CSS!
Hi guys,
Would like to say, I am so grateful for your helping hands here. I am updating and renewing the whole thing in my sites, and I can never thank you enough for all your great ideas, tuts, and help.
( one question if I may ask.
Where would you in a css form add this code? I am tired of using all that google stuff, and being forced to carry their codes or logos…) Thank you in advance.
hey….how it works? and how to use it?
i’m newbie, hehe.. :p
Add the ISO language code into the HTML tag. eg:
<HTML lang=”en”>
Then add the above CSS to your style-sheet. The browser will apply the appropriate CSS according to the ‘lang’ attribute.
thanks for Farsi fonts ;)
As I had pointed to W3C i18n WG’s Richard Ishida once, at least in German typography, a quote in a foreign language should still be wrapped in German quotation marks, i.e
<p lang=”de”>Martin Luther King sagte: <q lang=”en”>I have a dream!</q></p>
should be rendered as
Martin Luther King sagte: „I have a dream!“
not as
Martin Luther King sagte: “I have a dream!”
Hence quotation marks should not depend on the language of the quote itself, but on the language of the quote’s parent element. Don’t use the selector ‘:lang(de)’, but:
:lang(de)>q { quotes: ‘\201E’ ‘\201C’ ‘\201A’ ‘\2018’; }
I really don’t know where I got my way to quote from, which is they same as you mention, by the way, but I think I got it from W3C own cascade style sheets. I think they have this way of quoting (> q) on their own CSS.
Nice reminder!
For Russian:
:lang(ru){quotes:'0AB' '0BB' '\201E' '\201C';}
Mistype:
:lang(ru){quotes:'0AB' '0BB' '\201E' '\201C';}
For some reason parser preformat code and destruct first pair of quotes in my snippet. Working example.
:lang(ru){quotes:’0AB’ ‘0BB’ ‘\201E’ ‘\201C’;}
Is this still necessary or helpful with all of the browser updates? If so how exactly does this help a site?