<bdi>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 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
<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 |
Совместимость с браузерами
Loading…
Смотрите также
- Related HTML element:
<bdo> - Related HTML properties:
direction,unicode-bidi