Tag bdo

The <bdo> tag stands for Bidirectional Override. It allows you to force the direction of the text inside it, either left-to-right (LTR) or right-to-left (RTL) — overriding its natural direction.

✅ Syntax

<bdo dir="rtl">This text will be forced to RTL</bdo>
  • dir is required
  • Values:
    • ltr → Left to Right (default for English)
    • rtl → Right to Left (used in Arabic, Hebrew, etc.)

📌 Example

<p>Normal: John</p>
<p>Override: <bdo dir="rtl">John</bdo></p>

📍 The second line forces the name “John” to render in reverse direction, which may look something like “nhoJ”.

🧪 Real-World Use Case

Let’s say you have a multilingual site, and a user enters an English name in a right-to-left paragraph. This can cause layout issues.

You can use <bdo> to force a consistent direction:

<p dir="rtl">اسم المستخدم: <bdo dir="ltr">John_Doe</bdo></p>

🔎 Without <bdo>, “John_Doe” might break the RTL sentence visually.
✅ With <bdo>, it displays correctly in LTR within an RTL paragraph.

⚠️ When Not to Use <bdo>

  • If you don’t know the content’s direction in advance, use <bdi> instead — it auto-detects.
  • Only use <bdo> when you need to force text direction.

🆚 <bdo> vs <bdi>

TagFunctionDirection Control
<bdo>Overrides direction manuallyYou set dir explicitly
<bdi>Isolates direction naturallyBrowser detects direction

✅ Supported in All Major Browsers

  • Chrome ✔️
  • Firefox ✔️
  • Safari ✔️
  • Edge ✔️
  • Mobile Browsers ✔️

🧠 Summary

  • <bdo> gives you manual control over text direction
  • Great for multilingual and internationalized content
  • Use it carefully — only when auto-detection via <bdi> won’t work