<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
# the-bdi-element

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bdi

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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