Explicitly overrides text direction. Learn more →
<bdi> - The Bidirectional Isolate Element
The <bdi> Element
Section titled “The <bdi> Element”The bidirectional isolate element isolates a span of text that might be formatted in a different direction from the surrounding text, preventing bidirectional text algorithm interference.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<bdi>potentially bidirectional text</bdi>The <bdi> element tells the browser to treat this text as isolated from its surroundings when determining text direction.
The Problem It Solves
Section titled “The Problem It Solves”When mixing left-to-right (LTR) and right-to-left (RTL) text, the browser’s bidirectional algorithm can produce unexpected results:
<!-- Can produce incorrect rendering --><p>Winner: محمد: 100 points</p>The colon and “100 points” might appear in the wrong position.
<!-- Correctly isolates the name --><p>Winner: <bdi>محمد</bdi>: 100 points</p>The name is isolated, preventing direction conflicts.
Common Use Cases
Section titled “Common Use Cases”User-Generated Content
Section titled “User-Generated Content”When displaying usernames that could be in any language:
Result
Leaderboards and Rankings
Section titled “Leaderboards and Rankings” Result
Comment Sections
Section titled “Comment Sections” Result
Product Reviews
Section titled “Product Reviews” Result
Search Results
Section titled “Search Results” Result
When to Use <bdi>
Section titled “When to Use <bdi>”Use <bdi> when:
- Displaying user-generated content (usernames, comments)
- The text direction is unknown at development time
- Mixing content from multiple languages
- Building internationalized applications
<bdi> vs <bdo>
Section titled “<bdi> vs <bdo>”<!-- Isolates text, browser determines direction --><p>User: <bdi>أحمد</bdi> posted a comment</p>Use when direction is unknown.
<!-- Overrides direction explicitly --><p>The word <bdo dir="rtl">HELLO</bdo> is reversed</p>Use to explicitly override text direction.
Accessibility
Section titled “Accessibility”Screen Reader Behavior
Section titled “Screen Reader Behavior”Screen readers respect the text direction indicated by <bdi>, ensuring content is read in the correct order.
Language Attribute
Section titled “Language Attribute”Combine with lang attribute for better accessibility:
<p>User: <bdi lang="ar">محمد</bdi> has logged in</p><p>User: <bdi lang="zh">李明</bdi> has logged in</p>Browser Support
Section titled “Browser Support”| Browser | Version | Notes |
|---|---|---|
| Chrome | 16+ | Full support |
| Firefox | 10+ | Full support |
| Safari | 6+ | Full support |
| Edge | 79+ | Full support |
| IE | 11 | Partial support |
All modern browsers support <bdi>. For older browsers, the text will still display but without bidirectional isolation.
Related Elements
Section titled “Related Elements”dir attribute
Global attribute to specify text direction. Learn more →