👀 Live Preview
Same text with and without dir="rtl" override:
Normal: Hello World!
RTL override: Hello World!
HTML <bdo> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll confidently override text direction for multilingual and mixed-language content.
Core Syntax
Wrap text in <bdo> with the required dir attribute.
dir Attribute
Force ltr or rtl display when direction is known.
bdo vs bdi
Override direction explicitly vs isolate auto-detected text.
Mixed Text
Embed Arabic in English or reverse LTR text for demos.
LTR in RTL Pages
Force English phrases to display correctly on RTL pages.
Browser Support
Ship bdo markup with universal browser compatibility.
Fundamentals
What Is the <bdo> Tag?
The bidirectional override element (<bdo>) forces the text direction of its contents. Unlike <bdi>, which isolates auto-detected text, <bdo> requires you to set dir="ltr" or dir="rtl" explicitly.
Bidirectional Override
bdo stands for Bidirectional Override. It overrides the Unicode bidirectional algorithm so text renders in the direction you specify—essential when you know the intended reading order.
Common uses include reversing LTR text for demonstration, embedding RTL Arabic in English prose, and forcing LTR English inside fully RTL pages.
Foundation
📝 Syntax
Wrap text in <bdo> and set the required dir attribute:
syntax.html
<bdo dir="ltr">Left-to-right text</bdo>
<bdo dir="rtl">Right-to-left text</bdo><bdo>is an inline element—it nests inside paragraphs, headings, and lists.- The
dirattribute is required and accepts onlyltrorrtl. - Self-closing syntax (
<bdo />) is not valid in HTML.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Force RTL | <bdo dir="rtl">Hello</bdo> | Hello |
| Force LTR | <bdo dir="ltr">English</bdo> | English |
| Arabic in English | <bdo dir="rtl">قلب</bdo> | قلب |
| vs bdi isolate | <bdi>...</bdi> | Auto direction, no override |
| Required attr | dir="ltr" | "rtl" | Must be present on every bdo |
| RTL page + English | <bdo dir="ltr">Hello</bdo> | Hello |
Comparison
⚖️ <bdo> vs <bdi>
Both handle bidirectional text, but they solve different problems:
| Element | Behavior | Best for |
|---|---|---|
<bdo> | Override with required dir | Known direction—reversing LTR, embedding English in RTL |
<bdi> | Isolate; auto direction | Dynamic or unknown text (usernames, comments) |
dir on span | Set on any element | Block-level content when semantics allow |
| Page-level | <html dir="rtl"> | Fully right-to-left documents |
bdo-vs-bdi.html
<!-- Force RTL display -->
<bdo dir="rtl">Hello World!</bdo>
<!-- Isolate unknown username -->
<bdi>إيان</bdi>Reference
🧰 Attributes
The dir attribute is required on <bdo>. It accepts only ltr or rtl:
dir RequiredForces left-to-right or right-to-left display of enclosed text.
dir="rtl"class / id GlobalHook for CSS selectors and JavaScript targeting.
<bdo class="rtl-text">lang A11yHints the language of overridden text for screen readers.
lang="ar" attribute.html
<bdo dir="rtl" lang="ar">Your right-to-left text here</bdo>Hands-On
Examples Gallery
Three direction-override patterns with copy-ready code, live previews, and hands-on practice.
Right-to-Left Override
Force text to render right-to-left with dir="rtl", even inside an LTR page.
rtl-bdo.html
<bdo dir="rtl">Your Right-to-Left Text Here</bdo>📚 Common Use Cases
Here are the most frequent ways developers use the <bdo> tag.
Mixed Bidirectional Text
Embed an RTL Arabic word in English prose, or reverse LTR text for demonstration purposes.
bi-directional-text.html
<p>
The <bdo dir="rtl">قلب</bdo> of the matter lies in bi-directional support.
</p>
<p>
Reversed: <bdo dir="rtl">Hello World!</bdo>
</p>Force LTR in an RTL Page
On a right-to-left page (dir="rtl" on <html>), use <bdo dir="ltr"> so English phrases display correctly.
ltr-in-rtl.html
<html lang="ar" dir="rtl">
<p>
النص العربي،
<bdo dir="ltr">Hello World</bdo>
بالإنجليزية.
</p>
</html>النص العربي، Hello World بالإنجليزية.
A11y
♿ Accessibility & i18n
Handle direction carefully for all readers:
- Always set dir — the attribute is required on every
<bdo> - Prefer bdi for user-generated content with unknown direction
- Page-level dir — set
diron<html>for fully RTL or LTR pages - UTF-8 — use
<meta charset="UTF-8">for Arabic, Hebrew, and other scripts
🧠 How <bdo> Works
1
Author sets dir on bdo
Choose ltr or rtl based on how the text must display.
Markup
2
Browser overrides direction
The Unicode bidirectional algorithm is overridden inside the bdo boundary.
Override
3
Characters reorder visually
Text renders in the forced direction—RTL reverses character order for LTR source text.
Display
=
Correct multilingual layout
Mixed-language pages display each phrase in the intended reading direction.
Compatibility
Universal Browser Support
The <bdo> tag is supported in all browsers, including Internet Explorer.
Baseline · Since HTML4
Works everywhere your users read
From legacy IE to the latest mobile browsers — bidirectional override has been a core HTML feature for decades.
100% Universal browser support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer All versions · Including IE 6+
Full supportOpera All modern versions
Full support<bdo> tag 100% supported
Bottom line: Ship bidirectional override markup with confidence. Use <bdo dir> in every production environment today.
Wrap Up
Conclusion
The <bdo> tag gives you explicit control over text direction when the Unicode algorithm alone is not enough. Always pair it with dir="ltr" or dir="rtl", prefer <bdi> for unknown dynamic content, and set page-level dir on <html> for fully directional layouts.
Pro Tips
💡 Best Practices
✅ Do
- Always include
dir="ltr"ordir="rtl"on<bdo> - Use
<bdi>for unpredictable user-generated text - Set
diron<html>for fully RTL or LTR pages - Test mixed-language UI with real Arabic and Hebrew content
❌ Don’t
- Omit the
dirattribute—it is required - Use
<bdo>when<bdi>is the better choice - Override direction without a clear reason
- Forget UTF-8 encoding for non-Latin scripts
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <bdo>
Bookmark these before you ship — they’ll keep mixed-language UI readable and accessible.
6
Core concepts 01
Bidirectional Override
<bdo> = Bidirectional Override—forces text direction explicitly.
02
dir Is Required
Every <bdo> must have dir="ltr" or dir="rtl".
03
Overrides Algorithm
Forces text direction, overriding the Unicode bidirectional algorithm.
Behavior 04
bdo vs bdi
<bdi> isolates; <bdo> overrides with explicit dir.
05
LTR in RTL Pages
Use dir="ltr" to embed English correctly on RTL pages.
06
Universal Support
Supported in all browsers, including Internet Explorer.
Compatibility❓ Frequently Asked Questions
It overrides bidirectional text direction. Set
dir="ltr" or dir="rtl" to force how the enclosed text displays.Bidirectional Override. The element explicitly sets text direction rather than relying on auto-detection.
Yes. Every
<bdo> element must have dir="ltr" or dir="rtl".<bdo> forces direction with dir. <bdi> isolates text and auto-detects direction—better for unknown usernames and dynamic content.Use
<bdo> for semantic inline overrides. For block content, dir on p or div is often simpler and equally effective.Practice Direction Override
Open the Try It editor and experiment with dir="rtl" and dir="ltr" on bdo elements.
About the author
7 people found this page helpful