Internationalization Language CSS

: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(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(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(km){font-family:"Khmer OS System","Khmer OS","Khmer Kampongtrach","CDT Khmer",inherit;line-height:2em;}
: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;}


  1. User Avatar
    Sunny Singh
    Permalink to comment#

    Never knew you could detect language in CSS!

  2. User Avatar
    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. User Avatar
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar

    thanks for Farsi fonts ;)

  6. User Avatar
    Gunnar Bittersmann
    Permalink to comment#

    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’; }

    • User Avatar
      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. User Avatar
    Permalink to comment#

    For Russian:

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

    • User Avatar
      Permalink to comment#


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

    • User Avatar
      Permalink to comment#

      For some reason parser preformat code and destruct first pair of quotes in my snippet. Working example.

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

  8. User Avatar
    Peter Marino
    Permalink to comment#

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

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.