Klucz dostępu n przeskakuje w nawigacji strony. Przejdź do początku.

Ten dokument jest tłumaczeniem. W przypadku rozbieżności i błędów aktualna wersja angielska powinna być uznana za autorytatywną. Pierwotne prawa autorskie należą do W3C jak wykazano poniżej.

Tłumacz: A.Osobka, N.Fabisz, Angielski Team

s_gotoW3cHome Internacjonalizacja
 

Stylizacja z użyciem atrybutu "lang"

Potencjalni odbiorcy: koderzy XHTML/HTML (używający edytorów lub skryptujący), deweloperzy skryptów (PHP, JSP, etc.), koderzy CSS oraz każdy kto che zastosować informacje o języku w arkuszu CSS.

Uwaga: Wprowadzono zmiany do oryginalnej wersji angielskiej od czasu wykonania tłumaczenia. Dostępna lista zmian.

Pytania

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

Tło informacyjne

Style prezentacji są powszechnie używane do kontrolowania zmian w czcionkach, rozmiarów czcionek i wysokości linii w przypadku kiedy zmienia się język dokumentu. Jest to szczególnie pomocne w przypadku języka chińskiego urposzczonego i tradycyjnego. Może to również zharmonizować wygląd mieszanych czionek np.: kiedy łączy się czionki arabskie z łacińskimi.

Niniejsza strona prezentuje najbardziej skuteczne opcje dostępne.

Odpowiedź

Istnieją cztery sposoby przypisywania stylów różnym językom w dokumentach wielojęzycznych przy użyciu CSS2. Wyszczególnione są one poniżej w preferowanej kolejności.

  1. selektor :lang()
  2. selektor [lang |= "..."], który jest zgodny z początkiem wartośći atrybutu języka
  3. selektor [lang = "..."], który dokładnie odpowiada wartości atrybutu języka
  4. generic class lub selektor id

W czasie pisania tego artykułu Firefox 1.0, Mozilla 1.7.2, Netscape 8.0 i Opera 8.0.2* miały wsparcie dla tych selektorów. Niestety, nie posiadał go Internet Explorer. Oznacza to, że spora część czytelników nie mogło zobaczyć właściwych rezultatów w przypadku zastosowania tych selektorów i potrzebne było użycie generic class lub selektora id na każdym znaczniku na którym miał się pojawić styl. Więcej informacji na temat wsparcia dla tych selektorów jest dostępnych w wynikach testów.

* Poza małą usterką w Operze dotyczącą obsługiwania selektora e [lang |= "..."] (zobacz wyniki testów).

Dalsza część niniejszej strony przytacza przykłady na temat różnic pomiędzy powyższymi selektorami.

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

Zakładając, że umieściłeś następującą treść, oprogramowanie użytkownika wspiera:lang i znacznik HTML mówi, że jest to dokument w języku angielskim.

<p>To jest <em>angielski</em> ale <span lang="ja" xml:lang="ja">これは<em>日本語</em>です。</span></p>

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

Zdjęcie opisanego przypadku.

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.

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

Dodadkowe informacje

Użyłem kodów języka "zh-Hant" i "zh-Hans". Kody te nie reprezentują konkretnych języków. "zh-Hant" wskazuje na język chiński - skrypt chińskiego tradycyjnego. Podobnie “zh-Hans” wskazuję na chiński ale napisany w skrypcie uproszczonym.

Do niedawna kody "zh-TW" i "zh-CN" były używane w stosunku do tradycyjnego i uproszczonego chińskiego języka pisanego. W rzeczywistości "zh-TW" powinien wskazywać na język chiński używany w Tajwanie, chociaż istnieje tam wiele języków mówionych. Podobnie "zh-CN"reprezentuje język chiński używany w Chinach (PRC). Może się on odnosić do mandaryńskiego lub innych języków chińskich.

Niektóre z nowoczesnych przeglądarek będą wykorzystywać obecność znaczników języka "zh-CN" i "zh-TW" do wyboru domyślnych czionek tekstu kiedy nie są one sprecyzowane przez autora tekstu (więcej informacji w rezultatach testów).

Jeśli potrzebujesz znaczników do rozróżniania pomiędzy językami chińskimi, IANA language subtag registry ma bardziej precyzyjne kody dla szeregu języków chińskich.

Powiedz nam co myślisz (po angielsku).

Prenumeruj kanał RSS.

Nowe źródła

Wiadomość ze strony głównej

Twitter (Wiadomość ze strony głównej)

‎@webi18n

Warto przeczytać

Autor: Andrew Cunningham, State Library of Victoria. Zmodyfikowano przez: Richard Ishida, W3C. Tłumacz: A.Osobka, N.Fabisz, Angielski Team.

Ważny XHTML 1.0!
Ważne CSS!
Zakodowano w UTF-8!

Angielska wersja dokumentu z dnia 2005-08-03. Tłumaczenie wykonano dnia 2011-02-25 8:07 GMT

Historia zmian dokumentu qa-css-lang w blogu i18n.