👀 Live Preview
Arabic product name isolated inside English text:
The product قهوة رائعة means “Great Coffee” in Arabic.
HTML <bdi> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll confidently isolate bidirectional text in multilingual and user-generated content.
Core Syntax
Wrap mixed-direction text in <bdi> for automatic isolation.
bdi vs bdo
Know when to isolate vs explicitly override text direction.
Dynamic Content
Protect usernames, IDs, and product names from direction spillover.
RTL in LTR Pages
Embed Arabic and Hebrew safely inside English paragraphs.
Accessibility
Pair lang hints with isolation for screen readers.
Browser Support
Ship bdi markup with confidence in modern browsers.
Fundamentals
What Is the <bdi> Tag?
The bidirectional isolation element (<bdi>) represents a span of text that is directionally isolated from its neighbors. The browser’s Unicode bidirectional algorithm treats content inside <bdi> as a separate embedding.
Bidirectional Isolation
bdi stands for Bidirectional Isolation. RTL text inside cannot reorder adjacent LTR punctuation, numbers, or words outside the element—essential for usernames and dynamic data.
Common uses include usernames, product names, IDs, and mixed-language quotes in predominantly LTR or RTL pages. Direction is auto-detected; no dir attribute is required on the tag itself.
Foundation
📝 Syntax
Wrap text that may have a different direction inside <bdi> tags:
syntax.html
<bdi>Your Isolated Text Here</bdi><bdi>is an inline element—it nests inside paragraphs, lists, and tables.- Self-closing syntax (
<bdi />) is not valid in HTML. - Add
langwhen the isolated language is known (e.g.lang="ar").
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Basic isolation | <bdi>قهوة</bdi> | قهوة |
| With lang hint | <bdi lang="ar">مرحبا</bdi> | مرحبا |
| Username in sentence | User <bdi>إيان</bdi> commented | User إيان commented |
| vs bdo override | <bdo dir="rtl">...</bdo> | Forces explicit direction |
| Tag-specific attrs | None | Global attributes only |
| Full RTL page | <html dir="rtl"> | Page-level direction |
Comparison
⚖️ <bdi> vs <bdo>
Both handle bidirectional text, but they solve different problems:
| Element | Behavior | Best for |
|---|---|---|
<bdi> | Isolate; auto direction | Dynamic or unknown text (usernames, comments) |
<bdo> | Override with dir | Known RTL/LTR when you must force display order |
dir attribute | Set on any element | When direction is known in advance |
| Page-level | <html dir="rtl"> | Fully right-to-left documents |
bdi-vs-bdo.html
<!-- Unknown username: isolate with bdi -->
<p>User <bdi>إيان</bdi> commented.</p>
<!-- Known override: force direction with bdo -->
<p><bdo dir="rtl">This text displays right-to-left.</bdo></p>Reference
🧰 Attributes
The <bdi> tag has no tag-specific attributes. Isolation behavior is built in. Apply global attributes for styling and language hints:
class / id GlobalHook for CSS selectors and JavaScript targeting.
<bdi class="rtl-text">lang A11yHints the language of isolated text for screen readers and typography.
lang="ar"dir OptionalUsually unnecessary—isolation auto-detects direction. Use when you need an explicit hint.
dir="auto" bdi.html
<bdi class="rtl-text" lang="ar">مرحبا</bdi>Hands-On
Examples Gallery
Three bidirectional isolation patterns with copy-ready code, live previews, and hands-on practice.
Basic Bidirectional Isolation
Wrap RTL text in an LTR paragraph to prevent direction spillover.
basic-bdi.html
<p>
In this example, the product name
<bdi>قهوة رائعة</bdi> means "Great Coffee" in Arabic.
</p>📚 Common Use Cases
Here are the most frequent ways developers use the <bdi> tag.
Styled with class
Combine <bdi> with a CSS class for isolated RTL text that also has custom styling.
styled-bdi.html
<p>Hello, <bdi class="rtl-text">مرحبا</bdi> world!</p>Usernames & Dynamic Content
Wrap unpredictable usernames or IDs in <bdi> so mixed scripts and numbers display correctly in lists and comments.
usernames.html
<ul>
<li>User <bdi>إيان</bdi> rated this 5 stars</li>
<li>User <bdi>user_483</bdi> left a review</li>
<li>User <bdi>שלום123</bdi> posted yesterday</li>
</ul>A11y
♿ Accessibility & i18n
Proper bidirectional handling improves readability for all users:
- Dynamic text — always wrap unknown user content in
<bdi> - lang attribute — add
lang="ar"orlang="he"when the language is known - Page direction — set
dir="rtl"on<html>for fully RTL pages - Numbers and punctuation — isolation prevents RTL text from scrambling adjacent digits
🧠 How <bdi> Works
1
Author wraps mixed-direction text
Place usernames, product names, or foreign phrases inside <bdi>.
Markup
2
Browser creates an isolated embedding
The Unicode bidirectional algorithm runs separately inside the bdi boundary.
Algorithm
3
Surrounding text stays in order
LTR punctuation, numbers, and words outside bdi are not reordered by RTL content inside.
Display
=
Correct mixed-language display
Readers see Arabic, Hebrew, or mixed usernames in the right order without breaking the surrounding sentence.
Compatibility
Universal Browser Support
The <bdi> tag is supported in all modern browsers. Internet Explorer 11 and below may have limited bidirectional isolation behavior.
Baseline · Since HTML5
Works everywhere your users read
From IE 11 to the latest mobile browsers — bidirectional isolation is a core HTML5 internationalization feature.
98% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 11+ · Limited in older versions
Partial supportOpera All modern versions
Full support<bdi> tag 98% supported
Bottom line: Ship bidirectional isolation markup with confidence. Use <bdi> for dynamic mixed-language content in every production environment today.
Wrap Up
Conclusion
The <bdi> tag is a small but important tool for multilingual and user-generated content. Use it to isolate text with uncertain direction, pair it with lang when known, and reach for <bdo> only when you need to explicitly override direction.
Pro Tips
💡 Best Practices
✅ Do
- Wrap dynamic usernames and IDs in
<bdi> - Use
langwhen the isolated language is known - Set
diron<html>for fully RTL pages - Test mixed-language UI with real Arabic and Hebrew content
❌ Don’t
- Wrap entire paragraphs in
<bdi>—usediron block elements instead - Use
<bdi>when<bdo dir>is the clearer choice - Assume LTR pages handle RTL text correctly without isolation
- Forget UTF-8 encoding (
<meta charset="UTF-8">) for non-Latin scripts
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <bdi>
Bookmark these before you ship — they’ll keep mixed-language UI readable and accessible.
6
Core concepts 01
Bidirectional Isolation
<bdi> = Bidirectional Isolation—separate embedding for the Unicode algorithm.
02
Prevents Spillover
RTL text cannot reorder surrounding LTR punctuation, numbers, or words.
Behavior 03
Dynamic Content
Ideal for usernames, product names, IDs, and user-generated text.
Patterns 04
bdi vs bdo
<bdo> overrides direction; <bdi> isolates it automatically.
05
No Tag Attributes
No tag-specific attributes—use global class and lang.
06
Universal Support
Supported in all modern browsers; IE 11+ with limited older behavior.
Compatibility❓ Frequently Asked Questions
It isolates text so its bidirectional formatting does not affect neighbors—essential for usernames, product names, and mixed-language content in predominantly LTR or RTL pages.
Bidirectional Isolation. The element creates a separate embedding for the Unicode bidirectional algorithm.
<bdi> isolates and auto-detects direction. <bdo> requires dir="ltr" or dir="rtl" to explicitly override display direction.Use
<bdi> for unknown or user-generated text. Use dir on elements when you know the text direction in advance.No. Use global attributes like
class, id, and lang.Practice Bidirectional Isolation
Open the Try It editor and test Arabic product names and mixed usernames with bdi.
About the author
7 people found this page helpful