Path // www.yourhtmlsource.com → Reference → <bdo>

<bdo>

by Ross Shannon

The <bdo> element (Bidirectional Override) is used to override the current text directionality. It forces the contained text to render in a specific direction, overriding the Unicode bidirectional algorithm. This is particularly useful when dealing with mixed-direction text or when you need explicit control over text rendering.

Clock This page was last updated on 2025-11-17


Syntax

<bdo dir="rtl">text to reverse</bdo>

The element requires both opening and closing tags, and the dir attribute is required to specify the text direction.

Attributes

  • dir (required) - Specifies the text direction:
    • ltr - Left-to-right (for languages like English, French)
    • rtl - Right-to-left (for languages like Arabic, Hebrew)
  • Global attributes - The <bdo> element supports all global attributes such as id, class, style, and lang.

Examples

Reversing Text Direction

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

Result: This text is normal, but this text is reversed.

Forcing Left-to-Right in RTL Context

<p dir="rtl">טקסט בעברית <bdo dir="ltr">ABC123</bdo> המשך טקסט</p>

Technical Code Display

<p>The ISBN is <bdo dir="ltr">978-3-16-148410-0</bdo>.</p>

When to Use

Use the <bdo> element when:

  • You need to override the Unicode bidirectional algorithm
  • Displaying text that must render in a specific direction regardless of content
  • Showing examples of reversed or mirrored text
  • Forcing product codes or identifiers to display correctly
  • Correcting bidirectional text rendering issues

Important considerations:

  • The dir attribute is required - without it, the element has no effect
  • Use sparingly - most bidirectional text issues are better handled by the Unicode algorithm
  • Consider using <bdi> (Bidirectional Isolate) for isolating text without overriding direction
  • Test thoroughly with actual RTL languages to ensure correct rendering
  • <bdi> - Bidirectional Isolate, isolates text without forcing direction
  • <span> - Generic inline container (can use dir attribute)
  • <html> - Can set document-wide text direction
  • <p> - Paragraphs can have their own dir attribute

CSS alternative for visual-only direction changes:

span.reversed { unicode-bidi: bidi-override; direction: rtl; }