HTML - <bdi> Tag

HTML <bdi> tag stands for Bidirectional Isolate Element. It differentiates a text from other texts that may be formatted in a different direction. Generally, it is useful when a website dynamically inserts some text and doesn’t know the text's directionality. A text that can contain both left-to-right (LTR) and right-to-left (RTL) character sequences is referred to as bidirectional text.

For example, Latin characters are treated as LTR while Arabic characters are treated as RTL. To know about LTR and RTL check CSS - Direction.

HTML <bdi> tag works in two ways:

The directionality of the embedded text in <bdi> has no effect on the directionality of the surrounding text.
The directionality of embedded text in <bdi> is unaffected by the directionality of the surrounding text.

Syntax

<bdi>...</bdi>

Attribute

HTML bdi tag supports Global and Event attributes of HTML.

Examples of HTML bdi Tag

In these exanples we will witness multiple examples of HTML bdi tag, where each example was defining the characteristics of bdi tag.

Independently embedding Context

In the following example, let’s see the usage of <bdi> tag with LTR and RTL text. We get the winner of the competition using the <bdi> tag. These components instruct the browser to treat the name independently of its embedding context, so the example output is properly ordered.

<!DOCTYPE html>
<html>
<body>
   <ul>
      <li>
         <bdi class="name">اَلأَعْشَى</bdi> - 1st place
      </li>
      <li>
         <bdi class="name">Jerry Cruncher</bdi> - 2nd place
      </li>
   </ul>
 </body>
</html>

Bidirectional algorithm with bdi Element

Here we are creating an HTML document and using the <bdi> tag to display the username with their points. If the browser does not support the bdi tag, the Arabic user's username will confuse the text (the bidirectional algorithm will place the colon and the number "90" next to the word "user" rather than next to the word "points").

<!DOCTYPE html>
<html>
<body>
   <h1>The bdi element</h1>
   <ul>
      <li>User 
         <bdi>hrefs</bdi>: 60 points 
      </li>
      <li>User 
         <bdi>jdoe</bdi>: 80 points 
      </li>
      <li>User 
         <bdi>إيان</bdi>: 90 points 
      </li>
   </ul>
 </body>
</html>

Styling bdi Element

In the following example, we’re creating an HTML document and using the <bdi> tag and the CSS properties to style the content of the bdi tag.

<!DOCTYPE html>
<html>
<head>
   <style>
      bdi{
         color: red;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>The bdi element</h1>
   <ul>
      <li>User 
         <bdi>hrefs</bdi>: 60 points 
      </li>
      <li>User 
         <bdi>jdoe</bdi>: 80 points 
      </li>
      <li>User 
         <bdi>إيان</bdi>: 90 points 
      </li>
   </ul>
 </body>
</html>

Supported Browsers

Tag
bdi	Yes 16.0	Yes 79.0	Yes 10.0	Not Supported	Yes 15.0

html_tags_reference.htm