bdo
The HTML <bdo> element explicitly overrides the direction in which text is laid out. Use its dir attribute when the desired direction is known.
What you will learn
- How
bdooverrides the direction of text - When to use
dir="ltr"ordir="rtl" - Why
bdiis better for values with an unknown direction
Basic syntax
<p>Arabic text: <bdo dir="rtl">مرحبا بالعالم</bdo></p>
<p>This label is forced left-to-right: <bdo dir="ltr">ABC 123</bdo></p>bdo is a bidirectional override. The required dir attribute tells the browser which direction to apply: ltr means left to right and rtl means right to left.
bdo and bdi are different
bdo- Forces a direction that you explicitly choose.
bdi- Isolates a value whose direction is unknown and lets the browser determine it.
For example, use bdo for a known Arabic label. For a user name that could be written in any script, use bdi so the value does not disturb nearby punctuation or numbers.
Use it sparingly
Direction changes meaningfully affect reading order. Do not use bdo just to make a visual layout look right; fix the surrounding language and direction semantics first. The page or component can often use dir on a larger element instead.
Common mistakes
- Omitting the required
dirattribute. - Choosing
rtlbecause a font looks unusual rather than because the script is right-to-left. - Using
bdofor unknown user input instead ofbdi. - Assuming direction changes the language or translates the text.