HTML тег <bdi>
Тег HTML <bdi> изолирует фрагмент текста с неизвестным направлением, чтобы оно определялось независимо и окружающий текст оставался корректным.
Тег HTML <bdi> (название расшифровывается как bi-directional isolation — двунаправленная изоляция) является одним из элементов HTML5. Он отмечает фрагмент текста, который может иметь направление письма, отличающееся от окружающего, и изолирует его так, чтобы алгоритм двунаправленности браузера обрабатывал его как отдельную самодостаточную единицу.
Классический сценарий использования — вывод динамического значения с неизвестным направлением: имени пользователя, названия товара или любой строки, полученной из базы данных, — внутри предложения с направлением слева направо (LTR). Заранее невозможно знать, является ли это значение английским (John), арабским (أحمد) или ивритом (דוד). Без изоляции значение с RTL-направлением может «вытечь» наружу и изменить порядок LTR-символов рядом с ним, ломая остаток строки. Обёртка значения в <bdi> предотвращает это.
<p>User <bdi>أحمد</bdi> scored 90 points.</p>Здесь أحمد сохраняет собственный порядок справа налево, тогда как остальная часть предложения — включая счёт и окружающие слова — остаётся корректно ориентированной слева направо.
Почему двунаправленный текст требует изоляции
Двунаправленный текст смешивает последовательности символов RTL (справа налево) и LTR (слева направо). Для отображения браузеры запускают алгоритм Unicode Bidirectional Algorithm, который присваивает каждому символу направление. Некоторые символы — многие знаки пунктуации, цифры и пробелы — нейтральны: их направление выводится из соседних символов.
Именно этот вывод и создаёт проблему. Когда нейтральный символ (например, пробел и цифра после имени) оказывается рядом с RTL-фрагментом, алгоритм может втянуть его в RTL-поток, и тогда завершающий счёт или знак пунктуации перескакивает на неверную сторону строки. <bdi> решает эту проблему, создавая границу изоляции вокруг встроенного текста: символы внутри него не могут влиять на направление символов снаружи, и наоборот.
Кратко говоря, <bdi> оборачивает фрагмент текста и гарантирует:
- Направление текста внутри
<bdi>не влияет на окружающий текст. - Направление окружающего текста не влияет на текст внутри
<bdi>.
До и после: в чём разница
В примере ниже одна и та же динамически выглядящая строка отображается дважды. В первой строке используется обычный <span>, во второй — она обёрнута в <bdi>. При значении с направлением справа налево версия с <span> позволяет завершающему тексту уйти на неверную сторону, тогда как версия с <bdi> остаётся читаемой.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Without bdi vs. with bdi</h1>
<!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
<p>User <span>إيان</span>: 90 points.</p>
<!-- WITH isolation: the name is self-contained, the rest stays LTR -->
<p>User <bdi>إيان</bdi>: 90 points.</p>
</body>
</html>Запустите пример: в первом абзаце двоеточие и число могут оказаться на неверной стороне арабского имени; во втором <bdi> удерживает : 90 points. корректно справа.
<bdi> против dir="auto"
Возможно, вы задаётесь вопросом: почему бы просто не поставить dir="auto" на <span>? Атрибут dir="auto" действительно просит браузер определить направление элемента по его содержимому — но для обычного строчного элемента это не создаёт границу изоляции, поэтому элемент по-прежнему может влиять на компоновку окружающего текста.
Элемент <bdi> делает сразу и то, и другое: автоматически определяет направление и изолирует. Фактически <bdi> ведёт себя как <span dir="auto"> с дополнительной изоляцией — именно это и нужно для встроенного значения с неизвестным направлением. Использование <bdi> делает намерение очевидным и избавляет от необходимости вручную задавать атрибут.
<bdi> против <bdo>
<bdi> часто путают с элементом <bdo> (bi-directional override — переопределение направления), однако они выполняют противоположные задачи:
<bdo>принудительно задаёт направление. Ему необходимо указать атрибутdir(dir="rtl"илиdir="ltr"), и он переопределяет алгоритм, отображая текст именно в этом направлении.<bdi>определяет и изолирует. Он не переворачивает текст. Он позволяет алгоритму самостоятельно определить направление содержащегося текста, при этом защищая его от влияния — и защищая страницу от — окружающего текста.
Используйте <bdo>, когда направление известно и его нужно принудительно задать; используйте <bdi>, когда направление неизвестно (динамический контент) и требуется безопасная автоматическая обработка.
Синтаксис
Тег <bdi> используется парно. Содержимое записывается между открывающим (<bdi>) и закрывающим (</bdi>) тегами:
<bdi>Some text of unknown directionality</bdi>Стили CSS по умолчанию
Браузеры применяют к элементу следующие стили по умолчанию:
bdi {
display: inline;
unicode-bidi: isolate;
}Значение unicode-bidi: isolate и создаёт границу изоляции, описанную выше. Как правило, не следует изменять unicode-bidi у <bdi>, однако стилизовать его можно как любой строчный элемент:
bdi {
color: blue;
font-weight: bold;
}Атрибуты
Тег <bdi> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML тег <bdi>
bdi {
color: blue;
font-weight: bold;
}