<bdi>

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

HTML5

Quick Answer

What is the <bdi> tag?

The <bdi> tag (Bi-Directional Isolation) isolates text that might have different directionality from surrounding text. It's useful when embedding user-generated content or data with unknown direction (like usernames, product names) in right-to-left or left-to-right contexts, preventing bidirectional text conflicts.

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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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