Тег <bdi>
- Категории: Потоковое содержимое, Фразовое содержимое
-
Контекст:
Где ожидается фразовое содержимое.
-
Модель:
Фразовое содержимое.
Тег <bdi>
(сокращение от "bidirectional isolate" - изоляция двунаправленности) позволяет изолировать фрагмент текста от двунаправленного алгоритма браузера и обрабатывать его независимо от окружающего контекста.
Дело в том, что современные браузеры по умолчанию работают в кодировке Unicode, которая поддерживает письменность всех живых языков. Некоторые из них имеют разное направление письма. Например, русский текст пишется слева направо, а арабский - справа налево.
Чтобы корректно обрабатывать различные ситуации письма, браузер имеет специальный алгоритм двунаправленности. Он позволяет определить правильное направление вывода текста на основе используемых в нем символов. Все это работает автоматически, до той поры, пока браузер не встречает двунаправленный текст, который имеет символы разных направлений. Например, арабское слово в русском тексте.
В таком случае мы можем изолировать определенные участки от алгоритма двунаправленности, чтобы он не повлияет на отображение окружающего текста. Особенно это полезно в тех случаях, когда мы заранее не знаем, какое направление будет иметь выводимый фрагмент. Например, если он попадает на сайт из базы данных.
Атрибуты
- Глобальные атрибуты
-
Фрагменты с неизвестной направленностью
Как мы уже сказали, элемент
<bdi>
может быть полезен при встраивании пользовательского контента с неизвестной направленностью. Например, если у нас есть список пользователей на разных языках, в том числе и на арабском, который имеет направление письма справа налево.Если в этом случае не использовать
<bdi>
, то двунаправленный алгоритм обработает арабское имя особым образом - поместит двоеточие и цифру "3" рядом со словом "Пользователь". В итоге мы получим строкуПользователь إيان: 3 поста
. Используя<bdi>
, мы изолируем смену направления в рамках одного элемента, что не дает ему воздействовать на окружающий текст: