Тег <bdi>

Описание

Тег <bdi> (Bi-Directional Isolation) изолирует текст, который может быть направленным (например, арабский, иврит) от окружающего текста, чтобы обеспечить правильное отображение при смешанных направлениях письма.

Изоляция текста с RTL-направлением:
<p> Пользователь <bdi>إيان</bdi> оставил комментарий. </p>
Использование в пользовательском вводе:
<div class="user-comment"> <span class="username"><bdi>نور</bdi></span>: Этот текст может быть на любом языке </div>
Сравнение с :
<p> <bdi>مرحبا</bdi> - автоматическое направление (изоляция) <bdo dir="rtl">مرحبا</bdo> - принудительное RTL-направление </p>

Основные особенности:

  • Автоматически определяет направление текста
  • Особенно полезен для пользовательского контента (имена, комментарии)
  • Поддерживается всеми современными браузерами
  • Не изменяет семантическое значение текста

Тег <bdi> решает проблемы смешения текстов с разным направлением письма, сохраняя правильное отображение интерфейса.

Атрибуты

dir Направление текста (auto/ltr/rtl)
class CSS-класс
data-* Пользовательские данные
hidden Скрытие элемента
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
title Всплывающая подсказка
translate Переводимость текста

Поддержка браузерами
79.0 16.0 15.0 10.0 0.0