<bdi>

Isolates a part of text that might be formatted in a different direction

HTML5

Definition and Usage

The <bdi> tag stands for Bi-Directional Isolation. It isolates a part of text that might be formatted in a different direction from other text outside it.

This tag is useful when you have text from an unknown direction (like user-generated content) that you want to display without affecting the surrounding text's direction.

💡 Use Case: The <bdi> tag is particularly useful for displaying usernames, comments, or any user-generated content that might contain text in different languages (especially Arabic, Hebrew, or other RTL languages).

Tip: The <bdi> tag allows the browser to treat the text inside it as having a potentially different direction, preventing it from affecting the text direction of the surrounding content.

Browser Support

The <bdi> tag is supported in all modern browsers:

Chrome

16.0+

Firefox

10.0+

Safari

6.0+

Edge

79.0+

Opera

15.0+

Attributes

The <bdi> tag supports the Global Attributes in HTML.

The <bdi> tag does not have any specific attributes, but it works with the browser's bi-directional algorithm automatically.

Understanding Text Direction

What is Bi-Directional Text?

Most languages (English, Spanish, French) are written left-to-right (LTR). However, some languages like Arabic, Hebrew, and Persian are written right-to-left (RTL). When you mix these languages in the same document, it's called bi-directional text.

The Problem

When you display user-generated content (like usernames) that might contain RTL text, it can affect the direction of surrounding punctuation and text.

Example: Without <bdi> (Problematic)

User: إيان (Arabic name) scored 90 points.

The punctuation and numbers might appear in the wrong place!

Example: With <bdi> (Correct)

User: إيان scored 90 points.

The text is properly isolated, and everything displays correctly!

Examples

Basic Username Display

Isolate usernames that might contain RTL text:

Example
<ul>
  <li>User <bdi>John</bdi> scored 95 points.</li>
  <li>User <bdi>إيان</bdi> scored 90 points.</li>
  <li>User <bdi>Sarah</bdi> scored 88 points.</li>
</ul>

Comment Section

Display comments from users with different text directions:

Example
<div class="comment">
  <strong><bdi>أحمد</bdi>:</strong>
  <p>This is a great article!</p>
</div>

<div class="comment">
  <strong><bdi>David</bdi>:</strong>
  <p>I completely agree with this point.</p>
</div>

Leaderboard Display

Show rankings with international usernames:

Example
<ol>
  <li><bdi>Michael</bdi> - 1000 points</li>
  <li><bdi>محمد</bdi> - 950 points</li>
  <li><bdi>יוסף</bdi> - 920 points</li>
  <li><bdi>Jennifer</bdi> - 900 points</li>
</ol>

Product Reviews

Display product reviews with author names:

Example
<article class="review">
  <header>
    <h3>Review by <bdi>علي</bdi></h3>
    <p>Rating: ⭐⭐⭐⭐⭐</p>
  </header>
  <p>Excellent product! Highly recommended.</p>
</article>

Chat Application

Display chat messages from users with different languages:

Example
<div class="chat">
  <div class="message">
    <strong><bdi>Emma</bdi>:</strong> Hello everyone!
  </div>
  <div class="message">
    <strong><bdi>أمير</bdi>:</strong> مرحبا (Hello in Arabic)
  </div>
  <div class="message">
    <strong><bdi>רחל</bdi>:</strong> שלום (Hello in Hebrew)
  </div>
</div>

Database Records Display

Show database entries with mixed-direction content:

Example
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><bdi>John Smith</bdi></td>
      <td>john@example.com</td>
      <td>Active</td>
    </tr>
    <tr>
      <td><bdi>فاطمة الزهراء</bdi></td>
      <td>fatima@example.com</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Forum Posts

Handle forum posts with international usernames:

Example
<article class="post">
  <header>
    <h2>Post Title</h2>
    <p>Posted by <bdi>دانيال</bdi> on January 15, 2025</p>
  </header>
  <div class="post-content">
    <p>This is the content of the forum post...</p>
  </div>
  <footer>
    <p>Last edited by <bdi>moderator_01</bdi></p>
  </footer>
</article>

Try it Yourself

Interactive Example

See how <bdi> properly isolates text direction:

With <bdi> (Correct):

User John - 95 points
User إيان - 90 points
User Sarah - 88 points

Without <bdi> (May have issues):

User John - 95 points
User إيان - 90 points
User Sarah - 88 points

Try in Code Playground

When to Use <bdi>

User-generated content: When displaying usernames, comments, or posts from users
International applications: When your app supports multiple languages including RTL languages
Dynamic content: When you don't know in advance what direction the text will be
Lists and rankings: When displaying lists with names from different languages
Database content: When displaying data that might contain mixed-direction text
Search results: When showing search results with international content

Best Practices

Use <bdi> for all user-generated content that might contain RTL text
Apply <bdi> to usernames, author names, and any unpredictable text
Don't overuse - only wrap content where direction isolation is needed
Test your application with RTL text (Arabic, Hebrew) to verify correct behavior
Consider using <bdi> even if you don't currently support RTL languages (future-proofing)
Combine with proper lang attributes for better accessibility
Use CSS unicode-bidi: isolate if you need the same effect with custom styling

Difference: <bdi> vs <bdo>

<bdi> - Bi-Directional Isolation

Automatically isolates text
No required attributes
Browser determines direction
Used for unpredictable content
Best for user-generated text

<bdo> - Bi-Directional Override

Forces a specific direction
Requires dir attribute
You control the direction
Used when direction is known
Best for intentional overrides

Related Tags

<bdo>
Overrides text direction
<span>
Generic inline container
<ruby>
Ruby annotations for East Asian typography