Тег <bdi>

Изоляция двунаправленности
  • Категории: Потоковое содержимое, Фразовое содержимое
  • Контекст:

    Где ожидается фразовое содержимое.

  • Модель:

    Фразовое содержимое.

Тег <bdi> (сокращение от "bidirectional isolate" - изоляция двунаправленности) позволяет изолировать фрагмент текста от двунаправленного алгоритма браузера и обрабатывать его независимо от окружающего контекста.

Дело в том, что современные браузеры по умолчанию работают в кодировке Unicode, которая поддерживает письменность всех живых языков. Некоторые из них имеют разное направление письма. Например, русский текст пишется слева направо, а арабский - справа налево.

Чтобы корректно обрабатывать различные ситуации письма, браузер имеет специальный алгоритм двунаправленности. Он позволяет определить правильное направление вывода текста на основе используемых в нем символов. Все это работает автоматически, до той поры, пока браузер не встречает двунаправленный текст, который имеет символы разных направлений. Например, арабское слово в русском тексте.

В таком случае мы можем изолировать определенные участки от алгоритма двунаправленности, чтобы он не повлияет на отображение окружающего текста. Особенно это полезно в тех случаях, когда мы заранее не знаем, какое направление будет иметь выводимый фрагмент. Например, если он попадает на сайт из базы данных.

Атрибуты

  • Глобальные атрибуты
  • Фрагменты с неизвестной направленностью

    Как мы уже сказали, элемент <bdi> может быть полезен при встраивании пользовательского контента с неизвестной направленностью. Например, если у нас есть список пользователей на разных языках, в том числе и на арабском, который имеет направление письма справа налево.

    Если в этом случае не использовать <bdi>, то двунаправленный алгоритм обработает арабское имя особым образом - поместит двоеточие и цифру "3" рядом со словом "Пользователь". В итоге мы получим строку Пользователь إيان: 3 поста. Используя <bdi>, мы изолируем смену направления в рамках одного элемента, что не дает ему воздействовать на окружающий текст:

Поделитесь данной записью с друзьями