bdo

Overrides the current text direction.

Description

The <bdo> (Bidirectional Text Override) element overrides the current directionality of text, causing the text within to be rendered in a specified direction. This element forces text direction regardless of the Unicode Bidirectional Algorithm.

Use <bdo> when you need to explicitly control text direction for display purposes. For isolating text without forcing direction, use <bdi> instead.

Basic Example

Normal text: Hello World

Reversed: Hello World

<p>Normal text: Hello World</p> <p>Reversed: <bdo dir="rtl">Hello World</bdo></p>

LTR Override

Force left-to-right direction within an RTL context:

This paragraph is right-to-left, but this text is forced left-to-right.

<p dir="rtl"> This paragraph is right-to-left, but <bdo dir="ltr">this text is forced left-to-right</bdo>. </p>

RTL Override

Force right-to-left direction for specific text:

The Hebrew word for "peace" is שלום.

<p> The Hebrew word for "peace" is <bdo dir="rtl">שלום</bdo>. </p>

Nested Overrides

BDO elements can be nested to create complex directional layouts:

Outer RTL: Hello Inner LTR: World Back to RTL

<p> <bdo dir="rtl"> Outer RTL: Hello <bdo dir="ltr">Inner LTR: World</bdo> Back to RTL </bdo> </p>

Attributes

Attribute Description
dir Required. The text direction: ltr (left-to-right), rtl (right-to-left)

This element also supports global attributes.

Accessibility

The <bdo> element affects visual presentation only. Screen readers typically read text in its logical order, not the visual order. Be cautious when using <bdo> purely for visual effects, as it may cause confusion for users who cannot see the rendered result.

Related Elements

  • <bdi> - Isolates text without forcing direction