CSS-свойство unicode-bidi
Свойство unicode-bidi управляет встраиванием текста и работает совместно со свойством direction. Смотрите синтаксис и примеры.
Свойство unicode-bidi управляет отображением двунаправленного (bidi) текста — текста, в котором смешиваются письмо слева направо и справа налево, — позволяя переопределить встроенный в браузер алгоритм двунаправленного отображения Unicode.
Большинству страниц это свойство не нужно. Браузеры уже правильно переставляют смешанный латинский, арабский и ивритский текст с помощью алгоритма двунаправленного отображения Unicode. unicode-bidi используется лишь тогда, когда это поведение по умолчанию неверно: например, когда изолированное значение (номер телефона, имя пользователя, цена) навязывает своё направление окружающему предложению, или когда нужно принудительно задать визуальный порядок.
На практике unicode-bidi применяется вместе со свойством direction: direction задаёт базовое направление текста, а unicode-bidi определяет, насколько жёстко это базовое направление применяется. Вместе они являются CSS-эквивалентом HTML-атрибута dir и элементов <bdo>/<bdi>.
unicode-bidi даёт видимый эффект только тогда, когда элемент содержит текст с разными направлениями. Само по себе оно ничего не делает — оно работает в связке со свойством direction.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам, хотя некоторые значения не оказывают эффекта на строчные элементы. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS2 |
| DOM-синтаксис | object.style.unicodeBidi = "isolate"; |
Синтаксис
Значения CSS unicode-bidi
unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;Пример свойства unicode-bidi:
В примере ниже блок .text использует direction: rtl совместно с unicode-bidi: embed. Арабская фраза сохраняет свой естественный порядок справа налево, а встраивание добавляет один дополнительный уровень bidi, в результате чего весь блок трактуется как направленный справа налево — знаки препинания и латинские слова позиционируются относительно этой базы.
Пример кода CSS unicode-bidi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "embed" value. مرحبا بالعالم</div>
</body>
</html>Пример свойства unicode-bidi со значением "bidi-override":
bidi-override — наиболее агрессивное значение: оно игнорирует собственное направление символов и отображает каждый символ строго в порядке, заданном свойством direction. При direction: rtl даже латинский текст переворачивается посимвольно, поэтому данное значение применяется главным образом для специальных эффектов, а не для реального текста документа.
Пример CSS unicode-bidi bidi-override
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| normal | Не создаёт дополнительного уровня встраивания. |
| embed | Открывает дополнительный уровень встраивания для строчного элемента. |
| bidi-override | Создаёт переопределение для строчного элемента. Для блочных контейнерных элементов это значение создаёт переопределение для дочерних элементов строчного уровня. |
| isolate | Элемент изолируется от соседних элементов. Данное значение указывает, что направление контейнера элемента должно вычисляться без учёта содержимого этого элемента. |
| isolate-override | Применяет поведение изоляции к окружающему содержимому и поведение переопределения — к внутреннему содержимому. |
| plaintext | Ведёт себя как значение isolate, однако направление вычисляется по правилам P2 и P3 алгоритма двунаправленного отображения Unicode. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Какое значение использовать?
- Просто встраиваете фразу в противоположном направлении? Используйте
embedсовместно с соответствующим значением direction. Это классический случай «цитата на арабском внутри английского абзаца». - Вставляете текст, сгенерированный пользователем, с неизвестным направлением (имя, комментарий, поисковый запрос)? Предпочтительнее
isolate. Оно не позволяет фрагменту изменить направление окружающих слов — ту же защиту даёт HTML-элемент<bdi>. plaintextпредназначен для содержимого вроде сообщений в чате или строк журнала, где каждый абзац должен самостоятельно определять своё направление по первому сильному символу, не наследуя его от страницы.bidi-overrideследует применять редко. Используйте его только тогда, когда намеренно хотите принудить визуальный порядок (например, отразить текст в качестве эффекта), поскольку оно переопределяет естественный порядок чтения каждого символа.
Обратите внимание, что unicode-bidi не анимируется, поэтому переходы и анимации не оказывают на него никакого эффекта.
Связанные свойства
- direction — задаёт базовое направление текста (
ltrилиrtl), на основе которого работаетunicode-bidi. - writing-mode — управляет горизонтальным или вертикальным потоком блока.
- text-align — выравнивает текст внутри его строчного блока, что зачастую требует коррекции для содержимого RTL.