HTML: bdo, bdi (bidirectional text)

Explain HTML tags bdo and bdi

Explain HTML tags bdo and bdi

ai answer

<bdo> and <bdi> are HTML elements used for handling bidirectional (BiDi) text—text that mixes left-to-right (LTR) languages (like English) with right-to-left (RTL) languages (like Arabic or Hebrew).

<bdo> — Bidirectional Override

The <bdo> element (Bidirectional Override) forces the text inside it to be rendered in a specific direction, overriding the browser’s normal bidirectional algorithm.

• Required attribute: dir
  • dir="ltr" → forces left-to-right
  • dir="rtl" → forces right-to-left

Example:

<p>This text goes left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Key points:

• It overrides the natural direction of the characters.
• The characters themselves are not mirrored (they don’t appear backwards); only the overall reading order changes.
• It is an older element (exists since HTML 4). In many modern cases it is better avoided in favor of more precise techniques, because it can produce unexpected results when mixed with surrounding text.

<bdi> — Bidirectional Isolation

The <bdi> element (Bidirectional Isolation), introduced in HTML5, tells the browser to treat the text inside it in isolation from the surrounding text.

It is especially useful when:

• You are inserting dynamic or user-generated content
• You do not know in advance whether the text is LTR or RTL

How isolation works:

1. The direction of the text inside <bdi> does not affect the surrounding text.
2. The direction of the surrounding text does not affect the text inside <bdi>.

Example (common use case with usernames of unknown direction):

<ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

Without <bdi>, an Arabic name can mess up the punctuation and numbers around it (e.g., the colon and score can appear in the wrong place).

Key Differences

Practical Advice

• Prefer <bdi> when dealing with user-generated or database content of unknown direction.
• Use <bdo> only when you deliberately want to force a direction (rare today).
• You can also control directionality with the global dir attribute or CSS (direction and unicode-bidi), but the semantic HTML elements are clearer and more accessible.

Both elements are inline and support global attributes.