FAQ: Stylizacja z użyciem atrybutu "lang"

Jaki jest najstosowniejszy sposób kojarzenia stylów CSS z tekstem w konkretnym języku w wielojęzycznych dokumentach XHTML/HTML?

Dziedzictwo wartości języka

Ważną różnicą pomiędzy :lang i innymi metodami jest to, że rozpoznaje on język elementu, nawet jeśli język jest deklarowany poza elementem.

Załóżmy, że w dokumencie angielskim zawierającym tekst japoński chce się ustawic nacisk dla tekstu japońskiego używając azjatyckich właściwości CSS3 zamiast kursywy (która nie zawsze działa ze znakami japońskimi). Można użyć następującej reguły w arkuszu stylów:

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

Oczekuje się, że angielskie słowa będą w kursywie ale japoński tekst będzie tekstem zwykłym zawierającym kropki nad każdym znakiem w taki oto sposób: :

Ważnym jest stwierdzenie, że nie byłoby to możliwe przy użyciu selektorów [lang|="..."] lub [lang="..."]. Aby to działało należałoby zadeklarować język na każdym japońskim znaczniku em.

Jest to najistotniejszą różnicą pomiędzy tymi dwoma selektorami.

Seletor pseudoklasy :lang()

Fragment XHTML:

<p>Grzycznym jest witanie ludzi w ich własnym języku:</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>

może mieć następujący styl::

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

Zauważ, że grecki i rosyjski używają stylu osadzonego w elemencie body.

Byłoby to doskonałym sposobem na określanie stylu dla fragemetów zawierających inny język, ponieważ jest to jedyny selektor, który stosuje styl dla zawartości elementu kiedy język zawartości jest wcześniej zadeklarowany na stronie.

Reguła dla:lang(zh) będzie pasować do elementów zawierających wartość zh. Będzie ona również zgodna z bardziej precyzyjnym określeniem języka takim jak: zh-Hant, zh-Hans i zh-HK.

Selektor :lang(zh-Hant) będzie pasował do elementów, które mają wartość zh-Hant lub do tych, które odziedziczyły wartość języka. Jeśli reguła CSS mówi :lang(zh-HK), nie będzie ona pasować do naszego przykładu.

Selektor [lang|="..."], który pasuje do początku wartości atrybutu

Dla wcześniejszego przykładu arkusz mógłby być napisany w taki sposób:

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

Selektory chińskiego używają konkretnej wartości i będą pasować jedynie do tych wartości, podczas gdy inne selektory atrybutu języka są bardziej rodzajowe. Np.: [lang|="en"] pasuje do en-NZ.

Ten, jak również następny selektor, będą działać tak długo jak zadeklarowany jest język w samym elemencie

Istniej duża różnica pomiędzy [lang="en"] i [lang|="en"]. Pierwszy selektor będzie pasował jedynie do elementów zawierających atrybut en, a drugi będzie pasował do elementów zawierających atrybut zaczynający się od en. Z tego powodu drugi selektor będzie pasował do en-US, en-HK lub en-CA. Faktycznie lang(en) jest odpowiednikiem [lang|="en"].

Selektor [lang="..."] odpowiadający wartości atrybutu

Trzecim sposobem określania reguły jest użycie seletora, który dokładnie odpowiada wartości atrybutu.

Dla wcześniejszego przykładu arkusz mógłby być napisany w taki sposób:

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

Zauważ, że używając tej metody, en nie odpowiada en-AU. Wartość musi być identyczna.

Generic class lub selektor id

Obecnie najlepszą metodą jest zastosowanie zwykłej klasy CSS i selektora id.

Działa to z większościa przeglądarek wspierających CSS. Minusem jest to, że dodawanie klas jest czasochłonne i zajmuje niepotrzebnie pasmo.

W powyższym przykładzie należałoby zmienić kod XHTML, dodając atrybuty klas w następujący sposób:

<p>Grzycznym jest witanie ludzi w ich własnym języku:</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>

Można wtedy dodać następujące style:

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