Направление вывода текста: свойства "direction" и "unicode-bidi"

Символы определенных в некоторых шрифтах пишутся справа налево. В некоторых документах, в частности, в документах на арабском языке или на иврите и в некоторых смешанных языковых контекстах текст в одном (визуально отображаемом) блоке может выводиться в различных направлениях. Такая ситуация обозначается термином "двунаправленность" или более коротким термином "bidi" от английского "bidirectionality".

В стандарте Unicode описан сложный алгоритм для определения точного направления текста. Алгоритм состоит из неявной части, основывающейся на свойствах символов, и явной части, управляющей процессом вставки и переназначения. В спецификации CSS2 данный алгоритм используется для осуществления адекватного двунаправленного вывода текста. Свойства "direction" и "unicode-bidi" позволяют разработчикам указывать способы отображения множества элементов и атрибутов языка документа на множество понятий данного алгоритма.

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

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

В спецификации языка HTML 4.0 (, раздел 8.2) определяется тип поведения элементов HTML при двунаправленном выводе текста. Конформные пользовательские агенты, управляющие выводом HTML-документов, могут игнорировать свойства "direction" и "unicode-bidi" в таблицах стилей разработчиков и пользователей. Правила таблицы стилей, управляющие двунаправленным выводом текста, определенным в описании , представлены в примере таблицы стилей. Спецификация языка HTML 4.0 включает и другую информацию об использовании разных направлений вывода текста.

"direction"

Значение: ltr | rtl | inherit
Начальное значение: ltr
Область применения: все элементы, см. описание
Наследование: да
Процентное задание: N/A

Данное свойство задает основное направление написания, используемое в блоках, направление вставок и переназначений (см. "unicode-bidi") для алгоритма двунаправленного вывода, используемого в Unicode. Оно также задает направление вывода столбцов таблицы, направление горизонтального переполнения и положение неполной последней строки в блоке в случае, если используется выравнивание "text-align:justify".

ltr

Направление слева направо.

rtl

Направление справа налево.

Чтобы свойство "direction" могло влиять на элементы строкового уровня, свойству "unicode-bidi" необходимо присвоить значение "embed" или "override".

Примечание. Если свойство "direction" применяется к элементам столбцов таблицы, то оно не наследуется ячейками столбца, т.к. столбцы не существуют в дереве документа. Поэтому в CSS не существует простого способа конструирования правил наследования атрибута "dir".

"unicode-bidi"

Значение: normal | embed | bidi-override | inherit
Начальное значение: normal
Область применения: все элементы, кроме see prose
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Значения данного свойства имеют следующий смысл:

normal

Согласно алгоритму двунаправленного вывода элемент не создает нового дополнительного уровня вставки. Для элементов строкового уровня неявная перегруппировка выполняется только в пределах его границ.

embed

Если элемент является элементом строкового уровня, то данное значение разрешает создание дополнительного уровня вставки согласно алгоритму двунаправленного вывода. Направление данного уровня вставки задается свойством "direction". Внутри элемента перегруппировка выполняется неявно. Это соответствует добавлению LRE (U+202A; для "direction: ltr") или RLE (U+202B; для "direction: rtl") в начало элемента и PDF (U+202C) в конец элемента. <

bidi-override

Если элемент является элементом строкового уровня или элементом уровня блока, который содержит только элементы строкового уровня, то данное значение создает переназначение. Это значит, что внутри элемента перегруппировка осуществляется в строгом порядке согласно свойству "direction", а неявная часть алгоритма двунаправленного вывода игнорируется. Это соответствует добавлению LRO (U+202D; для "direction: ltr") или RLO (U+202E; для "direction: rtl") в начало элемента и добавлению PDF (U+202C) в конец элемента.

В конечном итоге порядок следования символов, выработанный в каждом элементе уровня блока, будет совпадать с тем, который получится в результате добавления управляющих кодов bidi, как это было описано ранее, удаления разметки и подачи получившейся в результате этого последовательности символов в модуль, реализующий алгоритм двунаправленного вывода неформатированного текста, в котором используется то же самое разбиение на строки, что и в форматированном тексте. При этом нетекстовые элементы, например, изображения, рассматриваются как нейтральные символы, если только для свойства "unicode-bidi" не установлено значение "normal". В последнем случае элементы будут рассматриваться как символы в направлении, указанном в свойстве "direction" элемента.

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

