HTML - <bdi>
The HTML <bdi>
Element (or Bi-Directional Isolation Element) isolates a span of text that might be formatted in a different direction from other text outside it.
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.
Description
The HTML <bdi>
Element (or Bi-Directional Isolation Element) isolates a span of text that might be formatted in a different direction from other text outside it.
This element is useful when embedding text with an unknown directionality, from a database for example, inside text with a fixed directionality.
Though the same visual effect can be achieved using the CSS rule unicode-bidi
: isolate
on a <span>
or another text-formatting element, the semantic meaning is only conveyed by the <bdi>
element. Especially, browsers are allowed to ignore CSS styling. In such a case, the text would still be correctly displayed using the HTML element, but will become garbage when using the CSS styling to convey semantic.
Content categories | Flow content, phrasing content, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parent elements | Any element that accepts phrasing content. |
DOM interface | HTMLElement |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 16 | 10.0 (10.0) | Not supported | Not supported | Not supported |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | 10.0 (10.0) | Not supported | Not supported | Not supported |
See Also
- Related HTML element:
<bdo>
- Related HTML properties:
direction
,unicode-bidi
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<bdi>' in that specification. |
Living Standard | |
HTML5 The definition of '<bdi>' in that specification. |
Recommendation |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/bdi