What are BDI and BDO Elements?

What You'll Learn

• BDI vs BDO elements
• Handling RTL scripts
• Text direction control

BDI Element

<bdi> (Bi-Directional Isolation) isolates text that might have a different directionality. It prevents that text from affecting the surrounding content's direction.

BDO Element

<bdo> (Bi-Directional Override) forces text direction using the dir attribute: ltr or rtl.

Examples

<!-- BDI: Isolate user content -->
<ul>
  <li>User <bdi>Emily</bdi>: 1st place</li>
  <li>User <bdi>مريم</bdi>: 2nd place</li>
  <li>User <bdi>אילן</bdi>: 3rd place</li>
</ul>

<!-- BDO: Override direction -->
<p><bdo dir="rtl">This text is forced right-to-left</bdo></p>

<!-- Reversing text -->
<p>Normal: Hello World</p>
<p>Reversed: <bdo dir="rtl">Hello World</bdo></p>

When to Use

• bdi: User-generated content that might contain RTL scripts
• bdo: When you need to explicitly control direction