Тег <bdi>: изоляция направления пользовательского текста
Элемент bdi изолирует направление вложенного текста от соседних частей строки. Это полезно для имён, где заранее неизвестно сочетание письменностей справа налево и слева направо.
Назначение
Элемент bdi изолирует направление вложенного текста от соседних частей строки. Это полезно для имён, где заранее неизвестно сочетание письменностей справа налево и слева направо.
Как это работает
По умолчанию направление внутри bdi определяется автоматически. Знаки вокруг имени остаются частью внешнего контекста. Изоляция влияет на расположение, но не меняет сами символы и не переводит текст.
Пример
<ul lang="ru">
<li>Участник <bdi>Алексей</bdi>: 12 сообщений</li>
<li>Участник <bdi>علي</bdi>: 12 сообщений</li>
</ul>Что должно получиться
Обе строки сохраняют внешний русский порядок: подпись, имя и число сообщений. Арабское имя получает собственный контекст направления. Конкретное начертание зависит от установленных шрифтов.
Граница применения и частая ошибка
Bdi не экранирует HTML и не защищает от внедрения разметки. Если имя пришло от пользователя, вставляйте его через textContent или корректное серверное экранирование. Не заменяйте изоляцию ручным добавлением невидимых символов без причины.
Самостоятельная проверка
Сравните строки с bdi и без него, добавив в имя цифры и дефис. Выделите и скопируйте результат в текстовый редактор: визуальный порядок не должен считаться надёжным способом проверки хранимых символов.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.