The <bdi> Element
As defined in the HTML Living Standard, the <bdi> (Bi-Directional Isolation) element tells the browser's bidirectional algorithm to treat the element's contents in isolation from its surrounding text.
User إيان: 5 posts.
User Ian: 10 posts.
<ul>
<li>User <bdi>إيان</bdi>: 5 posts.</li>
<li>User <bdi>Ian</bdi>: 10 posts.</li>
</ul>
View HTML Living Standard: The bdi element
When to use BDI
This element is specifically designed for cases where you are displaying text with an unknown directionality—most commonly user-generated content like names or forum posts.
- Dynamic Content: When the script or language of the content is not known in advance.
- Mixed Scripts: When Right-to-Left (RTL) text and Left-to-Right (LTR) text appear in the same line and might cause punctuation to render incorrectly.
WCAG Requirement: Semantic Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <bdi>, you ensure that the semantic relationship between the subject (e.g., a username) and the rest of the sentence remains intact, even if the scripts differ. This prevents screen readers and browsers from misinterpreting the reading order of the entire line.
BDI vs. BDO
It is easy to confuse <bdi> with <bdo> (Bi-Directional Override):
<bdi>: Isolates content so the browser can guess the direction automatically without affecting the outside text.<bdo>: Forces a specific direction (using thedirattribute) regardless of the characters inside.
A11y Tip: Logical Order
Correct use of <bdi> supports the internationalization (i18n) aspect of accessibility. Ensuring text renders in the correct logical order is a fundamental part of providing a readable experience for global users.