HTML bdo Tag – Control Text Direction

Text on a page often moves from left to right. Some languages move from right to left. HTML gives control for this with the bdo tag.

Understand the <bdo> Tag in HTML

The <bdo> tag means bidirectional override. It forces text to show in a set direction that you decide.

Here is the syntax:

<bdo dir="ltr">Some text here</bdo>
<bdo dir="rtl">Some text here</bdo>

Writers often face mixed scripts on one page. Numbers may appear with Arabic text, or Hebrew text may sit with English text. <bdo> lets you set the flow so each part shows correctly.

The only main attribute of <bdo> is dir. It can take ltr for left-to-right text or rtl for right-to-left text.

All main browsers support <bdo>. It works in Chrome, Edge, Safari, Firefox, and Opera with no extra setup.

The Differences Between <bdo> Tag and CSS Direction

The <bdo> tag forces the flow by HTML itself. CSS direction sets flow by style rules. HTML override has more weight.

Here is a table that shows you the key differences:

You use <bdo> for short words or lines with mixed scripts. You use CSS direction when you want the whole block to follow one flow.

Examples of <bdo> Tag in HTML

Force Left to Right Flow:

<bdo dir="ltr">مرحبا Hello</bdo>

This code sets mixed Arabic and English text into a left-to-right flow. The Arabic word moves out of its normal flow and matches the English word beside it.

Force Right to Left Flow:

<bdo dir="rtl">Hello مرحبا</bdo>

This code forces the same words into a right-to-left flow. The English part appears after the Arabic part in reverse order to match the Arabic flow.

Nested bdo for Mixed Text Control:

<bdo dir="rtl">مرحبا <bdo dir="ltr">12345</bdo></bdo>

This code shows Arabic text with numbers inside. Arabic part flows right to left, but numbers flow left to right.

Wrapping Up

You learned what the <bdo> tag means and how to use it to control text flow. You also saw its attribute and how it differs from CSS direction.

Here is a quick recap:

• <bdo> shows you the text flowed by HTML
• dir attribute sets left to right or right to left
• The CSS direction handles style but <bdo> gives you a direct override

FAQs

<bdo dir="rtl">This text reads right to left</bdo>

<bdo dir="rtl">Hello World</bdo>

/* CSS Example */
p {
  direction: rtl;
}

<p>Normal text <bdo dir="rtl">Reversed text</bdo></p>

Similar Reads