Bidi and bdo

Control mixed-direction text with <bdi> and <bdo>.

The bidi algorithm

Text direction is not just "right to left" or "left to right"; a paragraph can mix characters from both directions. This is called bidirectional (bidi) text. The browser uses the Unicode bidi algorithm to compute each character's direction.

Sometimes the algorithm gets confused, especially when a Latin word sits inside Arabic text. That is where <bdi> and <bdo> step in: you state the direction explicitly and override the algorithm.

Force direction with bdo

The <bdo> tag bypasses the bidi algorithm and forces a direction. It pairs with dir: <bdo dir="rtl">... renders its content right to left.

For example, to keep a phone number readable inside an RTL page, write <bdo dir="ltr">+90 212 555 1234</bdo>. <bdi>, by contrast, trusts the algorithm and only steps in when direction is unclear.

Exercise Username with bdi

Add a <ul> to body; inside it put one <li>. Inside the <li> add a <bdi> with the text Ahmed1990. After the <bdi> add a <span> with the text 5 posts.

Show example solution

<body>
  <ul>
    <li>
      <bdi>Ahmed1990</bdi>
      <span>5 posts</span>
    </li>
  </ul>
</body>

Test yourself

When do you use <bdi>?
- When a username's direction is unclear
- In pure English text
- To align a table
- To set a link target
Show answer

When a username's direction is unclear — Correct. bdi wraps text with unclear direction (e.g. a username) and helps the bidi algorithm.

Complete the bdo tag

<____ dir="ltr">+90 212 555 1234</bdo>

Show answer

<bdo dir="ltr">+90 212 555 1234</bdo>

Match each tag to its role

<bdi>

Wraps unclear-direction text
<bdo>

Forces the direction
dir="rtl"

Right to left flow
dir="ltr"

Left to right flow

Next lesson: RTL-aware markup

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies