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

Какой наиболее подходящий способ связать стили CSS с текстом, который написанный на естественном языке в многоязычном HTML или XML документе?

Унаследование значений языка

Существенное различие между атрибутом :lang и другими методами заключается в том, что он распознает язык контента элемента, даже если язык назначен за пределами рассматриваемого элемента.

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

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

Теперь предположим, что у вас есть такой контент в котором клиентское приложение поддерживает атрибут :lang и то, что html тэг констатирует, что это Английский документ.

Вы ожидаете увидеть выделенное Английское слово написанное курсивом, но выделенное Японское слово в обычном тексте будет иметь небольшие точки над каждым символом, нечто вроде этого:

Важным моментом является то, что информация, которая рассматривалась в этом разделе не актуальна при использовании селекторов [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 = '..'] { ... }