Treehouse: 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

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```