<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
See also
- Related HTML element:
<bdo>
- Related HTML properties:
direction
,unicode-bidi
(en-US)