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

1. Наследование языковых ценностей
2. Какой языковой атрибут?
3. Селектор псевдокласса: lang (...)
4. Селектор [lang | = "..."], который соответствует началу значения атрибута
5. Селектор [lang = "..."], который соответствует значению атрибута
6. Универсальные селекторы класса или идентификатора
7. Использование селекторов CSS в XML с xml: lang

Целевая аудитория: HTML-кодеры (с использованием редакторов или сценариев), разработчики сценариев (PHP, JSP и т. Д.), CSS-кодеры и все, кто хочет использовать информацию о языке для применения стилей CSS для разметки.

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

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

На этой странице рассматриваются доступные варианты, позволяющие сделать это наиболее эффективно.

Существует четыре способа применения разных стилей к разным языкам в многоязычном документе с использованием CSS. Они перечислены здесь в порядке предпочтения.

1. селектор псевдокласса: lang ()
2. селектор [lang | = "..."], который соответствует началу значения атрибута языка
3. селектор [lang = "..."], который точно соответствует значению языкового атрибута
4. универсальный селектор класса или идентификатора

Для получения дополнительной информации о поддержке этих селекторов см. результаты теста ,

В оставшейся части этой страницы объясняются и приводятся примеры различий в использовании этих селекторов.

Наследование языковых ценностей

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

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

em {font-style: italic; }
em: lang (ja) {font-style: normal; выделение текста: точка; положение текста: над правым; }

Теперь предположим, что у вас есть следующее содержимое, которое поддерживает пользовательский агент: 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: lang будет использоваться вашим XML синтаксический анализатор.

В этой статье сначала будут обсуждаться различные варианты стилей по языку в 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"> Кудуал </ li> </ ul>

может иметь следующий стиль:

body {font-family: "Times New Roman", с засечками;}: lang (ar) {font-family: "Scheherazade", с засечками; размер шрифта: 120%;}: lang (zh-Hant) {семейство шрифтов: Kai, KaiTi, serif;}: lang (zh-Hans) {семейство шрифтов: DFKai-SB, BiauKai, serif;}: lang (din) {font-family: "Doulos SIL", с засечками;}

Греческий и русский используют набор стилей для элемента body.

Это идеальный способ стилизации фрагментов языка, поскольку это единственный селектор, который может применять стилирование к содержимому элемента, когда язык этого содержимого объявлен ранее на странице.

Правило для: lang (zh) будет соответствовать элементам со значением языка zh. Это также будет соответствовать более конкретным спецификациям языка, таким как zh-Hant, zh-Hans и zh-TW.

Селектор: lang (zh-Hant) будет соответствовать только элементам, которые имеют значение языка zh-Hant или унаследовали это значение языка. Если указано правило CSS: lang (zh-TW), правило не будет соответствовать нашему примеру абзаца.

Селектор [lang | = "..."], который соответствует началу значения атрибута

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

body {font-family: "Times New Roman", с засечками;} * [lang | = "ar"] {font-family: "Scheherazade", с засечками; размер шрифта: 120%;} * [lang | = "zh-Hant"] {font-family: Kai, KaiTi, serif;} * [lang | = "zh-Hans"] {font-family: DFKai-SB , BiauKai, 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", с засечками; } * [lang = "ar"] {font-family: "Scheherazade", с засечками; размер шрифта: 120%;} * [lang = "zh-Hant"] {семейство шрифтов: Kai, KaiTi, serif;} * [lang = "zh-Hans"] {семейство шрифтов: DFKai-SB, BiauKai , serif;} * [lang = "din"] {font-family: "Doulos SIL", serif;}

Обратите внимание, что при использовании этого подхода en не будет соответствовать en-AU. Матч должен быть точным.

Универсальные селекторы класса или идентификатора

Этот метод избавляет от необходимости совпадать с описаниями языка и опирается на разметку атрибута class или id. Использование обычного CSS-класса или селектора идентификаторов работает с большинством браузеров, которые поддерживают CSS. Недостатком является то, что добавление атрибутов требует времени и пропускной способности.

В приведенном выше примере разметки для этого потребуется изменить код HTML, добавив атрибуты класса следующим образом:

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

Тогда мы могли бы иметь следующий стиль:

body {font-family: "Times New Roman", с засечками; } .ar {font-family: "Scheherazade", с засечками; размер шрифта: 120%;} .zht {семейство шрифтов: PMingLiU, MingLiU, serif;} .zhs {семейство шрифтов: SimSum-18030, SimHei, serif;} .din {семейство шрифтов: "Doulos SIL", засечек;}

Использование селекторов CSS в XML с xml: lang

Как упоминалось ранее, в документе, который анализируется как XML, необходимо использовать атрибут xml: lang (а не атрибут lang) для выражения языковой информации.

Использование: lang

Использование: lang прост. Если документ анализируется как HTML, селектор: lang будет соответствовать содержимому, язык которого был определен с использованием значения атрибута lang. Однако если документ анализируется как XML, селектор: lang будет сопоставлять содержимое, помеченное значением атрибута xml: lang, и игнорировать любое значение атрибута lang.

Использование attr = и attr | =

Использование этих селекторов связано с некоторыми дополнительными соображениями.

Xml: часть атрибута xml: lang указывает, что это атрибут lang, используемый в пространстве имен XML . Пространства имен 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 и наборам правил в таблице стилей. Также обратите внимание, что URI для объявления пространства имен должен быть точно правильным.

откаты

Для браузеров, которые не знают пространства имен, вы можете использовать экранированные символы. Для этого вам не нужно объявление @namespace, просто одно из следующего:

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

или же:

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

Однако обратите внимание, что если вы попытаетесь использовать этот подход с браузером, поддерживающим пространство имен (т. Е. Самые последние, основные браузеры), он не будет работать, поэтому, если вы считаете, что он необходим, вам следует использовать этот подход в дополнение к селекторы на основе пространства имен.

Я использовал языковые коды ж-хант и ж-ханс. Эти языковые коды не представляют конкретные языки. zh-Hant указывает на китайский язык, написанный на традиционном китайском языке . Точно так же zh-Hans представляет китайский язык, написанный на упрощенном китайском языке. Это может относиться к мандарину или многим другим китайским языкам.

До недавнего времени коды zh-TW и zh-CN использовались для обозначения традиционных и упрощенных версий китайской письменности соответственно. В действительности, zh-TW должен указывать на китайский, на котором говорят на Тайване, хотя на Тайване существует более одного китайского языка. Аналогично, zh-CN представляет китайский язык, на котором говорят в Китае (КНР). Это может относиться к мандарину или любому другому китайскому языку.

Если вам нужно использовать языковые теги для разграничения китайских языков, Реестр языковых подтэгов IANA имеет более точные языковые коды для ряда китайских языков. Для получения дополнительной информации см. Языковые теги в HTML и XML ,