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

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

Переводчик: World translation (Александр Шлапак)

s_gotoW3cHome Internationalization
 

Стилизация с помощью языковых атрибутов

Предполагаемая аудитория: шифровальщики 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.