<bdo> Bidirectional override
Forces a text direction and overrides the normal bidi algorithm.
<bdo> overrides text direction. Characters inside it appear in the order set by its required dir attribute, ltr or rtl.
You will rarely need it. Text of unknown direction calls for <bdi>, and a whole block in another language only needs dir and lang on a normal element.
The bdo element in the WHATWG standard (opens in a new tab) makes the dir attribute mandatory. To isolate text instead, see the bdi element.
Syntax
<bdo dir="rtl">text</bdo>When to use it
The <bdo> element is for the rare cases when you must control character order yourself: showing how the bidirectional algorithm reorders text in a tutorial, displaying data from an old system that stored Hebrew or Arabic in visual order, or a word puzzle where letters are deliberately reversed.
For everyday multilingual pages, set dir and lang on normal elements. For text of unknown direction, use bdi. The CSS unicode-bidi and direction properties can do the same as bdo, but the standard recommends markup, because the direction is part of the content and must survive without CSS.
Know what bdo changes and what it does not. It reorders the characters inside it, so dir="rtl" on English text prints it backwards, and dir="ltr" on Hebrew shows the letters in the wrong order for readers. It does not change the alignment of the paragraph around it or flip the shapes of the letters.
Attributes
| Attribute | What it does |
|---|---|
dir | Required. ltr (left to right) or rtl (right to left). |
Live example
Edit the code and watch the preview.
<p>Normal: Hello world</p>
<p>Reversed: <bdo dir="rtl">Hello world</bdo></p>More examples
Word puzzle
bdo with dir="rtl" displays English letters in reverse order. The underlying text is still "stressed", which reads "desserts" when shown backwards. Screen readers may read the letters in the reversed order too, so keep this for puzzles and demos.
<p>Puzzle: which word do you get when you read <b>stressed</b> backwards?</p>
<p>Answer: <bdo dir="rtl">stressed</bdo></p>Normal order versus override
The Hebrew word for "peace" is shown three ways: with the normal algorithm, then with bdo forcing left-to-right and right-to-left order. Only the first and third look correct to Hebrew readers.
<p>Normal: <span lang="he">שלום</span></p>
<p>Forced LTR: <bdo dir="ltr" lang="he">שלום</bdo></p>
<p>Forced RTL: <bdo dir="rtl" lang="he">שלום</bdo></p>Tip: bdi or the dir attribute usually works. bdo is for odd cases.
Browser support
bdo has been part of HTML since HTML 4 and works in every browser, including very old ones. Its dir attribute is required. The reordering rules come from the Unicode Bidirectional Algorithm (opens in a new tab), which all browsers implement.
Accessibility
Screen readers may read text in the reversed order bdo forces on it, so keep it away from content users need to understand. Why reading order has to stay correct is covered in the W3C note Understanding Meaningful Sequence (opens in a new tab).
Common mistakes
Wrong
<bdo>Text</bdo>Right
<bdo dir="rtl">Text</bdo>bdo cannot do without its dir attribute.
Frequently asked questions
What does the bdo tag do?
It forces direction. <bdo> (bidirectional override) displays the characters inside it in the direction given by its required dir attribute, ltr or rtl, and ignores the Unicode bidirectional algorithm. <bdo dir="rtl">Hello</bdo>, for example, shows the letters in reverse order. It is an inline element, and everyday pages rarely need it.
When would I need bdo instead of the dir attribute?
Hardly ever. The dir attribute on most elements sets the base direction but still lets the browser order characters by their natural direction, while <bdo> overrides character ordering completely. Cases for it include displaying text stored in visual order and demonstrating bidirectional behaviour. Unknown user text belongs in <bdi>. The ordering rules come from the Unicode Bidirectional Algorithm (opens in a new tab).