bdi

Isolates text that might be formatted in a different direction from surrounding text.

Description

The <bdi> (Bidirectional Isolate) element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. This is particularly useful when embedding user-generated content or other text whose direction is unknown.

Without <bdi>, a username in Arabic or Hebrew could cause the surrounding punctuation and text to display incorrectly due to the bidirectional algorithm treating it as part of a right-to-left sequence.

Basic Example

User إيان posted 3 comments.

<p>User <bdi>إيان</bdi> posted 3 comments.</p>

Leaderboard with Mixed Names

When displaying a list of usernames that may include different scripts:

  • Alice: 15 points
  • محمد: 12 points
  • Bob: 10 points
  • יעקב: 8 points
<ul> <li><bdi>Alice</bdi>: 15 points</li> <li><bdi>محمد</bdi>: 12 points</li> <li><bdi>Bob</bdi>: 10 points</li> <li><bdi>יעקב</bdi>: 8 points</li> </ul>

Why Use bdi?

The difference becomes clear when RTL text is embedded without isolation:

<!-- Without bdi - text direction issues --> <p>User محمد posted 3 comments.</p> <!-- With bdi - properly isolated --> <p>User <bdi>محمد</bdi> posted 3 comments.</p>

Without <bdi>, the colon and number "3" might appear in unexpected positions when RTL text is present.

Dynamic Content

Always wrap user-generated content in <bdi> when you don't know the text direction:

Latest comment by DemoUser: This is a sample comment

<p> Latest comment by <bdi class="username"><!-- Dynamic username --></bdi>: <bdi class="comment"><!-- Dynamic comment --></bdi> </p>

Attributes

This element supports global attributes.

Note: The dir attribute defaults to auto on <bdi> elements, meaning the direction is determined by the element's content.

Accessibility

The <bdi> element has no special accessibility role. It purely affects visual rendering of bidirectional text. Screen readers will read the content in its logical order regardless of visual direction.

Related Elements

  • <bdo> - Forces a specific text direction (overrides bidirectional algorithm)