<bdo>

Тег <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.

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