Прискорююча кнопка n назначена для пропусків при навігації по сторінкам. Пропуск для переходу на початок контента.

Даний документ є перекладом. У випадку будь-яких невідповідностей і помилок остання версія документу англійською мовою повинна розглядатися як офіційна. Першопочаткове авторське право належить W3C, як це вказано нижче.

Перекладач: World translation (Олександр Шлапак)

s_gotoW3cHome Інтернаціоналізація
 

Стилізація за допомогою мовних атрибутів

Аудиторія: шифрувальники XHTML/HTML (використовуючи редактори або скрипти), розробники скриптів (PHP, JSP, і т.д.), шифрувальники CSS, та кожен, хто хоче використовувати інформацію про мову для того, щоб застосовувати стилі CSS в розмітці.

Питання

Який найбільш підходящий спосіб зв'язати стилі CSS із текстом, який написаний звичайною мовою в багатомовному HTML або XML документі?

Ввідна інформація

Стилі зазвичай використовуються для того, щоб контролювати зміни в шрифтах, розмірах шрифтів та висотах рядка, які відбуваються в документі при зміні мови. Це може бути особливо корисно при роботі зі Спрощеною китайською у порівнянні з Традиційною китайською, де користувачі віддають перевагу різним шрифтам, хоча шрифти в свою чергу можуть використовувати багато однакових символів. Також це може бути корисним для забезпечення кращої гармонізації зовнішнього вигляду змішаних, специфічних для скрипту шрифтів, наприклад, таких що виникають при змішуванні Арабського та Латинського шрифтів.

На цій сторінці розглядаються доступні опції для того, щоб робити це найбільш ефективно.

Відповідь

Є чотири способи для застосування різних стилів до різних мов за допомогою CSS у багатомовному документі. Вони перераховані тут в пріоритетному порядку.

  1. :lang() pseudo-class selector (селектор псевдо-класу)
  2. a [lang |= "..."] selector, що відповідає початку значення мовного атрибуту
  3. a [lang = "..."] selector, що точно збігається зі значенням мовного атрибуту
  4. a generic (універсальний) клас або id selector

Для отримання додаткової інформації про підтримку цих селекторів дивіться результати тесту.

Решта цієї сторінки пояснює та наводяться приклади того, яким чином відрізняється використання цих селекторів.

Успадкування значень мови

Істотна відмінність між атрибутом :lang та іншими методами полягає в тому, що він розпізнає мову контенту елемента, навіть якщо мова призначена за межами розглянутого елементу.

Припустимо, наприклад, що в майбутньому в Англійському документі, що містить текст на Японській мові ви захотіли стилізувати виділений Японський текст за допомогою спеціальних Asian (Азіатських) CSS3 властивостей, а не italicization (курсива) (що не завжди добре працює із комплексними символами в Японській мові). Ви можете мати наступні правила в своїй таблиці стилів:

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

Тепер припустимо, що у вас є такий контент в якому клієнтський додаток підтримує атрибут :lang та те, що html тег констатує те, що це є Англійський документ.

<p>Це <em>Англійська</em>, але <span lang="ja">これは<em>日本語</em>です。</span></p>

Ви очікуєте побачити виділене Англійське слово написане курсивом, але виділене Японське слово у звичайному тексті матиме невеликі точки над кожним символом, щось на зразок цього:

Зображення того, що ми тільки що описали.

Важливим моментом є те, що інформація, яка розглядалася в цьому розділі не актуальна при використанні селекторів [lang|="..."] або [lang="..."]. Щоб це працювало для цих селекторів вам доведеться чітко призначити мову для кожного Японського тегу em.

Це суттєва відмінність у корисності цих різних селекторів.

Який мовний атрибут використати?

Атрибут lang використовується для визначення мови тексту, який обслуговується як HTML. Для тексту, який обслуговується як XML потрібно використовувати атрибут xml:lang.

Для XHTML, що обслуговується як text/html, рекомендується використовувати обидва атрибути, оскільки синтаксичний аналізатор HTML розглядатиме атрибут lang, в той час, як ваш синтаксичний аналізатор XML використовуватиме XML атрибут xml:lang.

