<bdo>
Forces the text’s display direction, bypassing the automatic bidirectional algorithm.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Regular text: CodeWorlds</p>
<p>With forced direction: <bdo dir="rtl">CodeWorlds</bdo></p>Definition and usage
#The <bdo> element (from bidirectional override) turns off automatic direction detection and displays characters exactly in the direction you give in the dir attribute: ltr (left to right) or rtl (right to left). With rtl, even English text will appear reversed, letter by letter.
You’ll rarely need it: when you want to show the order characters are stored in a computer’s memory, for example when teaching about Arabic or Hebrew text, or when the automatic algorithm gets a specific case wrong.
With <bdo>, the global dir attribute is required and only accepts the values ltr or rtl; the value auto isn’t allowed here. For content with an unknown direction, e.g. usernames, use <bdi>.
Syntax
#<bdo dir="rtl">text</bdo>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>This is how the word "shalom" displays: שלום</p>
<p>This is how it's stored in memory, character by character: <bdo dir="ltr">שלום</bdo></p>Default CSS
#Most browsers display this element with these default styles:
bdo {
unicode-bidi: isolate-override;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Always give
dir="ltr"ordir="rtl". Without it, the element makes no sense. - For text entered by users, use
<bdi>, not<bdo>. - Don’t reverse text with
<bdo>for visual effect. A screen reader will read it out in its original order anyway.
Related entries
#- <bdi>Isolates a piece of text whose writing direction is unknown, e.g. a username written in Arabic.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <p>A paragraph of text.
- <ruby>Ruby annotations: small text above characters, most often the pronunciation of Chinese or Japanese characters.
Spotted a mistake or missing an example? Write to us.