Т.к. для алгоритма, используемого в Unicode, установлено ограничение в 15 уровней вставки, рекомендуется не использовать свойство "unicode-bidi" со значением, отличным от "normal", если в этом нет острой необходимости. В частности, значение свойства "inherit" следует использовать очень осторожно. Тем не менее, для элементов, которые будут отображаться в виде блоков, рекомендуется указать "unicode-bidi: embed", чтобы сохранить целостность элемента в том случае, если его вывод будет осуществляться по строкам (см. пример ниже).

В следующем примере показан XML-документ с двунаправленным выводом текста. Он иллюстрирует важный принцип: дизайнерам DTD следует учитывать свойство bidi как для корректных элементов и атрибутов языка документа, так и для всех сопутствующих таблиц стилей. Таблицы стилей должны создаваться таким образом, чтобы правила bidi были отделены от других правил стилей. Правила bidi не должны переназначаться другими таблицами стилей для сохранения bidi-поведения языка документа или DTD.

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


ИВРИТ1 ИВРИТ2 русский3 ИВРИТ4 ИВРИТ5
ИВРИТ6 ИВРИТ7 ИВРИТ8


русский9 русский10 русский11 ИВРИТ12 ИВРИТ13
русский14 русский15 русский16
русский17 ИВРИТ18 русский19 ИВРИТ20

Поскольу это XML, то за установление направления написания ответственна таблица стилей. Она приведена ниже:

/* Правила для bidi */
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
RUSSIAN {direction: ltr; unicode-bidi: embed} /* Правила для презентации */
HEBREW, RUSSIAN, PAR {display: block}
EMPH {font-weight: bold}

Элемент HEBREW является блоком с направлением написания справа налево, элемент RUSSIAN - это блок с направлением написания слева направо. Элементы PAR - это блоки, которые наследуют основное направление написания у своих родительских элементов. Таким образом, первые два элемента PAR начинаются с верхней правой стороны, а последние три начинаются с верхней левой стороны. Помните, что названия элементов HEBREW и RUSSIAN выбраны только для примера; как правило, названия элементов должны отображать структуру, не ссылаясь на язык.

Элемент EMPH является элементом строкового уровня, и поскольку его свойство "unicode-bidi" имеет значение "normal" (начальное значение), то он не влияет на упорядочение текста. А элемент HE-QUO создает вставки.

Форматирование этого текста может иметь следующий вид при большой длине строки:

5ТИРВИ 4ТИРВИ русский3 2ТИРВИ 1ТИРВИ
8ТИРВИ 7ТИРВИ 6ТИРВИ
русский9 русский10 русский11 13ТИРВИ 12ТИРВИ
русский14 русский15 русский16
русский17 20ТИРВИ русский19 18ТИРВИ

Помните, что в случае вставки HE-QUO элемент ИВРИТ18 будет расположен справа от элемента русский19.

2ТИРВИ 1ТИРВИ
-ВИ 4ТИРВИ русский3
5ТИР

ВИ 7ТИРВИ 6ТИРВИ
8ТИР

русский9 русский10 рус-
ский11 12ТИРВИ
13ТИРВИ

русский14 русский15
русский16

русский17 18ТИРВИ
20ТИРВИ русский19

Т.к. элемент ИВРИТ18 должен читаться до элемента русский19, то он находится на одну строку выше него. Простое разбиение длинной строки при прежнем форматировании не дало бы результатов. Необходимо учесть, что первый слог элемента русский19 мог бы находиться на предыдущей строке, но разбивка по слогам слов, написанных слева направо, в контексте написания справа налево, и наоборот, обычно не используется во избежание появления дефиса в середине строки.

Описание

direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.

Свойство direction достаточно универсально и управляет следующими возможностями:

  • способ отображения текста в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки текстового блока при text-align : justify .

Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override .

Синтаксис

direction: ltr | rtl | inherit

Значения

ltr Устанавливает направление слева направо. rtl Задает направление справа налево. inherit Наследует значение родителя.

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

direction

Велосипед уже изобрели, различные приемы верстки тоже. Так что больше знакомься с мировым опытом по части верстки и тебе не придется тратить время на разработку того, что всем давно известно.

Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоса прокрутки в браузере Internet Explorer отображается слева.

Рис. 1. Результат использования direction в браузере Internet Explorer

HTML5 CSS 2.1 IE Cr Op Sa Fx

direction

19992000 200120022003
Нефть1634 627457
Золото469 725647
Дерево773 793486

Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.

Рис. 2. Применение direction к таблице

Браузеры

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, '); }); } } }); })(jQuery);

Save
Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.