unicode-bidi

Свойство unicode-bidi совместно со свойством direction задают, как должен обрабатываться двунаправленный текст.

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

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

Значение по умолчанию 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 lang="ru"> <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

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

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

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