Спочатку стаття обговорюватиме різні варіанти стилізації в HTML за допомогою мови, використовуючи атрибут lang. Тоді слід розглянути розділ про те як стилізувати XML документи на основі xml:lang.

:lang() - селектор псевдо-класу

HTML фрагмент:

<p>Ввічливо вітати людей на їхній рідній мові:</p>
<ul>
    <li lang="zh-Hans">欢迎</li>
    <li lang="zh-Hant">歡迎</li>
    <li lang="el">Καλοσωρίσατε</li>
    <li lang="ar">اهلا وسهلا</li>
    <li lang="ru">Добро пожаловать</li>
    <li lang="din">Kudual</li>
</ul>

може містити наступний стиль:

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

Зверніть увагу, що Грецька та Російська мови використовують стиль, який встановлений для елементу body.

Це було б ідеальним способом стилізувати мовні фрагменти, тому що це єдиний селектор який може застосувати стиль до контенту елемента, у разі якщо мова контенту була призначена на сторінці раніше.

Правило для селектора :lang(zh) відповідатиме елементам із мовним значенням zh. Воно також відповідатиме таким більш конкретним мовним специфікаціям, як zh-Hant, zh-Hans та zh-HK.

Селектор :lang(zh-Hant) відповідатиме лише елементам, які мають таке значення мови, як zh-Hant або успадкували це значення. Якщо правило CSS зазначає :lang(zh-HK), то воно не відповідатиме нашому зразку.

Селектор [lang|="..."], що відповідає початку значення атрибуту

Наприклад для розмітки яку ми бачили в попередньому розділі, таблицю стилів можна записати в такому вигляді:

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

На відміну від :lang, цей селектор буде працювати тільки для елементів, які містять атрибут lang (дивіться Успадкування значень мови).

Є суттєва відмінність між цим селектором і селектором [lang="..."]. У той час як [lang="..."] відповідатиме елементам тільки тоді, коли значення селектора та атрибуту збігаються, цей селектор буде відповідати тільки значенню такого атрибута мови , який має додаткові значення розділені дефісами. Тому селектор [lang|="sl"] відповідатиме sl-IT, sl-nedis або sl-IT-nedis, а селектор [lang|="zh-Hans"] відповідатиме zh-Hans-CN.

Селектор [lang="..."], що співпадає із значенням атрибуту

Третім методом задання правил є використання селектора атрибуту, який точно відповідає значенню атрибута.

На відміну від :lang, цей селектор буде працювати тільки для елементів, які містять атрибут lang (дивіться Успадкування значень мови).

Для попереднього прикладу розмітки, таблицю стилів можна записати в такому вигляді:

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

Зауважимо, що при використанні такого підходу en не відповідатиме en-AU. Відповідність має бути точною.

Generic (універсальний) клас або id selectors (селектори)

Цей метод дозволяє взагалі уникнути необхідності у відповідності мовних призначень, і залежить від розмітки class елементів. Використання звичайних селекторів class або id selector в CSS працює з більшістю браузерів, що підтримують CSS. Недоліком є те, що додавання class атрибутів займає час і трафік.

Для вищенаведеного прикладу розмітки, нам потрібно буде змінити XHTML код, додавши class атрибути таким чином, як показано далі:

<p>Ввічливо вітати людей на їхній рідній мові:</p>
<ul>
    <li class="zhs" lang="zh-Hans">欢迎</li>
    <li class="zht" lang="zh-Hant">歡迎</li>
    <li class="el" lang="el">Καλοσωρίσατε</li>
    <li class="ar" lang="ar">اهلا وسهلا</li>
    <li class="ru" lang="ru">Добро пожаловать</li>
    <li class="din" xml:lang="din" lang="din">Kudual</li>
</ul>

Тоді ми могли б мати такий стиль:

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

Використання CSS селекторів в XML із xml:lang

Як уже згадувалося раніше: в документі, що аналізується як XML для того щоб виразити інформацію про мову необхідно використовувати атрибут xml:lang (а не атрибут lang).

