The HTML <bdo> element is used to override the current directionality of text, which can be helpful in cases where content needs to be displayed in a direction different from the default directionality of the document. It was introduced in HTML4 and is still widely used today.
The abbreviation “bdo” stands for “Bi-Directional Override.”
Syntax
The syntax for the <bdo> element is straightforward:
1 | <bdodir="rtl">Some form of text</bdo> |
This syntax creates an inline element that can override the text’s directionality, by using the dir attribute.
Example
1 | <p>This text is written from left to right.</p> |
2 | <p><bdodir="rtl">This text is written from right to left.</bdo></p> |
In this (slightly absurd) example, the <bdo> element is used to override the directionality of English text and display it from right to left. In a more realistic environment, this can be helpful when dealing with language scripts that are written from right to left, such as Arabic or Hebrew.
Result
Attributes
The <bdo> element has one attribute:
dir: Specifies the directionality of the text inside the element. The possible values areltr(left to right) andrtl(right to left).
Content
The <bdo> element can contain any text or HTML elements.
Related HTML Elements
- The newer HTML
<bdi>(Bidirectional Text Isolation) element can be used in a similar way to the<bdo>element, the difference being that<bdo>simply reverses the text direction, whereas<bdi>isolates the included text from text surrounding it. This isolation ensures that bidirectional text formatting doesn’t adversely impact the rest of the text (which can happen, especially if numerical and non-alphanumeric characters are involved). The<bdi>element is usually recommended.
Did You Know?
- The
<bdo>element can be combined with the CSSdirectionproperty to control the direction of the text inside the element.
Learn More
