<bdi>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Описание

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

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

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

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

Attributes

Like all other HTML elements, this element has the global attributes, 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.

Спецификации

Specification
HTML Standard
# the-bdi-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также