The <bdi> tag stands for Bidirectional Isolation. It’s used to isolate a portion of text that might have a different text direction (like right-to-left Arabic or Hebrew) from the surrounding content, preventing layout issues.
✅ Syntax
<bdi>isolated text</bdi>
📌 Why Use <bdi>?
When inserting user-generated or dynamic content (like names, usernames, locations, etc.) from unknown languages into a webpage, text direction might break the layout.
<bdi> ensures that the embedded content doesn’t affect the overall flow of surrounding text.
🧪 Example:
<p>Username: <bdi>علي</bdi></p>
<p>Username: <bdi>John</bdi></p>
Without <bdi>, right-to-left text like “علي” could misalign the word “Username:”.
📌 Output in browser:
- Username: علي
- Username: John
Both are correctly aligned, regardless of direction.
💬 Use Case
Let’s say you are building a comment section, and usernames could come from any language. Use <bdi> to avoid layout breaks:
<p><bdi>{{ username }}</bdi>: left a comment.</p>
It keeps the layout consistent even if username is in a right-to-left script.
🆚 <bdi> vs <bdo>
| Tag | Purpose | Direction Control |
|---|---|---|
<bdi> | Isolates text direction (auto) | Automatically detects |
<bdo> | Overrides direction manually | You set dir="rtl" or dir="ltr" |
🟢 Supported in all modern browsers
✅ Chrome, Firefox, Safari, Edge — all support <bdi> since HTML5.
🧠 Summary
- Use
<bdi>when you embed text with unknown direction (especially dynamic or user-generated). - It’s perfect for usernames, comments, locations, etc. in multilingual web apps.
- Helps preserve visual and logical layout.