Элементы bdi и bdo

Обычно двунаправленный алгоритм Unicode хорошо обрабатывает текст со смешанным направлением, но иногда его нужно переопределить — например, чтобы изолировать введённое пользователем имя и не дать ему изменить направление окружающего текста или принудительно задать направление в блоке кода.

<bdi> (изоляция двунаправленного текста) обрабатывает своё содержимое как отдельный контекст двунаправленного текста. Направление текста внутри <bdi> не может влиять на направление текста снаружи, и наоборот.

Список пользователей с английскими и арабскими именами может привести к тому, что арабское имя изменит направление окружающего текста. Если заключить каждое имя в <bdi>, оно будет изолировано: макет останется согласованным независимо от направления конкретного имени.

<bdo dir="rtl"> (переопределение двунаправленного текста) принудительно задаёт направление своего содержимого, переопределяя естественное определение направления. Используйте его, когда нужно отобразить текст в неестественном направлении — например, чтобы вывести фрагменты кода в LTR внутри страницы RTL.

Атрибут dir у обычного элемента задаёт базовое направление, но внутри по-прежнему применяется алгоритм двунаправленного текста. <bdo> отключает этот алгоритм для своего содержимого: каждый символ строго следует указанному направлению независимо от письменности.

Используйте его всегда, когда вставляете созданный пользователем текст в окружающую оболочку интерфейса: имена в заголовках чата, имена пользователей в комментариях, названия в элементах ленты. Изоляция гарантирует, что введённый пользователем текст не повлияет на компоновку оболочки.

Редко. Основное оправданное применение — обучение работе с двунаправленным текстом (показ того, как строка выглядит в обратном порядке) или исправление данных с некорректно заданными тегами, когда естественное определение направления даёт неправильный визуальный порядок.

Для пользовательского содержимого с неизвестным направлением объедините <bdi dir="auto"> для двойной защиты: автоматическое определение выбирает базовое направление по содержимому, а bdi не даёт этому направлению влиять на окружающий текст.

bdi и bdo поддерживаются всеми современными браузерами. Они входят в HTML5 и уже много лет работают стабильно. В старых версиях IE нет поддержки bdi, но они фактически устарели; современные сайты могут свободно использовать bdi.

Программы чтения с экрана учитывают изоляцию направления текста: содержимое внутри <bdi> озвучивается собственным языковым голосом (если задан lang), и окружающий контекст не влияет на него. bdi также помогает преобразованию текста в речь создавать подходящие паузы вокруг изолированных фраз.

В шаблонах с заполнителями ("Добро пожаловать, {name}") следует заключать заполнитель в <bdi>: Welcome, <bdi>{name}</bdi>. Любое имя пользователя — английское, арабское или смешанное — отображается правильно и не нарушает остальную часть приветствия.

В чём практическая разница между и ?

bdi изолирует направление текста раздела, не позволяя ему влиять на окружающий текст; используйте его для встроенного пользовательского содержимого, например имён в шаблонах. bdo принудительно задаёт определённое направление, переопределяя bidi; за пределами учебных примеров он требуется редко. Для безопасной обработки пользовательского текста на неизвестных языках объединяйте bdi с dir="auto".