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.5 12 2 9.2 1.3 1
1 1 8 1.3

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

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

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