<bdi>

Тег <bdi> используется для изоляции участка текста, который может быть отформатирован в другом направлении, чем окружающий текст, например, на другом языке или в другом направлении написания. Этот тег помогает обеспечить правильное отображение текста даже при изменении его направленности.

Синтаксис тега <bdi>

<p>Пользователь ввел имя <bdi>名前</bdi></p>

Спецификация HTML

Тег <bdi> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <bdi> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Использование для ввода пользовательских данных:

<p>Введите ваше имя на русском языке: <input type="text" name="name"><br>
Введите ваше имя на японском языке: <input type="text" name="name_jp"><bdi>（名前）</bdi></p>

Использование для отображения сложных языковых конструкций:

<p><bdi>2×2=۴</bdi> и <bdi>2+2=៤</bdi></p>

Использование для выделения направления письма:

<p>Джун сказала на корейском языке: <bdi dir="rtl">안녕하세요!</bdi></p>

Использование для изоляции текста при локализации веб-страницы:

<p><bdi lang="ja">こんにちは、世界！</bdi> <bdi lang="zh-Hans">你好，世界！</bdi> <bdi lang="ar">مرحبا بالعالم!</bdi></p>

Для чего использовать тег <bdi>

1. Отображение фрагментов текста на языках, отличных от языка основного документа.
2. Корректное отображение текста на разных языках в разметке форм и других элементов.
3. Использование в списках, чтобы разделять элементы на разных языках.
4. Использование в сочетании с другими тегами для отображения текста на языках, отличных от основного языка документа.
5. Улучшение доступности для пользователей, чьи языковые настройки отличаются от языков основного документа.

Атрибуты тега <bdi>

dir — определяет направление текста в элементе: справа налево или слева направо.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега <bdi>

Тег <bdi> не имеет каких-либо особых ограничений.

Нюансы

Если элемент содержит текст на разных языках, каждый фрагмент текста должен быть обернут в отдельный тег <bdi> с соответствующим значением атрибута dir.

Поддержка браузерами

Тег <bdi> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега <bdi> не существует.

Чем заменить тег

Тег <bdi> можно заменить использованием атрибута dir внутри других тегов, таких как <p>, <span>, <div>.

Актуальность

Тег <bdi> актуален и может быть использован в веб-разработке.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.