Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег bdi HTML

Тег bdi HTML

HTML - тег <bdi> (от англ. bidirectional isolation - двунаправленная изоляция) — один из элементов HTML5. Он используется для изоляции двунаправленного текста, когда язык с направлением письма справа налево (например, арабский, урду или иврит) используется вместе с языками с письмом слева направо.

Тег <bdi> - синтаксис и код

Тег <bdi> представлен парами. Содержимое записывается между открывающим (<bdi>) и закрывающим (</bdi>) тегами.

Пример изолированной разметки имен пользователей от окружающих настроек направления текста:

<ul>
  <li>Пользователь <bdi>user1</bdi>: 1 поинт</li>
  <li>Пользователь <bdi>user2</bdi>: 2 поинта</li>
  <li>Пользователь <bdi>صارف</bdi>: 3 поинта</li>
</ul>

Элемент bdi

В приведенном ниже примере имена пользователей показаны вместе с количеством очков в конкурсе. Если элемент bdi не отображается в браузере, имя пользователя на языке Урду приводит к путанице в тексте (алгоритм двунаправленной передачи ставит двоеточие и цифру "3" рядом со словом "Пользователь", а не рядом со словом "поинт").

Этот пример содержит bdi элемент:

Пользователь user-a: 1 поинт
Пользователь user-b: 2 поинта
Пользователь صارف: 3 поинта

Этот пример не содержит bdi элемент:

Пользователь user-a: 1 поинт
Пользователь user-b: 2 поинта
Пользователь: صارف 3 поинта

★ Примечание: обратите внимание, что тег <bdi> физически не поворачивает текст, он лишь сообщает браузеру, что текст следует читать в противоположном направлении.

Определение и использование

BDI (Bi-Directional Isolation) означает двунаправленную изоляцию.

HTML - тег <bdi> изолирует часть текста, которая может быть отформатирована в другом направлении, от остального текста за его пределами;
Этот элемент полезен при встраивании пользовательского контента с неизвестным направлением текста.

Двунаправленный текст может содержать последовательности символов, расположенные справа налево (RTL), и последовательности символов, расположенные слева направо (LTR). Чтобы справиться с этим, браузеры используют алгоритм двунаправленного письма Unicode, в котором символам присваивается определенная направленность. Некоторые символы (например, некоторые знаки препинания и пробелы) считаются нейтральными, и их направленность зависит от направленния ближайших к ним символов.

Направленние текста, встроенного в тег <bdi>, не влияет на направленние окружающего текста;
Направленние окружающего текста не влияет на направленние текста, встроенного в тег <bdi>.

Тег <bdi> похож на старый тег <bdo>. Элемент bdi изолирует содержащийся текст от текста вокруг него, тогда как bdo просто меняет направление на противоположное.

✪ Рекомендация: обычно рекомендуется использовать <bdi>, чтобы предотвратить непредвиденные проблемы с рендерингом, которые могут возникнуть с <bdo>.