<bdo>
- 25 января 2023
Тег <bdo>
означает «двунаправленное переопределение» и используется для изменения направления текста HTML-документа. Этот тег полезен при работе с языками, которые пишутся справа налево: арабским, ивритом или урду.
Синтаксис тега <bdo>
<bdo dir="rtl|ltr">Text</bdo>
Спецификация HTML
Тег <bdo>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <bdo>
не считается семантическим тегом, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Простое использование:
<bdo dir="rtl">مرحبا بالعالم</bdo>
Результат:
مرحبا بالعالم
Изменение направленности абзаца:
<p>Привет! Это текст, который нужно перевести.</p>
<bdo dir="rtl">
<p>اسمي ، وأعيش في كاليفورنيا.</p>
</bdo>
Результат:
Привет! Это текст, который нужно перевести.
اسمي ، وأعيش في كاليفورنيا.
Для чего использовать тег <bdo>
- Отобразить текст на языке, где слова пишутся справа налево, например на арабском или иврите.
- Визуально перевернуть текст по горизонтали, например, подпись отзеркаленного изображения.
- Изменить направление части абзаца или предложения.
- Создать стилизованные текстовые эффекты.
Атрибуты тега <bdo>
dir
— направленность текста.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <bdo>
не всегда работает как задумано, если его использовать с CSS-стилями или скриптами.
Нюансы
Когда атрибут dir
имеет значение rtl
, текст внутри тега <bdo>
будет отображаться в направлении справа налево, независимо от общей направленности HTML-документа.
Аналогично, если атрибут dir
имеет значение ltr
, текст будет отображаться в направлении слева направо.
Поддержка браузерами
Тег <bdo>
поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <bdo>
не существует.
Чем заменить тег
Функциональность тега <bdo>
можно заменить стилями CSS, используя свойство direction
.
Например:
<span style="direction: rtl;">مرحبا بالعالم</span>
В результате будет получен тот же результат, что и в первом кейсе из раздела «Примеры использования».
Актуальность
Тег <bdo>
актуален, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


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