Language References

---

Represents a span of text isolated for purposes of bidirectional text formatting.

HTML 5

HTML Syntax

<app
   class = classname
   id = value
   style = css properties
   title = text
   event = script
>

The BDI element is used to isolate a part of text that might be formatted in a different direction than the surrounding text.

BDI stands for Bi-Directional Isolation, referring to its ability to manage text direction in mixed-language or RTL/LTR (Right-to-Left/Left-to-Right) content.

The <bdi>...</bdi> tags tell the browser’s bidirectional algorithm to treat the text it contains in isolation from its surrounding text, allowing it to be displayed independently.

This element is particularly useful in multilingual applications where text in different languages may be displayed together, and you want to ensure that the text direction is preserved without being affected by surrounding text.

NOTE: Both start and end tags are required.

The element has no attribute of its own, but supports global attributes common to all HTML elements.

In this example, usernames are shown along with the number of posts that the user has submitted.

When using the <bdi> elements, the text acts as expected (1st example). If the <bdi> tags were ommited, the name of the Arabic user would end up confusing the text.

User jcranmer: 12 posts. User hober: 5 posts. User الرجل القوي إيان: 3 posts.

User jcranmer: 12 posts. User hober: 5 posts. User الرجل القوي إيان: 3 posts.

BDO