Summary
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 {{cssxref("unicode-bidi")}}: isolate
on a {{HTMLElement("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 contentPhrasing content.
- Tag omission {{no_tag_omission}}
- Permitted parent elements Any element that accepts phrasing content.
- DOM interface {{domxref("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.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML5 W3C')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 16 | {{CompatGeckoDesktop("10.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile("10.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Related HTML element: {{HTMLElement("bdo")}}
- Related HTML properties: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}
{{HTMLRef}}