unicode-bidi

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

Краткая информация

Значение по умолчанию normal
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

unicode-bidi: normal | embed | bidi-override
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

normal
Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода.
embed
Переопределяет параметры текста, располагая его, как указано в свойстве direction.
bidi-override
Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div {
  direction: rtl;
  unicode-bidi: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>unicode-bidi</title> <style> .rtl p { unicode-bidi: bidi-override; /* Меняются характеристики текста */ direction: rtl; /* Текст пишется справа налево */ } </style> </head> <body> <div class="rtl"> <p>А роза упала на лапу Азора.</p> <p>У лип Леша нашел пилу.</p> <p>И городу дорог огород у дороги.</p> <p>Уж я веники не вяжу.</p> <p>Аргентина манит негра.</p> <p>Он дивен, палиндром — и ни морд, ни лап не видно.</p> <p>Но невидим архангел, мороз узором лег на храм и дивен он.</p> <p>Леша на полке клопа нашел.</p> <p>Я не стар брат Сеня.</p> </div> </body> </html>

Результат данного примера показан на рис. 1. Поскольку используется значение bidi-override свойства unicode-bidi, то порядок символов в тексте меняется на обратный. А именно на тот, что указан свойством direction. Заметьте, что текст располагается по правому краю окна, точка в предложении слева от текста.

Результат использования unicode-bidi и direction

Рис. 1. Результат использования unicode-bidi и direction

Объектная модель

Объект.style.unicodeBidi

Спецификация

СпецификацияСтатус
CSS Writing Modes Module Level 3Рабочий проект
CSS Level 2 (Revision 1)Рекомендация

Браузеры

5.51229.21.31
1181.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также