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 essential when embedding user-generated content or any text whose direction is unknown.
Without <bdi>, a username in Arabic or Hebrew could cause surrounding punctuation and numbers to display incorrectly due to the Unicode Bidirectional Algorithm treating it as part of a right-to-left sequence.
VB's i18n stylesheet sets unicode-bidi: isolate on [dir="auto"] elements, complementing the native bdi behavior.
When to Use
- User-generated names: Usernames, display names, search queries from any locale
- Database values: Any text retrieved from a data source whose direction you don't control
- API responses: Text from external services
- Leaderboards and lists: Mixed-script rankings
- Chat messages: User-submitted messages in multilingual applications
When NOT to Use
- For text whose direction you know — use
<bdo dir="...">instead - For entire sections in a different language — use
dir="rtl"ordir="ltr"on the container
Examples
<p>User <bdi>إيان</bdi> posted 3 comments.</p><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>, the colon and numbers may appear in unexpected positions:
<!-- Without bdi - text direction issues --><p>User محمد posted 3 comments.</p> <!-- With bdi - properly isolated --><p>User <bdi>محمد</bdi> posted 3 comments.</p>Dynamic Content
Always wrap user-generated content in <bdi> when the text direction is unknown:
<p> Latest comment by <bdi class="username"><!-- dynamic --></bdi>: <bdi class="comment"><!-- dynamic --></bdi></p>bdi vs bdo
| Element | Purpose | Direction |
|---|---|---|
<bdi> |
Isolate — let the browser detect direction | Defaults to auto |
<bdo> |
Override — force a specific direction | Requires dir="rtl" or dir="ltr" |
Attributes
Supports global attributes. The dir attribute defaults to auto on <bdi> elements, meaning the direction is determined by the element's content.
CSS
bdi { unicode-bidi: isolate; /* browser default */}VB does not add additional styling. The element's value is purely in its Unicode isolation behavior.
Accessibility
<bdi> has no special accessibility role. It affects visual rendering only. Screen readers read the content in logical order regardless of visual direction.
Related
<bdo>— Forces a specific text direction (override)<q>— Inline quotations with locale-aware quote marks- Internationalization guide — Full i18n reference including logical properties, ruby, and locale quotes