Використання :lang

Селектор :lang дуже просто використовувати. Якщо документ аналізується як HTML, то селектор :lang відповідатиме контенту, в якому мова була визначена за допомогою значення атрибуту lang. Однак, якщо документ аналізується як XML, то селектор :lang відповідатиме контенту, який позначений атрибутом xml:lang та ігноруватиме будь-яке значення атрибуту lang.

Використання attr= та attr|=

Використання цих селекторів включає в себе деякі додаткові міркування.

xml: частина атрибуту xml:lang вказує, що в просторі імен XML використовувався атрибут lang. CSS3 Namespaces (Простір імен CSS3) описує, як поводитися з атрибутом xml:lang в просторі імен. По суті вам потрібно призначити простір імен, а потім замінити двокрапку на вертикальну риску. Наприклад:

@namespace xml "http://www.w3.org/XML/1998/namespace" 
*[xml|lang |= 'ar'] { ... }

або:

@namespace xml "http://www.w3.org/XML/1998/namespace" 
*[xml|lang = 'ar'] { ... }

Будь-які правила @namespace повинні слідувати всім @charset та @import правилам і передувати всім іншим at-rules (директивам CSS аналізатора) та наборам правил в таблиці стилів. Відзначимо також, що URI для призначення простору імен потрібно вказувати точно.

Відхилення

У браузерах, які не розпізнають простір імен, ви можете повернутися до екранованих символів. Однак слід зазначити, що цей підхід не буде працювати у браузерах, які розпізнають простір імен. На момент написання простір імен підтримували Firefox, Safari, Opera та Chrome (Internet Explorer не підтримує відображення XML сторінок), так що якщо ви відчуваєте, що це необхідно, ви повинні використовувати цей підхід на додаток до селекторів, які основані на просторі імен.

Для цього вам не потрібно призначення @namespace, а лише одне із нижченаведеного:

*[xml\:lang |= '..'] { ... } 

або:

*[xml\:lang = '..'] { ... } 

Доречі

Я використовував такі мовні коди: "zh-Hant" та "zh-Hans". Ці мовні коди не представляють конкретних мов. "zh-Hant" представляє Китайську мову, що написана на Традиційному Китайському скрипті. Аналогічним чином “zh-Hans” представляє Китайську мову, що написана на Спрощеному Китайському скрипті. Це може відноситися до Мандаринської мови або багатьох інших Китайських мов.

До недавнього часу коди "zh-TW" та "zh-CN" використовувалися, відповідно, щоб вказати Традиційну і Спрощену версії Китайської писемності. Насправді, "zh-TW" має вказувати Китайську розмовну мову в Тайвані, хоча є декілька Китайських мов якими розмовляють у Тайвані. Аналогічним чином "zh-CN" представляє Китайську розмовну мову в Китаї (Китайська Народна Республіка). Це може відноситися до Мандаринської або будь-якої іншої Китайської мови.

Деякі з сучасних браузерів будуть використовувати наявність мовних тегів "zh-CN" та "zh-TW" для того, щоб вибрати шрифти за замовчуванням для відображення тексту тоді, коли дизайнер веб-сторінки не вказав шрифт (для отримання додаткової інформації дивіться результати тесту).

Якщо вам потрібно використати мовні теги для того, щоб розрізняти Китайські мови, то Мовний subtag реєстр IANA має більш точні мовні коди для діапазону Китайських мов.

Розкажіть нам про те, що Ви думаєте.

Підписатися на RSS джерело.

Нові джерела

Новини головної сторінки

Twitter (Новини головної сторінки)

‎@webi18n

Додаткові матеріали

Автор: Andrew Cunningham, State Library of Victoria. Змінено: Richard Ishida, W3C. Перекладач: World translation (Олександр Шлапак).

Допустимий XHTML 1.0!
Допустимий CSS!
Кодування UTF-8!

Переклад Англійського контенту від 2009-11-19. Переклад останнього оновлення 2012-01-15 17:00 GMT

Для перегляду історії внесення змін до перекладу натисність qa-css-lang в блоге i18n.