The <bdo> Element
As defined in the HTML Living Standard, the <bdo> (Bi-Directional Override) element represents explicit text directionality formatting. It allows authors to override the Unicode bidirectional algorithm.
Normal text direction.
This text will go from right to left.
<p>This paragraph will go from right to left:
<bdo dir="rtl">Right-to-Left content</bdo>
</p>
View HTML Living Standard: The bdo element
The dir Attribute
The dir attribute is mandatory for the <bdo> element. It specifies the direction of the text inside the element.
ltr: Specifies Left-to-Right direction.rtl: Specifies Right-to-Left direction.
WCAG Requirement: Semantic Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <bdo>, you explicitly define the relationship between the visual display order and the underlying content. This ensures that browsers and assistive technologies correctly process text that requires a manual override of standard flow rules.
BDO vs. BDI
It is important to use the correct tool for the job. While they both handle text direction, they serve different purposes:
<bdo>: Used when you know the direction and want to force it.<bdi>: Used when you don't know the direction (e.g., user-generated content) and want the browser to isolate it safely.
A11y Warning: Legibility
Misusing <bdo> can make text completely unreadable if applied to scripts that are not intended to be reversed. Only use it when a specific linguistic or technical requirement necessitates an override of the default bidirectional algorithm.