FAQ: Styling using the lang attribute

What is the most appropriate way to associate CSS styles with text in a particular language in a multilingual XHTML/HTML document?

Inheritance of language values

A significant difference between :lang and the other methods is that it recognises the language of element content even if the language is declared outside the element in question.

Suppose, for example, that in a future English document containing Japanese text you wanted to style emphasised Japanese text using special Asian CSS3 properties, rather than italicisation (which doesn't always work well with the complex characters of Japanese). You might have the following rules in your stylesheet:

em           { font-style: italic; }
em:lang(ja)  { font-style: normal; font-emphasize: dot before; }

Now assume that you have the following content, that the user agent supports :lang, and that the html tag states that this is an English document.

You would expect to see the emphasized English word italicised, but the emphasized Japanese word in regular text with small dots above each character, something like this:

The important point to be made in this section is that this would not be possible using the [lang|="..."] or [lang="..."] selectors. For those to work you would have to declare the language explicitly on each Japanese em tag.

This is a significant difference between the usefulness of these different selectors.

The :lang() pseudo-class selector

The XHTML fragment:

<p>It is polite to welcome people in their own language:</p>
<ul>
    <li xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="ru" lang="ru">Добро пожаловать</li>
    <li xml:lang="din" lang="din">Kudual</li>
</ul>

could have the following styling:

body 		{font-family: "Times New Roman", serif;}
:lang(ar) 	{font-family: "Traditional Arabic", serif; font-size: 1.2em;}
:lang(zh-Hant) 	{font-family: PMingLiU,MingLiU, serif;}
:lang(zh-Hans) 	{font-family: SimSum-18030,SimHei, serif;}
:lang(din) 	{font-family: "Doulos SIL", serif;}

Note that the Greek and Russian use the styling set for the body element.

This would be the ideal way to style language fragments, because it is the only selector that can apply styling to the content of an element when the language of that content is declared earlier in a page.

The rule for :lang(zh) would match elements with a language value of zh. It would also match more specific language specifications such as zh-Hant, zh-Hans and zh-HK.

The selector :lang(zh-Hant) will only match elements that have a language value of zh-Hant or have inherited that language value. If the CSS rule specified :lang(zh-HK), the rule would not match our sample paragraph.

A [lang|="..."] selector that matches the beginning of a value of an attribute

For the earlier example of markup, the stylesheet could be written as:

body 		   {font-family: "Times New Roman", serif;}
*[lang|="ar"] 	   {font-family: "Traditional Arabic", serif; font-size: 1.2em;}
*[lang|="zh-Hant"] {font-family: PMingLiU,MingLiU, serif;}
*[lang|="zh-Hans"] {font-family: SimSum-18030,SimHei, serif;}
*[lang|="din"]     {font-family: "Doulos SIL", serif;}

The selectors for Chinese use specific values, and will only match to the indicated values, while the other language attribute selectors are more generic. For instance [lang|="en"] will successfully match en-NZ.

This, and the next selector, will work as long as you declare the language of the element you want to style in the element itself, unlike .

There is a significant difference between [lang="en"] and [lang|="en"]. The first language selector will only match elements with a language attribute equal to en, while the second selector will match any element with a language attribute starting with en. Therefore the second selector would match en-US, en-HK or en-CA. In fact lang(en) is an equivalent form to [lang|="en"].

A [lang="..."] selector that matches the value of an attribute

The third method of specifying rules is to use an attribute selector that exactly matches the attribute value.

For the earlier example of markup, the stylesheet could be written as:

body 		    {font-family: "Times New Roman", serif;}
*[lang="ar"] 	    {font-family: "Traditional Arabic", serif; font-size: 1.2em;}
*[lang="zh-Hant"]   {font-family: PMingLiU,MingLiU, serif;}
*[lang="zh-Hans"]   {font-family: SimSum-18030,SimHei, serif;}
*[lang="din"] 	    {font-family: "Doulos SIL", serif;}

Note that using this approach en will not match en-AU. The match has to be exact.

Generic class or id selectors

Currently, the best supported method is to use an ordinary CSS class or id selector.

This works with most browsers that support CSS. The disadvantage is that adding the class attributes takes up time and bandwidth.

For the example above, this would require us to change the XHTML code by adding class attributes as follows:

<p>It is polite to welcome people in their own language:</p>
<ul>
    <li class="zhs" xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li class="zht" xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li class="ar" xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="ru" lang="ru">Добро пожаловать</li>
    <li class="din" xml:lang="din" lang="din">Kudual</li>
</ul>

We could then have the following styling:

body 	{font-family: "Times New Roman", serif; }
.ar 	{font-family: "Traditional Arabic", serif; font-size: 1.2em;}
.zht 	{font-family: PMingLiU, MingLiU, serif;}
.zhs 	{font-family: SimSum-18030, SimHei, serif;}
.din	{font-family: "Doulos SIL", serif;}