Introduction
The HTML <bdi> element is a unique inline semantic tag introduced in HTML5 to address the challenge of handling both left-to-right (LTR) and right-to-left (RTL) languages within a single sentence or user interface.
Contemporary interfaces must be capable of displaying multilingual, dynamic, and user-created content effectively, catering to millions of users inputting text in languages such as Arabic, Urdu, Hebrew, Persian, and other right-to-left (RTL) scripts.
In the absence of <bdi>, the alignment can be disrupted, characters may appear out of order, and visual inconsistencies can occur due to text direction "leaking" into adjacent content. To prevent this, the <bdi> element is utilized to contain the text direction within it, ensuring consistent behavior across various browsers and layouts.
The following article provides an in-depth explanation of the <bdi> element, including its syntax, behavior, examples, and distinctions from <bdo>.
What is <bdi>?
The <bdi> tag, representing Bidirectional Isolation, instructs the browser that the enclosed text should be treated as directionally separate from its surrounding text. This is especially useful when composing content in a right-to-left (RTL) language such as:
| RTL Language Examples | Script | Translation |
|---|---|---|
| Arabic | العربية | "Arabic" |
Urdu |
اُردُو | "Urdu" |
| Hebrew | עברית | "Hebrew" |
Since you cannot predict the direction of user-input text, <bdi> ensures safe, correct rendering.
Why Does Bidirectional Isolation Matter?
When LTR and RTL texts are combined, web browsers rely on complex BiDi algorithms to determine the correct direction. However, these algorithms can sometimes make incorrect assumptions. For instance, in the absence of <bdi>, a sentence like "User أحمد بن خالد posted a comment." might display inaccurately if the Arabic text causes parts of the sentence or punctuation to switch directions unexpectedly.
Issues may include:
- RTL scripts found in the wrong place
- Parentheses flipping sides
- Numbers jumping positions
- Misaligned UI labels
The <bdi> property contains the content within it, ensuring that its orientation does not influence or interact with neighboring elements.
Syntax
<bdi> Any content </bdi>
Following are some specifications about the <bdi> tag:
| Display | Inline |
|---|---|
| Start tag/End tag | Both start and End tag |
| Usage | Semantic/textual |
Example A: <bdi> with Arabic Text
<p>
This <bdi>مرحبا بالعالم</bdi> content is written in Arabic.
</p>
Output:
This مرحبا بالعالم content is written in Arabic.
Explanation:
In Arabic, the phrase "Hello World" is translated as مرحبا بالعالم. The <bdi> feature is designed to maintain the right-to-left internal flow of Arabic text while keeping its surrounding English text unaffected.
Example B: Styled <bdi> with Arabic Text
<style>
bdi {
font-size: 22px;
color: red;
}
</style>
<p>
User name: <bdi>أحمد بن خالد</bdi>
</p>
Output:
User name: أحمد بن خالد (in red colour)
Explanation:
When incorporating Arabic names into English text, it can sometimes interrupt the natural flow of the sentence. To address this issue, <bdi> can be utilized to maintain proper alignment of the name while also permitting the application of CSS styles.
Difference Between <bdi> and <bdi> and <bdo>
| Feature | <bdi> |
<bdi> |
|---|---|---|
| Purpose | Isolate direction | Override direction |
| Effect | Prevents direction leaks | Forces direction (LTR/RTL) |
| Recommended use | Dynamic / unknown direction content | Controlled, forced direction scenarios |
Risk |
None | May distort text if misused |
Example 1: Using <bdi> (Correct Behaviour)
<p>
With bdi: <bdi>السلام عليكم</bdi>
</p>
Output:
(Displays correctly in natural RTL form)
Explanation:
The Arabic expression السلام عليكم translates to "Peace be upon you." The use of <bdi> ensures that the Arabic script maintains its RTL orientation without impacting the surrounding English text. This feature allows browsers to distinguish between the directions of different languages, preserving the overall readability of the content.
Example 2: Using <bdo> (Forced Direction Override)
<p>
With bdo: <bdo dir="ltr">السلام عليكم</bdo>
</p>
Output:
The Arabic phrase appears visually distorted because the browser forces it into a left-to-right flow.
Explanation:
By specifying the dir="ltr" attribute in <bdo>, the default right-to-left rendering of Arabic text can be overridden, causing it to display from left to right. However, this alteration can lead to a misalignment of characters, disrupting the intended structure of the text and potentially rendering it illegible.
Example 3: Preventing Number Reordering in RTL Text
<p>
Order ID: <bdi>رقم ١٢٣٤٥ </bdi>processed successfully.
</p>
Output:
Order ID: رقم ١٢٣٤٥ processed successfully.
Explanation:
The term "رقم" translates to "Number" in Arabic. Arabic-Indic numerals such as ١٢٣٤٥ can sometimes get rearranged incorrectly if <bdi> is not used.
Example 4: Auto Direction Detection (dir="auto")
<p>
Name: <bdi dir="auto">نسرین جہاں</bdi>
</p>
Output:
Name: نسرین جہاں
Explanation:
The text "نسرین جہاں" is written in Urdu, so the browser will automatically detect it as right-to-left (RTL) text and apply the appropriate directionality.
Attribute Support
There are no unique attributes specific to <bdi>, however, it does accommodate all global and event attributes.
| Attribute Type | Attributes |
|---|---|
| Tag-Specific Attributes | None |
| Global Attributes | All (id, class, style, title, lang) |
| Event Attributes | All (e.g., onclick, onmouseover, etc.) |
Advantages and Disadvantages of <bdi>
| Advantages of <bdi> | Disadvantages / When Not to Use <bdi> |
|---|---|
| Maintains UI consistency | Not suitable for entire paragraphs |
| Prevents BiDi rendering errors | Should not be used for full RTL content blocks |
| Essential for global, multilingual applications | Incorrect for layout-level direction control |
| Safe for unknown or dynamically inserted text | Overuse can make markup unnecessarily verbose |
| Lightweight and requires no external libraries | Should be replaced with containers like <div dir="rtl"> for structural direction |
Conclusion
The <bdi> attribute addresses an important issue in web development related to the rendering of text with different directions. As the internet grows increasingly diverse with multilingual content, especially with user-generated material, utilizing <bdi> helps maintain tidy, legible, and consistent interfaces.
Authentic Arabic, Urdu, Hebrew, and Persian characters are seamlessly integrated into modern internationalized applications to ensure they appear correctly alongside English text, making them a crucial element for a global audience.