Атрибут dir тега <bdo>

Описание

Атрибут dir для тега <bdo> обязателен и определяет направление вывода текста. В отличие от <bdi>, который изолирует направление текста, <bdo> явно переопределяет текущее направление текста.

Синтаксис:

<bdo dir="rtl">Текст справа налево</bdo> <bdo dir="ltr">Текст слева направо</bdo>

Особенности работы:

Значение Поведение Пример
ltr Слева направо (left-to-right) <bdo dir="ltr">123</bdo>
rtl Справа налево (right-to-left) <bdo dir="rtl">123</bdo> → отобразится "321"

Сравнение с похожими тегами:

<!-- bdo: явное переопределение направления --> <bdo dir="rtl">ABC</bdo> → "CBA" <!-- bdi: изоляция направления (автоопределение) --> <bdi>إيان</bdi> → сохраняет оригинальное направление <!-- dir атрибут: задает направление контекста --> <div dir="rtl">Text</div>

Важно: Тег <bdo> меняет только визуальный порядок символов, не влияя на логическую последовательность в DOM.

Практическое применение:

<!-- 1. Коррекция порядка символов --> <p>Номер документа: <bdo dir="rtl">12345</bdo></p> <!-- 2. Специальные форматы --> <div> <bdo dir="rtl">← указатель</bdo> </div> <!-- 3. Комбинация с RTL-языками --> <p> Арабский: <bdi lang="ar">كتاب</bdi>, обратный: <bdo dir="rtl">كتاب</bdo> </p>

Рекомендации:

  • Всегда указывайте явное значение dir
  • Избегайте вложенных <bdo> с разными направлениями
  • Для RTL-языков предпочитайте <bdi> с dir="auto"
  • Проверяйте отображение в старых браузерах

Ограничения:

<!-- Не работает с псевдоэлементами --> <style> .reverse::before { content: "123"; } </style> <bdo dir="rtl" class="reverse"></bdo> <!-- Не изменит порядок -->