bdi

The HTML <bdi> element isolates text whose writing direction is unknown. It helps keep surrounding text stable when left-to-right and right-to-left scripts are mixed.

Why bidirectional text needs care

Latin, Japanese, and many other scripts are normally laid out from left to right. Arabic and Hebrew are written from right to left. When a value from an unknown source is placed inside a sentence, its direction can affect the order of nearby punctuation or numbers.

Basic example

<ul>
  <li>User: <bdi>userName</bdi></li>
  <li>User: <bdi>اسم</bdi></li>
</ul>

The browser determines the direction of the isolated content and prevents that choice from changing the surrounding inline text.

bdi and bdo are different

bdi

Isolates a value when its direction is unknown. The browser determines the direction.

bdo

Overrides the direction explicitly. Use it with a dir attribute when you know the desired direction.

<p>Arabic label: <bdo dir="rtl">مرحبا</bdo></p>

Common mistakes

• Assuming bdi translates text or changes its language.
• Using bdo when the direction is actually unknown.
• Leaving user-provided names unisolated in tables, lists, or labels that contain numbers.
• Using CSS direction alone when the semantic isolation of a value is what is needed.

Related pages

• body: contain the document content
• alt: provide alternative text
• charset: declare the document encoding
• HTML reference index