<bdi>
- 25 января 2023
Тег <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>
- Отображение фрагментов текста на языках, отличных от языка основного документа.
- Корректное отображение текста на разных языках в разметке форм и других элементов.
- Использование в списках, чтобы разделять элементы на разных языках.
- Использование в сочетании с другими тегами для отображения текста на языках, отличных от основного языка документа.
- Улучшение доступности для пользователей, чьи языковые настройки отличаются от языков основного документа.
Атрибуты тега <bdi>
dir
— определяет направление текста в элементе: справа налево или слева направо.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения тега <bdi>
Тег <bdi>
не имеет каких-либо особых ограничений.
Нюансы
Если элемент содержит текст на разных языках, каждый фрагмент текста должен быть обернут в отдельный тег <bdi>
с соответствующим значением атрибута dir
.
Поддержка браузерами
Тег <bdi>
поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега <bdi>
не существует.
Чем заменить тег
Тег <bdi>
можно заменить использованием атрибута dir
внутри других тегов, таких как <p>
, <span>
, <div>
.
Актуальность
Тег <bdi>
актуален и может быть использован в веб-разработке.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023