Grow your CSS skills. Land your dream job.

Last updated on:

Internationalization Language CSS

/*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;}

Comments

  1. Permalink to comment#

    Never knew you could detect language in CSS!

  2. Permalink to comment#

    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.

  3. deche
    Permalink to comment#

    hey….how it works? and how to use it?
    i’m newbie, hehe.. :p

  4. Colin
    Permalink to comment#

    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.

  5. Omid

    thanks for Farsi fonts ;)

  6. 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′; }

    • Andrés Botero
      Permalink to comment#

      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!

  7. For Russian:

    :lang(ru){quotes:'0AB' '0BB' '\201E' '\201C';}

  8. Is this still necessary or helpful with all of the browser updates? If so how exactly does this help a site?

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".