Тег HTML `<bdi>`

Тег <bdi> (изоляция двунаправленного текста) является одним из элементов HTML5. Он используется для изоляции двунаправленного текста, когда в строке с языками, имеющими направление справа налево (например, арабский или иврит), используются языки с направлением слева направо. Обратите внимание, что тег <bdi> не меняет физическое направление текста; он просто изолирует его, чтобы двунаправленный алгоритм браузера мог определить его направление независимо.

Двунаправленный текст может содержать последовательности символов, расположенных справа налево (RTL), и последовательности символов, расположенных слева направо (LTR). Для обработки этого браузеры используют алгоритм Unicode Bidirectional Algorithm, в котором каждому символу присваивается определенное направление. Некоторые символы (например, некоторые знаки препинания и пробелы) считаются нейтральными, и их направление зависит от направления соседних символов.

Как правило, двунаправленный алгоритм работает корректно, и нет необходимости использовать специальную разметку. Однако иногда алгоритму может потребоваться помощь. В таких случаях используется <bdi>.

Тег <bdi> оборачивает фрагмент текста и работает следующим образом:

Направление текста, заключенного в тег <bdi>, не влияет на направление окружающего текста.
Направление окружающего текста не влияет на направление текста, заключенного в тег <bdi>.

Тег <bdi> похож на более старый тег <bdo>. Элемент <bdi> изолирует содержащийся текст от окружающего, тогда как <bdo> просто меняет направление на противоположное. Как правило, рекомендуется использовать <bdi>, чтобы предотвратить непредвиденные проблемы с отображением, которые могут возникнуть при использовании <bdo> .

Синтаксис

Тег <bdi> является парным. Содержимое записывается между открывающим (<bdi>) и закрывающим (</bdi>) тегами.

Пример использования тега HTML `<bdi>`:

Тег HTML <bdi>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>

Try it Yourself »

Результат

bdi exemple

Атрибуты

Тег <bdi> поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать тег HTML <bdi>

css

bdi {
  color: blue;
  font-weight: bold;
}

Практика

Какова цель тега HTML <bdi>?

Тег HTML <bdi> используется для отделения части текста, которая может иметь другое направление форматирования по сравнению с окружающим текстом.Тег HTML <bdi> используется для создания жирного текста в HTML.Тег HTML <bdi> используется для обозначения переноса строки в тексте HTML.Тег HTML <bdi> используется для отображения текста, специфичного для культуры, на основе алгоритма Unicode Bidirectional Algorithm.

Тег HTML <bdi> ​

Синтаксис ​

Пример использования тега HTML <bdi>: ​

Результат ​