HTML тег <bdo>
Тег HTML <bdo> принудительно задаёт направление текста (ltr или rtl), игнорируя двунаправленный алгоритм браузера. Примеры RTL и LTR.
Тег HTML <bdo> («bidirectional override» — переопределение двунаправленности) принудительно задаёт конкретное направление текста, игнорируя встроенный двунаправленный (bidi) алгоритм браузера. Он особенно полезен, когда нужно отображать символы в строго заданном порядке — слева направо или справа налево — независимо от естественного направления письма, которому эти символы принадлежат.
На этой странице рассматривается, что делает переопределение, обязательный атрибут dir, практические примеры RTL и LTR, CSS-эквивалент, поддержка браузерами и замечания о доступности.
Зачем нужно переопределение двунаправленности
По умолчанию браузеры автоматически обрабатывают текст со смешанным направлением, используя алгоритм двунаправленности Unicode. Этот алгоритм анализирует присущее каждому символу направление — латинские буквы идут слева направо (LTR), а арабские и ивритские — справа налево (RTL) — и располагает их соответственно. В большинстве случаев именно это и нужно.
<bdo> — это запасной выход для редких случаев, когда необходимо принудительно задать визуальный порядок символов вместо того, чтобы доверить это алгоритму. Он переопределяет присущую каждому символу внутри него направленность. Это намеренный низкоуровневый инструмент: используйте его только тогда, когда вам действительно нужен конкретный порядок символов, а не как универсальный способ отображения текста на иностранном языке.
Если ваша цель — просто изолировать фрагмент текста с неизвестным направлением (например, имя, введённое пользователем), чтобы он не нарушал окружающий макет, используйте вместо этого <bdi> — он изолирует без переопределения.
Обязательный атрибут dir
Атрибут dir является обязательным для <bdo>. Он указывает браузеру, в каком направлении принудительно отображать текст, и принимает два значения:
rtl— отображать содержимое справа налево. Используется для RTL-письма, например арабского и иврита, или для принудительного RTL-порядка любого содержимого.ltr— отображать содержимое слева направо. Особенно полезно для принудительного LTR-порядка фрагмента (например, фрагмента кода, URL или числа), находящегося внутри RTL-контекста, такого как арабский абзац.
В отличие от глобального атрибута dir, который лишь устанавливает базовое направление и всё ещё позволяет алгоритму bidi переупорядочивать фрагменты с противоположным направлением, атрибут dir у элемента <bdo> полностью переопределяет этот алгоритм.
Синтаксис
Тег <bdo> используется парно. Содержимое записывается между открывающим (<bdo>) и закрывающим (</bdo>) тегами, при этом атрибут dir должен присутствовать всегда:
<bdo dir="rtl">…content…</bdo>Пример RTL (арабский язык)
Здесь базовый LTR-абзац содержит арабскую фразу. Поскольку dir="rtl" соответствует естественному направлению арабского письма, текст правильно читается справа налево.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Результат
Переопределение LTR внутри RTL-контекста
Когда базовое направление RTL (здесь арабский абзац), алгоритм bidi обычно меняет порядок LTR-фрагмента, такого как путь к файлу или код продукта, на обратный. Оборачивание этого фрагмента в <bdo dir="ltr"> принудительно сохраняет его в предназначенном порядке слева направо:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Результат
CSS-эквивалент
Эффект <bdo> можно воспроизвести в CSS, объединив свойство direction с unicode-bidi: bidi-override. Фактически HTML-элемент определяется именно через этот CSS:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}Ключевая часть — unicode-bidi: bidi-override. Одно лишь задание direction меняет только базовое направление (то же самое, что делает атрибут dir); именно bidi-override отключает автоматическое переупорядочивание. Если вы хотите получить поведение переопределения для элемента, отличного от <bdo>, примените оба объявления самостоятельно. И наоборот, предпочитайте семантический элемент <bdo>, когда разметка представляет намеренное переопределение направления — это сохраняет намерение в HTML, а не скрывает его в таблице стилей.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| dir | ltr | rtl | Обязательный. Определяет направление текста: слева направо (ltr) или справа налево (rtl). |
Тег <bdo> также поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузерами
<bdo> является частью стандарта HTML и давно поддерживается во всех основных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. Для современных браузеров никаких запасных вариантов не требуется.
Доступность
<bdo> меняет только визуальный порядок символов; он не меняет произношение и логический порядок чтения, доступный вспомогательным технологиям. Программы чтения с экрана объявляют текст в его базовом логическом (документном) порядке, а не в переопределённом визуальном порядке.
По этой причине используйте <bdo> только в тех случаях, когда визуальный порядок символов действительно важен (например, для сохранения LTR-порядка фрагмента кода или идентификатора). Для обычного многоязычного содержимого устанавливайте корректное базовое направление с помощью глобального атрибута dir на окружающем элементе и доверяйте алгоритму bidi, или используйте <bdi> для изоляции ненадёжного текста — оба подхода обеспечивают более точный опыт для пользователей программ чтения с экрана, чем полное переопределение направления.