HTML bdi Tag
The HTML `<bdi>` (Bi-Directional Isolation) tag is used to isolate a span of text that might be formatted in a different direction from other text outside it. This is particularly useful when embedding user-generated content or text from an unknown directionality into a page that has a set direction
Basic Syntax
html
<p>User: <bdi>Evil Hacker</bdi> - Post Count: 10</p>
<p>Username: <bdi>ARABIC_USERNAME</bdi></p>
<p>The title of the book is <bdi>שלום עולם</bdi> (Hello World in Hebrew).</p>
In these examples:
- If
- Comments
- Forum posts
- Text inputs from users speaking different languages
If you have a predominantly Left-to-Right (LTR) page and you inject a Right-to-Left (RTL) string, the browser might get confused about how to display the characters immediately adjacent to the RTL string. The
-
-
- It does not introduce any specific styling by default, other than its effect on text directionality.
- Its primary purpose is to aid the Unicode bidirectional algorithm.When to Use
- When displaying user names, especially if they can be in different languages.
- When displaying user-generated comments or posts.
- In any situation where you are embedding text of unknown or potentially mixed directionality into a known-directionality context.
Evil Hacker or ARABIC_USERNAME were names that included right-to-left characters, <bdi> would ensure they are displayed correctly within the surrounding left-to-right text without messing up the order of surrounding characters (like the hyphen or "Post Count").
- The Hebrew title שלום עולם is isolated to ensure its right-to-left rendering doesn't affect the surrounding English text.
Why is bdi tag important?
Web pages often display content from various sources, some of which might have a different text directionality than the main page. For example: - Usernames- Comments
- Forum posts
- Text inputs from users speaking different languages
If you have a predominantly Left-to-Right (LTR) page and you inject a Right-to-Left (RTL) string, the browser might get confused about how to display the characters immediately adjacent to the RTL string. The
<bdi> tag tells the browser to treat the enclosed content as a separate entity in terms of text direction, applying the Unicode Bidirectional Algorithm independently to it.
<bdi> vs. <bdo>
- <bdi> (Bi-Directional Isolation): Isolates a piece of text from its surroundings for directional formatting. The direction of the text inside the <bdi> tag is determined by the browser based on the characters within it (or by a dir attribute on the <bdi> tag itself if needed). -
<bdo> (Bi-Directional Override): Explicitly overrides the text direction. You must use the dir attribute with <bdo> to set the direction (e.g., <bdo dir="rtl">Text</bdo>). This is less common and used when you need to force a specific directionality regardless of the content.
Generally, <bdi> is preferred for user-generated content where the directionality is unknown beforehand, as it allows the browser to intelligently handle the text.
Key Characteristics
- It's an inline element.- It does not introduce any specific styling by default, other than its effect on text directionality.
- Its primary purpose is to aid the Unicode bidirectional algorithm.
When to Use <bdi>
- When displaying user names, especially if they can be in different languages. - When displaying user-generated comments or posts.
- In any situation where you are embedding text of unknown or potentially mixed directionality into a known-directionality context.
Conclusion
The<bdi> tag is a crucial tool for internationalization (i18n) and ensuring that text, especially user-generated content, is displayed correctly regardless of its directionality relative to the surrounding text. It helps prevent garbled or confusing text displays in multilingual web applications.