HTML Bdi Tag

The <bdi> tag stands for "Bi-Directional Isolation."

It is used in HTML when you want to protect a piece of text from being affected by the direction of surrounding text. In simpler words, it makes sure that the direction of the text (left-to-right or right-to-left) stays correct and doesn’t get mixed up, even if the surrounding content is in a different language.

Why Use the <bdi> Tag?

In web pages that mix multiple languages — especially left-to-right (LTR) like English and right-to-left (RTL) like Arabic or Hebrew — things can get misaligned or jumbled up.

<bdi> tag isolates text direction, so names or words from different languages don't mess up the layout.

Syntax -

<bdi>Text goes here</bdi>

It’s a container tag, so you use both an opening and closing tag.

Whatever text you wrap inside <bdi> will be treated as an isolated block, and the browser will automatically detect and apply the correct direction for that piece of text.

Example -

Scenario - Example Using <bdi> Tag

<!DOCTYPE html>
<html>
	<head>
		<title>bdi text example.. </title>
	</head>
	<body>
		<ul>
		  <li>User: <bdi>שלום</bdi> - Message received</li>
		  <li>User: <bdi>Alice</bdi> - Message received</li>
		  <li>User: <bdi>علي</bdi> - Message received</li>
		</ul>
	</body>
</html>

Output -

User: שלום - Message received
User: Alice - Message received
User: علي - Message received

Explaining Example -

Here’s what happens:

The Arabic text inside <bdi> is rendered correctly in RTL.
The rest of the line (like "User" and "Score") stays in LTR.

Difference Between <bdi> and <bdo>

People often get confused between <bdi> and <bdo>, so here’s a quick comparison:

Tag	What It Does	Who Sets Direction?
<bdi>	Isolates text and lets the browser decide direction automatically	Browser detects it
<bdo>	Overrides direction completely	You must set it manually using dir