<bdo>

Overrides the current text direction

Definition and Usage

The <bdo> tag stands for Bi-Directional Override. It is used to override the current text direction of the content.

This tag forces the text to be displayed in a specific direction, regardless of the Unicode directionality of the characters.

💡 Important: The dir attribute is REQUIRED when using the <bdo> tag. Without it, the tag won't work as intended.

Tip: Use <bdo> when you need to intentionally reverse or set the text direction. For automatic isolation of text with unknown direction, use <bdi> instead.

Browser Support

The <bdo> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The <bdo> tag also supports the Global Attributes in HTML.

The required attribute for <bdo> is:

Attribute	Value	Description
dir REQUIRED	`ltr` `rtl`	Required. Specifies the text direction inside the <bdo> element. `ltr` - Left-to-right text direction `rtl` - Right-to-left text direction

Understanding Text Direction

What is Text Direction?

LTR (Left-to-Right): Used by most languages including English, Spanish, French, German, etc. Text flows from left to right.

RTL (Right-to-Left): Used by languages like Arabic, Hebrew, Persian, and Urdu. Text flows from right to left.

Visual Direction Examples

LTR (Left-to-Right):
→ This text flows from left to right →

:RTL (Right-to-Left)
← تتدفق هذه الكتابة من اليمين إلى اليسار ←

Examples

Basic Right-to-Left Override

Reverse English text to demonstrate RTL:

Example

<p>Normal text: This is a test</p>
<p>Reversed text: <bdo dir="rtl">This is a test</bdo></p>

Output:

Normal text: This is a test

Reversed text: This is a test

Left-to-Right Override

Force LTR direction on RTL text:

Example
<p>Normal Arabic: مرحبا</p>
<p>Forced LTR: <bdo dir="ltr">مرحبا</bdo></p>

Mixing Directions

Combine normal and reversed text in the same paragraph:

Example

<p>
  This text is normal, but
  <bdo dir="rtl">this part is reversed</bdo>,
  and this is normal again.
</p>

Output:

This text is normal, but this part is reversed, and this is normal again.

Displaying Palindromes

Show how palindromes look in different directions:

Example
<p>Palindrome LTR: <bdo dir="ltr">A man a plan a canal Panama</bdo></p>
<p>Palindrome RTL: <bdo dir="rtl">A man a plan a canal Panama</bdo></p>

Email Addresses

Force LTR for email addresses in RTL context:

Example
<p dir="rtl">
  البريد الإلكتروني: <bdo dir="ltr">user@example.com</bdo>
</p>

Phone Numbers

Display phone numbers correctly in RTL text:

Example
<p dir="rtl">
  رقم الهاتف: <bdo dir="ltr">+1-555-123-4567</bdo>
</p>

Dates and Times

Ensure dates display in correct order:

Example
<p dir="rtl">
  التاريخ: <bdo dir="ltr">01/15/2025</bdo>
</p>
<p dir="rtl">
  الوقت: <bdo dir="ltr">10:30 AM</bdo>
</p>

URLs and File Paths

Display technical text in RTL documents:

Example
<p dir="rtl">
  الموقع: <bdo dir="ltr">https://www.example.com/page.html</bdo>
</p>
<p dir="rtl">
  المسار: <bdo dir="ltr">C:\Users\Documents\file.txt</bdo>
</p>

Code Snippets in RTL Text

Display code correctly in right-to-left documents:

Example
<p dir="rtl">
  استخدم الكود التالي:
  <bdo dir="ltr"><code>console.log("Hello World");</code></bdo>
</p>

Creative Typography

Create visual effects with reversed text:

Example

<div style="text-align: center; font-size: 24px; font-weight: bold;">
  <p><bdo dir="ltr">MIRROR</bdo></p>
  <p><bdo dir="rtl">MIRROR</bdo></p>
</div>

Output:

MIRROR

Try it Yourself

Interactive Example

See how <bdo> changes text direction:

Original Text (LTR):

Hello World 123

Reversed with dir="rtl":

Hello World 123

Mixed Directions:

This is reversed text in a sentence.

Try in Code Playground

When to Use <bdo>

Technical content in RTL documents: Force LTR for URLs, email addresses, file paths, and code
Intentional text reversal: When you want to deliberately reverse text for visual effects
Mixed-direction documents: When embedding content that needs a different direction than its container
Data display: Phone numbers, dates, and numeric data in RTL context
Special formatting: Creating mirror effects or artistic typography
Language-specific requirements: When you know the exact direction needed

Best Practices

Always include the dir attribute - The <bdo> tag requires dir="ltr" or dir="rtl"
Use for known directions - Only use when you know the exact direction needed
Don't overuse - Only apply to content that actually needs direction override
Test with actual text - Test with real Arabic, Hebrew, or other RTL text
Consider accessibility - Screen readers handle <bdo> differently, so use appropriately
Validate your code - Ensure the dir attribute is present and has valid values
Use semantic HTML - Combine with appropriate semantic elements for better structure

Difference: <bdo> vs <bdi>

<bdo> - Bi-Directional Override

Forces a specific direction
Requires dir attribute
You control the direction explicitly
Used when direction is known
Best for intentional overrides
Works in all browsers

<bdo dir="rtl">Text</bdo>

<bdi> - Bi-Directional Isolation

Isolates text automatically
No required attributes
Browser determines direction
Used when direction is unknown
Best for user-generated content
HTML5 feature (newer)

<bdi>Text</bdi>

Quick Decision Guide:

Use <bdo> when you know the text direction and want to force it
Use <bdi> when text direction is unknown (user input, database content)

Common Use Cases

Technical Data in RTL

Use <bdo dir="ltr"> for URLs, emails, file paths, and code in Arabic or Hebrew documents.

Visual Effects

Create mirror text effects, reversed logos, or artistic typography using <bdo dir="rtl">.

Multilingual Content

Embed LTR content in RTL documents or vice versa while maintaining proper display.

Numeric Data

Ensure phone numbers, dates, times, and other numeric data display correctly in RTL contexts.

Related Tags

<bdi>
Isolates text with unknown direction
<span>
Generic inline container
<p>
Defines a paragraph (supports dir attribute)