<bdo>

<bdo> overrides the bidirectional presentation of its phrasing content. Use it for an intentional directional override, rather than for ordinary Arabic/Hebrew text or unknown-direction names.

Override a short Latin sample

The source text remains ABC 123. Dir=rtl instructs the browser to present that sequence using a right-to-left override. The first paragraph supplies the normal reference.

<p>Normal: ABC 123</p>
<p>Override: <bdo dir="rtl">ABC 123</bdo></p>

p {
  font-size: 1.5rem;
}

Show an override beside its logical source

A demonstration may need to show both forms. The label explains the visual transformation without asking the reader to infer it. Essential information remains available in the normal source form.

<dl>
  <dt>Logical source</dt>
  <dd>sample-42</dd>
  <dt>RTL override</dt>
  <dd><bdo dir="rtl">sample-42</bdo></dd>
</dl>

dt {
  font-weight: bold;
}
dd {
  margin-block: 0.5rem;
}

Attributes and valid use

Dir is required on bdo and must be ltr or rtl; auto is not a valid override choice. The element contains phrasing content and belongs in a phrasing-content context. The override changes rendering, not the stored character sequence, language, or semantic importance.

Common mistakes

For normal right-to-left prose, put dir=rtl on the appropriate containing element and let the bidirectional algorithm work. For an unknown-direction name, use bdi. An override can make identifiers misleading or difficult to read; do not apply it as decorative styling to essential labels.

Learn direction and text-align.

Sources and browser support

MDN: bdo describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

HTML Standard: bdo defines its content model and direction behavior.