? HTML <bdo> Tag

⚡ Quick Overview

The <bdo> element (Bi-Directional Override) forces a specific text direction inside its scope. By using dir="ltr" or dir="rtl", you override the browser’s normal bidirectional algorithm. This is useful for short runs of mixed text (like codes, numbers, or acronyms) where the default direction would produce confusing visual order.

Remember: <bdo> changes how text is rendered (visual order), not the underlying characters. It should be used sparingly and precisely.

? Key Concepts

Bi-Directional text: Pages can contain both left-to-right (LTR) and right-to-left (RTL) scripts.
<bdo> override: Forces a specific direction (dir="ltr" or dir="rtl") for a short span of text.
Required attribute: dir is mandatory on <bdo>; without it, the tag has no effect.
Scope: Only affects the wrapped text, not the rest of the paragraph.
Use sparingly: Prefer natural direction or dir="auto"/<bdi> for unknown user input.
CSS equivalent: direction + unicode-bidi: bidi-override can emulate <bdo>.

? Syntax & Basic Usage

Typical usage for overriding a small run of text:

? View Basic Syntax

<p>Normal: Hello 123 ABC</p>
<p>With BDO (rtl): <bdo dir="rtl">Hello 123 ABC</bdo></p>

In real projects you combine base element directions with local overrides:

? View More Examples

<!-- In an RTL paragraph, force a product code to LTR -->
<p dir="rtl">الرمز: <bdo dir="ltr">SKU-AX9-42</bdo></p>

<!-- CSS equivalent of BDO -->
<span style="direction: rtl; unicode-bidi: bidi-override;">Hello 123 ABC</span>

? Related: <bdi> and the dir Attribute

<bdi> (Bi-Directional Isolation) isolates a span of text so that its inherent direction doesn’t disturb surrounding punctuation and layout. Very useful for unknown usernames or place names.
dir on elements sets the base direction (ltr, rtl, or auto) on blocks such as <html> or <p>.
CSS parity: direction: rtl; unicode-bidi: bidi-override; is effectively the same as <bdo dir="rtl"> for that span.

? Code Example: BDO in Action

? View Code Example

<p>Normal: Hello 123 ABC</p>
<p>With BDO (rtl): <bdo dir="rtl">Hello 123 ABC</bdo></p>

<!-- In an RTL paragraph, force a product code to LTR -->
<p dir="rtl">الرمز: <bdo dir="ltr">SKU-AX9-42</bdo></p>

<!-- CSS equivalent of BDO -->
<span style="direction: rtl; unicode-bidi: bidi-override;">Hello 123 ABC</span>

? Live Output / Interactive Demo

?️ Toggle BDO Direction

ℹ️ Numbers often stay LTR even in RTL text.

Sample: Hello 123 ABC مرحبا

? RTL Paragraph with an LTR Code

النص مع كود المنتج: SKU-AX9-42

Without the <bdo dir="ltr"> override, the hyphens and digits in the product code might appear in a strange order when mixed inside RTL text.

? Unknown Usernames with <bdi>

Author: محمد — posted 5 min ago

Author: Alex — posted 2 min ago

Using <bdi> keeps the em dash and “posted …” phrase stable regardless of whether the name is LTR or RTL.

? Tips & Best Practices

Wrap only the problematic run. Apply <bdo> to short spans (codes, acronyms), not whole paragraphs.
Always set dir. <bdo> without dir does nothing.
Prefer isolation for unknown text. For usernames or user-generated text, use <bdi> or dir="auto".
Remember it’s visual only. <bdo> changes display order, not the actual characters, language, or pronunciation.
Avoid nested overrides. Stacking <bdo dir="rtl">...<bdo dir="ltr">... can quickly become unreadable.
Match the page base direction. Set <html dir="ltr|rtl"> for pages written primarily in one direction.
Test with assistive tech. Excessive overrides may be confusing for screen readers, so test with real AT where possible.
Use the CSS equivalent when needed. For styling-only cases, direction plus unicode-bidi: bidi-override can be applied via CSS instead of HTML.

? Try It Yourself

Create a paragraph with dir="rtl" and wrap a left-to-right SKU in <bdo dir="ltr">. Compare the display with and without <bdo>.
Replace a <bdo dir="rtl"> span with a <span> that uses style="direction: rtl; unicode-bidi: bidi-override;" and confirm the behavior is the same.
Build a small list of mixed usernames (English + Arabic/Hebrew) and show it once with plain text and once with <bdi> around each name to observe punctuation flow.
Experiment with dir="auto" on a <span> that you dynamically fill with user text (e.g., from a form field) and see how the browser chooses direction automatically.

? Summary

<bdo> (Bi-Directional Override) forces a specific visual direction (ltr or rtl) for a span of text.
Use it for short problematic runs (codes, acronyms, mixed text) where the default bidi algorithm gives confusing results.
dir is required on <bdo>, and you should avoid wrapping large blocks or entire pages.
<bdi> and dir on elements work alongside <bdo> to handle mixed-direction content safely.
Thoughtful use of these tools keeps multilingual interfaces readable and accessible for all users.

HTML bdo Tag