HTML Bdo Tag

The <bdo> tag stands for Bi-Directional Override.

It is used when you want to force the direction of the text — either left-to-right (LTR) or right-to-left (RTL) — no matter what the natural direction of the text is. This tag is especially useful when working with languages that use different writing directions, like Arabic (RTL) or English (LTR).

Why Use the <bdi> Tag?

In multilingual websites, sometimes the natural writing direction of a word or sentence can conflict with the rest of the content. This can lead to misaligned text, confusing layouts, or text that looks reversed.

<bdo> tag forces text direction to be either LTR or RTL and fixes layout issues when working with mixed languages.

Syntax -
<bdo>.. text here.. </bdo>
Example -

Scenario1 - Forcing Right-to-Left Display

<p><bdo dir="rtl">Hello, world!</bdo></p>

Hello, world!

This will reverse the display order, and you’ll see the text rendered from right to left — although it still reads as "Hello, world!", the letters appear from right to left on the screen.

Scenario2 - Practical Example: Mixing Directions

<!DOCTYPE html> 
<html>
	<head>
		<title> Bi-Directional override element example.. </title>
	</head>
	<body>
		<p>Usernames:

		<ul>
		  <li><bdo dir="ltr">مرحبا123</bdo></li>
		  <li><bdo dir="rtl">JohnDoe</bdo></li>
		</ul>
	</body>
</html>
Output -

Usernames:

  • مرحبا123
  • JohnDoe
Explaining Example -

In this example:

  • The first item will show Arabic text flowing left-to-right even though it's naturally right-to-left.
  • The second item will show English text flowing right-to-left, which is the opposite of its default direction.