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