HTML <Bdi> Tag

Definition

The <bdi> element, or Bidirectional Isolate Element, is used to tell the browser’s bidirectional algorithm to treat it in isolation from its surrounding text.

Example

<ul>
   <li><bdi class="name">Jonathan</bdi>: 1st place</li>
   <li><bdi class="name">Mark</bdi>: 2nd place</li>
   <li><span class="name">تیز سمی</span>: 3rd place</li>
   <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
   <li><span class="name" dir="auto">تیز سمی</span>: 5th place</li>
</ul>

Usage

• The element is useful when embedding content with an unknown text direction. As you can see in the example above, Arabic names can confuse the bidirectional text algorithm.

Attributes

The <bdi> element only supports the Global Attributes.

There is one minor difference in that the dir attribute defaults to the value auto.

Best Practices

• If embedding text that may have characters arranged in a left-to-right or right-to-left sequence then it is recommended to wrap that text in <bdi> tags so that it does not influence the directionality of the surrounding text.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile