<bdi>

<bdi> isolates a run of bidirectional text from the surrounding sentence. It is useful for names or identifiers whose direction is unknown when the page is authored. It contains phrasing content and can appear wherever phrasing content is allowed.

Keep an unknown-direction name isolated

The Arabic name has its own directional context. The English label, colon, and score remain outside that context.

<ul>
  <li>User <bdi>سما</bdi>: 12 points</li>
  <li>User <bdi>Alex</bdi>: 9 points</li>
</ul>

li {
  margin-block: 0.75rem;
}

Compare with an explicit direction

Bdi defaults to dir=auto rather than inheriting the surrounding direction. You can specify ltr or rtl when the content direction is known. Auto uses a directional heuristic; it is not language detection or translation.

<p lang="ar" dir="rtl">معرّف المستخدم: <bdi dir="ltr">user-42</bdi></p>

p {
  padding: 0.75rem;
  border: 1px solid #94a3b8;
}

Common mistakes

Do not use bdi to reverse text deliberately; that is the distinct bdo override. Prefer an existing semantic element with dir=auto when it already describes the content, such as cite for a work title. Isolation affects visual direction; it does not supply an accessible name, language, or security boundary. Keep the real characters in logical source order.

Use lang when the language is known, and inspect punctuation with realistic mixed-direction data. Learn direction and cite.

Sources and browser support

MDN: bdi describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

HTML Standard: bdi defines its content model and direction behavior.