HTML bdi Tag - Learn HTML

The HTML <bdi> tag (the name stands for bi-directional isolation) is one of the HTML5 elements. It marks a span of text that may run in a different writing direction from the text around it, and isolates it so that the browser's bidirectional algorithm treats it as a separate, self-contained unit.

The classic use case is rendering a dynamic value of unknown directionality — a username, a product name, or any string pulled from a database — inside a left-to-right (LTR) sentence. You can't know in advance whether that value is English (John), Arabic (أحمد), or Hebrew (דוד). Without isolation, an RTL value can "leak" out and reorder the LTR characters next to it, garbling the rest of the line. Wrapping the value in <bdi> prevents that.

<p>User <bdi>أحمد</bdi> scored 90 points.</p>

Here أحمد keeps its own right-to-left order, while the rest of the sentence — including the score and surrounding words — stays correctly left to right.

Why bidirectional text needs isolation

Bidirectional text mixes sequences of right-to-left (RTL) and left-to-right (LTR) characters. To lay it out, browsers run the Unicode Bidirectional Algorithm, which assigns each character a directionality. Some characters — many punctuation marks, digits, and spaces — are neutral: their direction is inferred from their neighbours.

That inference is the problem. When a neutral character (such as the space and number after a name) sits next to an RTL run, the algorithm can pull it into the RTL flow, so a trailing score or punctuation jumps to the wrong side of the line. <bdi> fixes this by putting an isolation boundary around the embedded text: characters inside it can't influence the direction of characters outside it, and vice versa.

In short, <bdi> wraps a span of text and guarantees:

The directionality of text inside the <bdi> doesn't affect the surrounding text.
The directionality of the surrounding text doesn't affect the text inside the <bdi>.

Before and after: seeing the difference

The example below renders the same dynamic-looking string twice. The first line uses a plain <span>; the second wraps it in <bdi>. With a right-to-left value, the plain <span> version lets the trailing text drift to the wrong side, while the <bdi> version stays readable.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Without bdi vs. with bdi</h1>

    <!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
    <p>User <span>إيان</span>: 90 points.</p>

    <!-- WITH isolation: the name is self-contained, the rest stays LTR -->
    <p>User <bdi>إيان</bdi>: 90 points.</p>
  </body>
</html>

Try it Yourself »

Run the example: in the first paragraph the colon and number can be pulled to the wrong side of the Arabic name; in the second, <bdi> keeps : 90 points. correctly to the right.

`<bdi>` vs. `dir="auto"`

You might wonder why you can't just put dir="auto" on a <span> instead. Setting dir="auto" does ask the browser to guess the element's own direction from its content — but on a normal inline element it does not create an isolation boundary, so the element can still affect the layout of the text around it.

The <bdi> element does both at once: it auto-detects direction and isolates. In fact, <bdi> behaves like a <span dir="auto"> that is additionally isolated, which is exactly what you want for an embedded value of unknown direction. Using <bdi> makes the intent clear and removes the need to set the attribute manually.

`<bdi>` vs. `<bdo>`

<bdi> is often confused with the <bdo> (bi-directional override) element, but they do opposite jobs:

<bdo> forces a direction. You must give it a dir attribute (dir="rtl" or dir="ltr"), and it overrides the algorithm to render the text in exactly that direction.
<bdi> detects and isolates. It does not reverse the text. It lets the algorithm decide the direction of the contained text on its own, while shielding it from — and shielding the page from — the surrounding text.

Use <bdo> when you know the direction and want to force it; use <bdi> when the direction is unknown (dynamic content) and you want safe, automatic handling.

Syntax

The <bdi> tag comes in pairs. The content is written between the opening (<bdi>) and closing (</bdi>) tags:

<bdi>Some text of unknown directionality</bdi>

Default CSS rendering

Browsers apply this default style to the element:

bdi {
  display: inline;
  unicode-bidi: isolate;
}

The unicode-bidi: isolate value is what creates the isolation boundary described above. You generally shouldn't change unicode-bidi on a <bdi>, but you can style it like any inline element:

bdi {
  color: blue;
  font-weight: bold;
}

Attributes

The <bdi> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <bdi> Tag

bdi {
  color: blue;
  font-weight: bold;
}

Practice

What is the purpose of the HTML bdi element?

It isolates a span of text whose direction is unknown so it does not affect the direction of the surrounding text.It creates bold text in HTML.It represents a line break in HTML text.It forces the contained text to render right-to-left regardless of its content.