Тег bdo (от английского bidirectional override, «переопределение направления») принудительно задаёт направление письма для своего текста. Атрибутом dir вы сами говорите браузеру: выводи буквы слева направо или справа налево, независимо от языка. Тег парный, закрывающий обязателен.
Разворот у bdo жёсткий: он действует на буквы, а не на язык, поэтому обычная русская фраза внутри тега с dir="rtl" читается задом наперёд. Применять его приходится редко, гораздо чаще нужна мягкая изоляция без принудительного разворота, о ней написано на странице про bdi. Чем bdo отличается от CSS и от символов Unicode, показано ниже.
<p><bdo dir="rtl">Hello</bdo></p>В этой статье
Тег bdo в HTML: что это и для чего нужен
Спецификация описывает bdo как явное управление направлением текста для его содержимого: автор обходит алгоритм двунаправленного текста и сам указывает порядок. Внутри допустим строчный контент. Главное слово здесь «override»: тег не подсказывает браузеру направление, а задаёт его.
В Chrome bdo - строчный элемент (display: inline) со свойством unicode-bidi: isolate-override: содержимое изолировано от окружения и направлено принудительно. По данным справки MDN, тег доступен во всех современных браузерах с 2015 года.
Разница с bdi такая: bdi выбирает направление по содержимому и буквы не переворачивает, а bdo по вашей команде переворачивает всё, что внутри.
Атрибут dir у тега bdo: ltr, rtl и что будет без него
Спецификация требует указать dir у bdo и допускает два значения: ltr (слева направо) и rtl (справа налево). Значение auto, привычное для bdi, здесь не допускается.
Что делает браузер, если правило нарушено, показывает замер. Без dir Chrome применяет направление ltr с принудительным порядком (isolate-override), автоопределения нет. Значение auto Chrome принимает и определяет направление по содержимому: для иврита получается rtl, для латиницы ltr. Но спецификация auto не допускает, поэтому результат зависит от браузера и от текста.
<bdo dir="ltr">שלום</bdo>
<bdo dir="rtl">Hello</bdo>Атрибут dir у обычного span действует иначе: он задаёт только базовое направление и буквы не разворачивает. В замере <span dir="rtl">Kate 5</span> вывел «Kate 5» без изменений. Проверьте значения в кадре.
Пример: значения dir у bdo
Выберите текст и значение dir. Кадр показывает вычисленное направление и порядок букв на экране.
Что разворачивает тег bdo: буквы, слова, числа и знаки
Тег bdo с dir=rtl выводит всё содержимое справа налево: буквы, порядок слов, цифры и знаки препинания. Фраза «привет мир 123» превращается в «321 рим тевирп», а «a, b! c?» - в «?c !b ,a». Вложенные теги разворачиваются вместе с текстом: в замере ab<em>cd</em>ef вывелось как «fedcba».
Обратная сторона: dir=ltr показывает буквы слева направо и там, где язык пишет их справа налево. Ивритская фраза «שלום עולם» с dir=ltr выводится буквами в порядке ввода, слева направо.
Введите свою фразу в кадре и сравните четыре записи: обычный текст, span с dir=rtl, bdo с rtl и bdo с ltr.
Пример: что разворачивает bdo
Введите фразу или выберите готовую. Кадр показывает порядок символов на экране для четырёх записей.
Тег bdo, CSS и символы Unicode: как получить тот же результат
Тот же разворот даёт CSS: свойство unicode-bidi: bidi-override вместе с direction: rtl у обычного span. В замере «Kate» вывелось как «etaK», как и у bdo. Разница в смысле: тег говорит, что здесь принудительное направление, а CSS описывает только вид.
.rev {
unicode-bidi: bidi-override;
direction: rtl;
}Третий способ - управляющий символ Unicode U+202E (переопределение справа налево). Он тоже разворачивает текст, но остаётся в строке невидимым знаком: такой знак попадает в копию, в поиск и в сравнение строк. Поэтому лучше тег или CSS.
Во всех трёх случаях меняется только показ: текст в разметке остаётся прежним, и в копию попадает он, а не то, что видно на экране. Так иногда прячут адрес от простых роботов: в разметке записывают «moc.elpmaxe@ecno», а на экране получается «once@example.com». Но читатель, скопировавший такой адрес, получит перевёрнутую строку. Проверьте в кадре.
Пример: разворот адреса тремя способами
Выберите способ. Кадр показывает, что видно на экране и что попадёт в копию.
Частые ошибки с тегом bdo
Ошибки с этим тегом связаны с атрибутом dir и с тем, что разворот принимают за изоляцию.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Запись без dir: <bdo>Hello</bdo> | Спецификация требует dir, Chrome применяет ltr, и разворота нет | Указать dir="rtl" или dir="ltr" |
dir="auto" у bdo | Спецификация значение не допускает, а Chrome определяет направление по тексту: результат зависит от содержимого | Для автоопределения использовать bdi |
bdo для имён пользователей | Имена на латинице разворачиваются: «Kate» становится «etaK» | Использовать bdi |
dir="rtl" у span ради разворота | Атрибут задаёт только базовое направление, буквы не разворачиваются | Для разворота взять bdo или CSS bidi-override |
| Перевёрнутый адрес в разметке | На экране верный адрес, а в копию попадает перевёрнутая строка | Записать адрес как есть |
| Символ U+202E в тексте вместо тега | Невидимый знак попадает в копию и в поиск | Использовать тег bdo или CSS |
