Тег <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)
accesskey Горячая клавиша
class CSS-класс
contenteditable Редактируемость
data-* Пользовательские данные
hidden Скрытие элемента
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Переводимость текста

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