HTML <bdo> Tag
The <bdo> tag in HTML stands for "Bi-Directional Override". It's used to override the current text direction of the text within it, providing explicit control over how the text is displayed, which is especially useful for handling text that mixes languages with different writing directions, such as right-to-left (RTL) and left-to-right (LTR) scripts.
Syntax
<bdo dir="ltr|rtl">content</bdo>
Attributes
| Attribute | Value | Description |
|---|---|---|
| dir | ltr |
Specifies that the text direction should be left-to-right. |
| dir | rtl |
Specifies that the text direction should be right-to-left. |
Example
<p>This is a normal LTR sentence.</p>
<p><bdo dir="rtl">This text will be displayed RTL.</bdo></p>
More Examples
Basic Use of dir="rtl"
This example demonstrates how to display a sentence in right-to-left direction.
<p>This is a normal English sentence.</p>
<p><bdo dir="rtl">This English sentence will be reversed.</bdo></p>
Displaying Arabic Text
Arabic text is naturally displayed from right-to-left. However, when mixed with LTR text, sometimes the browser can render incorrectly based on unicode directionality, the bdo tag ensures accurate rendering of direction.
<p>English text before: مرحبا بالعالم</p>
<p>English text after: <bdo dir="rtl">مرحبا بالعالم</bdo></p>
Mixing LTR and RTL Text
The <bdo> tag ensures correct display when mixing text with different directions within a single sentence.
<p>The word <bdo dir="rtl">مرحبا</bdo> means hello.</p>
<p>This is how it can be confusing without <bdo>: The word مرحبا means hello.</p>
bdo Within a Larger Text Context
Demonstrating that it overrides the surrounding text direction.
<p>This is a sentence with <bdo dir="rtl">embedded RTL text</bdo> and more LTR text.</p>
Applying Styles to the bdo tag
You can apply css styles directly to the bdo tag. This can help you make it clear in some use cases where the direction is different to the natural direction of the flow.
<p>
This paragraph contains <bdo dir="rtl" style="color: red; font-weight:bold;">RTL text</bdo>
embedded within.
</p>
Browser Support
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
Notes and Tips
- Use Sparingly: The
<bdo>tag should be used when you explicitly need to override text direction. Overusing it can make the text flow unpredictable and confusing. - Accessibility: While
<bdo>controls the display, it doesn't change the underlying logical order of the text for screen readers. Ensure the logical order of text makes sense for assistive technologies. In complex scenarios, use<bdi>for isolating bidirectional text or consider server-side rendering to properly organize the content for readability and accessibility. - When Not to Use
bdo: If you're simply displaying text in languages with right-to-left scripts, the browser will generally handle the direction automatically. You only need<bdo>when you want to enforce a specific direction, which differs from the natural direction. dirattribute for Parent Elements: Consider using thedirattribute on parent elements (like<html>or<body>) to set the overall direction of the document, then usebdofor specific overrides if needed.- Avoid Overuse: The use of
bdois usually quite infrequent in most web development, this is because in the vast majority of cases, the default rendering is just fine. Be careful using it in situations where it does not make sense. - Unicode Control Characters: In very specific cases you may want to consider using the Unicode control characters for directional formatting instead of
bdowhen rendering text for various use cases such as code display and other scenarios. These are a more robust method to ensure proper directionality if your content is dynamically generated.
By understanding and using the <bdo> tag effectively, you can ensure the proper display of text in your HTML documents, even when dealing with different writing directions.
