The HTML BiDirectional Isolation element (<bdi>)  is used to indicate spans of text which might need to be rendered in the opposite direction than the surrounding text. This lets you, for example, present a quote in Arabic (which is written right-to-left) within a paragraph written in English (written left-to-right). The user agent should correctly detect that the text within the <bdi> element should be rendered right-to-left and adjust accordingly.

This element is useful when embedding text whose directionality may not be known—such as text obtained from a database—within text with a fixed, potentially different, directionality.

Note: You can, optionally, use the dir attribute to override the user agent's decision-making on the rendering direction for the <bdi> element's content.

To learn more about bidirectional text in HTML, read our article The Unicode Bidirectional Text Algorithm.

Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Permitted ARIA roles Any
DOM interface HTMLElement

Attributes

Like all other HTML elements, this element supports the global attributes, except that the dir attribute behaves differently than normal: it defaults to auto, meaning its value is never inherited from the parent element. This means that unless you specify a value of either "rtl" or "ltr" for dir, the user agent will determine the correct directionality to use based on the contents of the <bdi>.

Usage notes

Though the same visual effect can be achieved using the CSS rule unicode-bidi: isolate on a <span> or another text-formatting element, it is almost always better to use the <bdi> element instead. That's because the <bdi> element provides important semantic meaning, while the CSS property unicode-bidi is only presentational.

This is especially important because browsers are allowed to ignore CSS styling. If this were done, the text within a <bdi> element would still be correctly displayed, while text rendered only with unicode-bidi: isolate would render backward due to the loss of styling.

This is a case where the semantic value of HTML is important.

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
HTML Living Standard
The definition of '<bdi>' in that specification.
Living Standard  
HTML5
The definition of '<bdi>' in that specification.
Recommendation  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support16 No10 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No10 No No No

See also