HTML <bdi> element

The <bdi> element represents a span of text that should be isolated from the surrounding text for bidirectional formatting. The letters bdi stand for bidirectional isolation.

This is useful when a page inserts user-supplied text whose direction is not known in advance, such as a username or product name. An English sentence may contain an Arabic or Hebrew name, and punctuation or numbers beside that name can change visual position as the browser resolves the mixture of left-to-right and right-to-left text.

The <bdi> element isolates the enclosed text so that its direction and the direction of the surrounding text are resolved independently. In the example below, this keeps the colon and post count in their intended positions after each username. Without isolation around the Arabic name, the colon and number can appear beside the word “User” instead of beside “posts”.

The global dir attribute defaults to auto on this element, rather than inheriting the parent element's direction. The browser therefore determines the direction from the enclosed text. An author who already knows the direction can specify dir="ltr" or dir="rtl" while retaining the isolation.

Isolation preserves the normal ordering of text within the element. The related <bdo> element serves a different purpose: it overrides the normal bidirectional ordering with an explicitly chosen direction.

Attributes: GLOBALS including dir.

Typical layout:
<ul>
  <li>User <bdi>jcranmer</bdi>: 12 posts.</li>
  <li>User <bdi>إيان</bdi>: 3 posts.</li>
</ul>

Visual representation: