HTML <bdi> Element
The <bdi> element, or Bidirectional Isolate element, isolates a section of text from the text surrounding it so that differences in text direction do not interfere with how either section is displayed.
Syntax
<bdi>Text with an unknown direction</bdi>The opening and closing tags are both required.
Attributes
The <bdi> element supports the global HTML attributes. It does not have any element-specific attributes.
The global dir attribute has special behavior with <bdi>. When dir is not specified, its direction defaults to auto instead of inheriting the direction from its parent element.
Example
The following example isolates user names that may contain either left-to-right or right-to-left text:
<ul>
<li>User <bdi>Diane</bdi>: 12 posts</li>
<li>User <bdi>سارة</bdi>: 8 posts</li>
</ul>The <bdi> elements prevent the direction of each user name from affecting the punctuation and text surrounding it.
Try It Yourself
Compare the user names in the editor to see how <bdi> isolates left-to-right and right-to-left text from the surrounding content.
Usage Notes
Bidirectional text occurs when left-to-right and right-to-left writing systems appear together. Languages such as English normally flow from left to right, while languages such as Arabic and Hebrew normally flow from right to left.
Use <bdi> when the direction of inserted text is unknown in advance, such as user names, comments, or other content supplied dynamically. Isolating that text prevents its direction from unexpectedly changing the order of nearby punctuation, numbers, or text.
The direction of text inside <bdi> does not influence the surrounding text, and the surrounding text does not determine the direction of the isolated content.
If the direction of the text is known and needs to be explicitly overridden, the <bdo> element may be more appropriate.
Accessibility
Correctly identifying and isolating bidirectional text helps preserve the intended reading order when content contains different writing directions. This is especially important for dynamically generated or user-supplied text.
Use <bdi> for its bidirectional text semantics rather than as a visual styling element. The element does not change the meaning or importance of its content.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <bdi> Element .
Related Elements
<bdo> - Overrides the current direction of text.
<span> - Provides a generic inline container that can also use the global dir attribute when text direction is known.