<bdi>

Описание

HTML-элемент <bdi> (bidirectional isolation, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается).

Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.

Примечание: Хотя тот же эффект может быть достигнут применением CSS правила unicode-bidi (en-US): isolate к элементу <span> или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента <bdi>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML-элемента, и некорректно при использовании только CSS стилей.

Content categories (en-US)	Flow content (en-US), phrasing content (en-US), palpable content.
Permitted content	Phrasing content (en-US).
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Permitted parent elements	Any element that accepts phrasing content (en-US).
DOM interface	`HTMLElement`

Attributes

Like all other HTML elements, this element has the global attributes (en-US), with a slight semantic difference: the dir attribute is not inherited. If not set, its default value is the auto which let the browser decide the direction based on the element's content.

Example

html

<p dir="ltr">
  This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed
  right-to-left.
</p>

Result

This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.

Specifications

Specification
HTML Standard # the-bdi-element

Browser compatibility

BCD tables only load in the browser