HTML / HTML Tags

HTML <Bdi> Tag

Oct 12, 2022
1 min read
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>
  • Jonathan: 1st place
  • Mark: 2nd place
  • تیز سمی: 3rd place
  • الرجل القوي إيان: 4th place
  • تیز سمی: 5th place

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesNoYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes