Introduction
The HTML <bdo> element, known as the Bidirectional Override tag, plays a crucial role despite often being overlooked. It is utilized to forcefully alter the default text direction within it. This is essential for accurately displaying languages that are Right-to-Left (RTL) oriented such as Arabic, Persian, Hebrew, and Urdu.
The <bdo> tag serves to guide developers in clearly indicating whether the content within should appear in LTR (Left-to-Right) or RTL (Right-to-Left) regardless of the overall direction of the document.
What Is the <bdo> Tag?
The <bdo> tag in HTML is designed to instruct the web browser to disregard the inherent text direction, default writing direction, or inherited direction of the text, and instead follow the specified writing direction indicated by the element through its mandatory dir attribute.
For instance, even if the page layout is designed for left-to-right reading, the <bdo> tag gives the flexibility to display text in a right-to-left orientation. This feature is especially useful for multilingual software, where the user interface includes static and dynamic text inputs, and where bidirectional text might appear incorrectly otherwise.
Why Is <bdo> Important?
Text directionality becomes important in UI rendering when:
- You display mixed-direction content (e.g., English + Arabic).
- Users provide unpredictable information to the system.
- You have to standardise layout for RTL locales.
- You are interested in editing the text that appears inverted or distorted with the help of automatic bidirectional algorithms.
Web browsers rely on the bidirectional text algorithm provided by Unicode, which can occasionally lead to incorrect text ordering. In such cases, developers can utilize <bdo> to have complete control and replace the default algorithm.
Syntax
<bdo dir="ltr">Random Content</bdo>
<bdo dir="rtl">Random Content</bdo>
The attribute "dir" is required and must be specified as either "ltr" (Left-to-Right) or "rtl" (Right-to-Left).
Default Behaviour & Display Characteristics
| Behaviour Type | Characteristic |
|---|---|
| Tag Type | Inline |
| Start/End Tags | Both are required |
| Content Type | Textual |
| Content affected | Only enclosed content |
| Nature of Override | Overrides natural language directionality |
Unlike <bdi> , which isolates text without forcing direction, <bdo> forces the direction completely.
Examples of <bdo> Usage
Example 1: Overriding to Left-to-Right (LTR)
Example
<!DOCTYPE html>
<html>
<body>
<p>Normal text direction:</p>
<p>This is a normal sentence.</p>
<p>Forced LTR direction:</p>
<bdo dir="ltr">مرحبا بالعالم</bdo>
</body>
</html>
Output:
This will display the Arabic phrase in left-to-right order, which is not its natural reading direction.
Explanation
By default, Arabic text is written in a right-to-left direction. Changing this setting can cause the characters to appear in reverse order, disrupting the natural flow of the text. This feature is useful for troubleshooting issues related to text directionality or for intentionally adjusting the layout to achieve a specific design.
Example 2: Overriding to Right-to-Left (RTL)
Example
<!DOCTYPE html>
<html>
<body>
<p>Normal English text:</p>
<p> A Beautiful Flower</p>
<p>Forced RTL direction:</p>
<bdo dir="rtl">A Beautiful Flower</bdo>
</body>
</html>
Output:
This will reverse the English phrase so it renders visually from right to left.
Explanation
In English, text is typically written from left to right. By using the dir="rtl" attribute, the browser is instructed to display the text from right to left, contrary to the standard direction. This attribute is not meant for regular use; instead, it serves as a tool to demonstrate how the override mechanism can address directional challenges in multilingual web pages.
Example 3: Multilingual Content Formatting
Example
<!DOCTYPE html>
<html>
<body>
<p>Mixed content without BDO:</p>
<p>Hello in Arabic is: مرحبا</p>
<p>Mixed content with BDO forcing order:</p>
<p>Hello in Arabic is:
<bdo dir="rtl">مرحبا</bdo>
</p>
</body>
</html>
Output:
The Arabic word will align properly and follow RTL direction, even if the surrounding interface is LTR.
Explanation
When English (left-to-right) and Arabic (right-to-left) languages are combined, there can be challenges with text ordering. While it wasn't an issue in this particular instance, employing <bdo dir="rtl"> addresses the issue and guarantees that the right-to-left text displays correctly within a left-to-right interface.
Attributes of <bdo>
| Attribute Type | Description |
|---|---|
| Tag-specific attributes | dir (ltr, rtl) |
| Global attributes | class, id, style, title, lang, etc. |
| Event attributes | onclick, onmouseover, onkeydown, etc. |
When to Use <bdo> Instead of <bdo>?
Use <bdo> when:
- You want to force a specific text direction.
- You need complete override, not isolation.
- You are working with static or predictable text that requires strict directional formatting.
- User-generated input may contain RTL characters.
- You want the browser to handle direction automatically while isolating text.
Use <bdi> when:
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<bdo> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The HTML <bdo> element plays a crucial role for developers who encounter challenges with multilingual websites, internationalization, or bidirectional text rendering. While not commonly used in everyday HTML tasks, it becomes vital when precise control over text direction is needed.
<bdo> guarantees that text maintains its original appearance regardless of the language or input source, as well as the surrounding layout, by overriding the default directionality. This feature is a reliable and widely accepted option in web development for localizing the user interface and promoting a more inclusive web experience, making it an essential tool for developers.