<bdi>

bdi Tag

The <bdi> tag (Bidirectional Isolation) is used to separate text with different directionality, such as RTL languages (e.g., Arabic, Hebrew) from LTR content. It ensures proper text alignment and prevents display issues, improving accessibility across languages.

Syntax

<bdi>Text to isolate</bdi>

bdi Demo

<h1>The bdi element</h1>
<p>In the example below, usernames are displayed along with their contest points. Without the `<bdi>` element, the Arabic username might disrupt the text layout due to bidirectional rendering issues.</p>
<ul>
 <li>User <bdi>hrefs</bdi>: 60 points</li>
 <li>User <bdi>jdoe</bdi>: 80 points</li>
 <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

Definition and Usage

• BDI stands for Bidirectional Isolation.
• The <bdi> tag isolates a section of text that has a different directionality from the surrounding content.
• This element is particularly useful for embedding user-generated content with an unknown text direction.

Attributes

Similar to other HTML elements, <bdi> supports global attributes. However, the dir attribute defaults to "auto" and is not inherited. The text direction is determined based on the content unless explicitly set to "rtl" or "ltr".

Conclusion

The <bdi> (Bidirectional Isolation) tag is essential for managing text with varying directionality, such as mixing Arabic or Hebrew RTL with left-to-right LTR content. It prevents display issues and ensures bidirectional algorithms correctly interpret text. While CSS can achieve a similar effect, the <bdi> tag provides semantic meaning, ensuring proper rendering across different browsers.