HTML <bdi> Tag

The <bdi> (Bidirectional Isolate) tag is an HTML element that isolates a span of text that might be formatted in a different direction from other text around it. This tag is essential when displaying text with mixed directionality, such as when including right-to-left (RTL) text within a left-to-right (LTR) context, or vice-versa. Without <bdi>, text mixing might render in an incorrect or confusing order, particularly when user-generated content from different languages is present.

Syntax

<bdi dir="ltr|rtl|auto">content</bdi>

Attributes

Example

<p>
  Username: <bdi>JohnDoe</bdi>
</p>
<p>
  Username: <bdi>اسم_مستخدم</bdi>
</p>

More Examples

Basic Usage with dir="auto" (Default):
The default behavior of the <bdi> tag is to use dir="auto". The browser will inspect the first strongly directional character within the element to determine if the content is LTR or RTL.

<p>
    This user's name is: <bdi>John Doe</bdi>.
</p>
<p>
    This user's name is: <bdi>علي محمد</bdi>.
</p>

Explicit Direction with dir="rtl":
If you know that the isolated text should always be RTL, you can explicitly set dir="rtl".

<p>
    Name in Arabic: <bdi dir="rtl">اسم المستخدم</bdi>.
</p>

Explicit Direction with dir="ltr":
Similarly, you can specify LTR direction, although this is less commonly needed as most surrounding content is LTR by default.

<p>
  Name in English: <bdi dir="ltr">User Name</bdi>.
</p>

Mixing LTR and RTL in a Sentence

This example shows how text that should be RTL (Arabic) renders correctly within a LTR (English) sentence when using the bdi tag.

<p>
 The user <bdi>علي</bdi> commented: "Hello World".
</p>

Without the bdi tag, the "علي" could end up displaying at the end of the sentence.

Real world scenario : User-Generated Content

The following code shows how user comments may contain both LTR and RTL languages and how the bdi tag helps display them correctly:

 <p> User: <bdi>user123</bdi> Commented : <bdi>Hello World!</bdi> </p>
 <p> User: <bdi>user_العربية</bdi> Commented : <bdi>مرحباً بالعالم!</bdi> </p>
 <p> User: <bdi>mixed_user1</bdi> Commented : <bdi>مرحباً Hello World!</bdi> </p>

Browser Support

Notes and Tips

• The <bdi> tag is particularly useful when dealing with user-generated content or dynamically inserted content where the text direction isn't always known in advance.
• Always use <bdi> for isolated text. This provides robust support for bidirectional text display, handling diverse writing systems gracefully.
• The dir="auto" attribute on the <bdi> element is recommended for most use cases. This lets the browser dynamically detect the correct text direction based on the content of the element.
• You can combine <bdi> with CSS unicode-bidi property for more control over bidirectional text if needed. The default for <bdi> is unicode-bidi: isolate.
• Avoid using <bdo> unless you specifically want to enforce a direction overriding the document's natural directionality, as <bdi> is generally safer and more appropriate for isolated content.
• The <bdi> tag is a newer alternative to the older, more complex <bdo> element and should be favored in modern web development where text direction is handled properly.