The <bdo> (Bi-Directional Override) element forces its text content to render in a specific direction — left-to-right or right-to-left — overriding the browser's normal automatic direction detection.

Syntax

<bdo dir="rtl">This text is forced right-to-left</bdo>

Deep Dive Course

**`<bdo>`** requires a **`dir`** attribute — `ltr` (left-to-right) or `rtl` (right-to-left) — and forcibly overrides how its content is visually ordered, regardless of what the browser's normal bidirectional (bidi) text algorithm would otherwise decide based on the actual characters. This is different from just setting `dir` on any element for genuinely right-to-left languages like Arabic or Hebrew (which lets the browser apply proper bidi rules); `<bdo>` explicitly forces raw visual reordering, useful mainly for demonstrating bidi behavior or handling unusual edge cases where automatic detection produces the wrong result.

1Understanding <bdo>

`<bdo>` requires a `dir` attribute — ltr (left-to-right) or rtl (right-to-left) — and forcibly overrides how its content is visually ordered, regardless of what the browser's normal bidirectional (bidi) text algorithm would otherwise decide based on the actual characters. This is different from just setting dir on any element for genuinely right-to-left languages like Arabic or Hebrew (which lets the browser apply proper bidi rules); <bdo> explicitly forces raw visual reordering, useful mainly for demonstrating bidi behavior or handling unusual edge cases where automatic detection produces the wrong result.

💡

For actual right-to-left content in a real language like Arabic or Hebrew, set dir="rtl" on a normal container (like the <html> or a <div>) rather than reaching for <bdo> — the browser's standard bidi algorithm already handles real RTL languages correctly.

editor.html

<p>The word is normally: <bdo dir="rtl">HELLO</bdo></p>

localhost:3000

2Practical Example

Here is a real-world application of <bdo> showing how it is used in production HTML.

editor.html

<!-- Correct way to mark a whole document as right-to-left (not using bdo) -->
<html dir="rtl" lang="ar">
  <body>
    <p>مرحبا بالعالم</p>
  </body>
</html>

localhost:3000

3Best Practices

Follow these guidelines when working with <bdo>:

1. Use <bdo> mainly for forcing an explicit override, not for normal RTL-language content

2. Set dir="rtl" on <html> or a container element for genuine right-to-left language support instead

3. Reserve <bdo> for edge cases like mixed-direction text that the automatic algorithm gets wrong

⚠️

Tip: For actual right-to-left content in a real language like Arabic or Hebrew, set dir="rtl" on a normal container (like the <html> or a <div>) rather than reaching for <bdo> — the browser's standard bidi algorithm already handles real RTL languages correctly.

editor.html

<p>The word is normally: <bdo dir="rtl">HELLO</bdo></p>

localhost:3000

Examples

Example 01Basic Usage

<p>The word is normally: <bdo dir="rtl">HELLO</bdo></p>

Example 02Advanced Example

<!-- Correct way to mark a whole document as right-to-left (not using bdo) -->
<html dir="rtl" lang="ar">
  <body>
    <p>مرحبا بالعالم</p>
  </body>
</html>

Best Practices

Use mainly for forcing an explicit override, not for normal RTL-language content
Set dir="rtl" on or a container element for genuine right-to-left language support instead
Reserve for edge cases like mixed-direction text that the automatic algorithm gets wrong

Interview Question

What's the difference between using <bdo dir="rtl"> and simply setting dir="rtl" on a <div> containing Arabic text?▼

Hint: Think about 'forcing raw visual order' versus 'applying correct language-aware bidi rules'.

Setting dir="rtl" on a normal container tells the browser's Unicode bidirectional algorithm to treat that content as right-to-left context, correctly handling real RTL text (including embedded LTR fragments like numbers or English words within Arabic text) according to proper language rules. <bdo dir="rtl"> instead forces the raw visual character order to be strictly reversed, without applying the smarter bidi algorithm's language-aware handling — appropriate for special-case overrides, but not the general way to support an RTL language's real content.

Exercises

EasyPractice using <bdo> in a real scenario.

View Solution

<p>The word is normally: <bdo dir="rtl">HELLO</bdo></p>

Frequently Asked Questions

What's the difference between using <bdo dir="rtl"> and simply setting dir="rtl" on a <div> containing Arabic text?▼

Setting dir="rtl" on a normal container tells the browser's Unicode bidirectional algorithm to treat that content as right-to-left context, correctly handling real RTL text (including embedded LTR fragments like numbers or English words within Arabic text) according to proper language rules. instead forces the raw visual character order to be strictly reversed, without applying the smarter bidi algorithm's language-aware handling — appropriate for special-case overrides, but not the general way to support an RTL language's real content.

Related Functions

font-tag