<bdo> - The Bidirectional Text Override Element

The `<bdo>` Element

Inline HTML 4.0

The bidirectional text override element explicitly overrides the current text direction, forcing text to render in a specified direction (left-to-right or right-to-left).

Quick Example

<p>This text is normal.</p>
<p>This text is <bdo dir="rtl">reversed</bdo>.</p>
<p>Arabic name: <bdo dir="rtl">محمد أحمد</bdo></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>This text is normal.</p>
<p>This text is <bdo dir="rtl">reversed</bdo>.</p>
<p>Arabic name: <bdo dir="rtl">محمد أحمد</bdo></p>

Syntax

<bdo dir="ltr">text</bdo>
<bdo dir="rtl">text</bdo>

The dir attribute is required and must be either ltr (left-to-right) or rtl (right-to-left).

Attributes

Required Attributes

Attribute	Description	Values
`dir`	Text direction	`ltr` (left-to-right), `rtl` (right-to-left)

Common Use Cases

Reversing Text Direction

<p>Normal: HELLO WORLD</p>
<p>Reversed: <bdo dir="rtl">HELLO WORLD</bdo></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Normal: HELLO WORLD</p>
<p>Reversed: <bdo dir="rtl">HELLO WORLD</bdo></p>

Displaying RTL Languages

<p>Arabic: <bdo dir="rtl">مرحبا بك</bdo></p>
<p>Hebrew: <bdo dir="rtl">שלום</bdo></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Arabic: <bdo dir="rtl">مرحبا بك</bdo></p>
<p>Hebrew: <bdo dir="rtl">שלום</bdo></p>

Mixed Direction Content

<p>English text with <bdo dir="rtl">embedded RTL text</bdo> continues here.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>English text with <bdo dir="rtl">embedded RTL text</bdo> continues here.</p>

Teaching Languages

<table>
<tr>
  <th>English</th>
  <th>Arabic</th>
</tr>
<tr>
  <td>Hello</td>
  <td><bdo dir="rtl">مرحبا</bdo></td>
</tr>
<tr>
  <td>Thank you</td>
  <td><bdo dir="rtl">شكرا</bdo></td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<tr>
  <th>English</th>
  <th>Arabic</th>
</tr>
<tr>
  <td>Hello</td>
  <td><bdo dir="rtl">مرحبا</bdo></td>
</tr>
<tr>
  <td>Thank you</td>
  <td><bdo dir="rtl">شكرا</bdo></td>
</tr>
</table>

Technical Demonstrations

<p>Original order: 1 2 3 4 5</p>
<p>Reversed order: <bdo dir="rtl">1 2 3 4 5</bdo></p>
<p>Note: The numbers appear reversed!</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Original order: 1 2 3 4 5</p>
<p>Reversed order: <bdo dir="rtl">1 2 3 4 5</bdo></p>
<p>Note: The numbers appear reversed!</p>

Quotations in Different Directions

<blockquote>
<p><bdo dir="rtl">النص العربي يُقرأ من اليمين إلى اليسار</bdo></p>
<footer>— Arabic proverb</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote>
<p><bdo dir="rtl">النص العربي يُقرأ من اليمين إلى اليسار</bdo></p>
<footer>— Arabic proverb</footer>
</blockquote>

<!-- Explicit direction override -->
<p>Display <bdo dir="rtl">this text</bdo> right-to-left</p>

Use when you know the direction and want to force it.

<!-- Isolate unknown direction text -->
<p>Username: <bdi>أحمد</bdi> logged in</p>

Use when direction is unknown (user-generated content).

`<bdo>` vs `dir` Attribute

<bdo>
dir attribute

<!-- Override specific span of text -->
<p>English <bdo dir="rtl">RTL text</bdo> English</p>

Affects only the wrapped content.

<!-- Set direction for entire element -->
<p dir="rtl">This entire paragraph is RTL</p>

Affects the entire element and its children.

Practical Examples

Document Translation Tables

<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #f0f0f0; }
</style>

<table>
<tr>
  <th>English</th>
  <th>Arabic</th>
  <th>Hebrew</th>
</tr>
<tr>
  <td>Welcome</td>
  <td><bdo dir="rtl">مرحبا</bdo></td>
  <td><bdo dir="rtl">ברוך הבא</bdo></td>
</tr>
<tr>
  <td>Goodbye</td>
  <td><bdo dir="rtl">وداعا</bdo></td>
  <td><bdo dir="rtl">להתראות</bdo></td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #f0f0f0; }
</style>

<table>
<tr>
  <th>English</th>
  <th>Arabic</th>
  <th>Hebrew</th>
</tr>
<tr>
  <td>Welcome</td>
  <td><bdo dir="rtl">مرحبا</bdo></td>
  <td><bdo dir="rtl">ברוך הבא</bdo></td>
</tr>
<tr>
  <td>Goodbye</td>
  <td><bdo dir="rtl">وداعا</bdo></td>
  <td><bdo dir="rtl">להתראות</bdo></td>
</tr>
</table>

Address Formatting

<address>
English Address:<br>
123 Main St, New York, NY 10001
</address>

<address>
<bdo dir="rtl">
  العنوان بالعربية:<br>
  شارع الملك فيصل، الرياض 12345
</bdo>
</address>

Result

Interactive code playground requires JavaScript. Here's the code:

<address>
English Address:<br>
123 Main St, New York, NY 10001
</address>

<address>
<bdo dir="rtl">
  العنوان بالعربية:<br>
  شارع الملك فيصل، الرياض 12345
</bdo>
</address>

Accessibility

Screen readers respect the dir attribute and will read the text in the specified direction.

Language Declaration

Always combine <bdo> with the lang attribute for proper accessibility:

<p>Arabic: <bdo dir="rtl" lang="ar">مرحبا</bdo></p>
<p>Hebrew: <bdo dir="rtl" lang="he">שלום</bdo></p>

Don’t Overuse

Only use <bdo> when you need to override the default direction. For most RTL content, the dir attribute on the container is sufficient:

Unnecessary
Better

<p><bdo dir="rtl">كل هذا النص بالعربية</bdo></p>

<p dir="rtl" lang="ar">كل هذا النص بالعربية</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	5+	Full support

The <bdo> element has excellent browser support across all modern and legacy browsers.

Isolates text with unknown direction. Learn more →

dir attribute

Global attribute to set text direction. Learn more →

<bdo> - The Bidirectional Text Override Element

The <bdo> Element

Quick Example

Syntax

Attributes

Required Attributes

Common Use Cases

Reversing Text Direction

Displaying RTL Languages

Mixed Direction Content

Teaching Languages

Technical Demonstrations

Quotations in Different Directions

<bdo> vs <bdi>

<bdo> vs dir Attribute

Practical Examples

Document Translation Tables

Address Formatting

Accessibility

Screen Reader Behavior

Language Declaration

Don’t Overuse

Browser Support

Related Elements

Specifications

The `<bdo>` Element

`<bdo>` vs `<bdi>`

`<bdo>` vs `dir` Attribute