<bdi>

The <bdi> tag is used when we need to isolate a part of the text from the influence of the parent text direction. This is useful when there are multiple languages with different reading directions in the text, for example, when some are read left to right and others right to left.

        
          
          <p>  <bdo dir="rtl">    <bdi lang="ru">Normal text</bdi> |    Mirrored text  </bdo></p>
          <p>
  <bdo dir="rtl">
    <bdi lang="ru">Normal text</bdi> |
    Mirrored text
  </bdo>
</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Here, the <bdo> tag is used with the attribute dir="rtl", so the text inside will go from right to left. But the phrase "Normal text" is isolated, and the text goes left to right.

bdi stands for Bidirectional Isolate.

The <bdi> tag ignores the parent text direction and sets the text inside to automatic direction. This creates isolation—content inside <bdi> does not depend on the external text direction.

Any global attributes can be applied to the <bdi> tag.

By default, the tag has a dir attribute with the value auto. This ensures that the text inside <bdi> is isolated. Even if you try to set another value, for example, rtl, the browser will look only at the contents of <bdi>.

Suppose we are developing an international website and want to display a list of the most active users. For this, we might find such an approach useful:

        
          
          <ul>  <li>    User <bdi lang="en">john_smith78</bdi>:    167 comments  </li>  <li>    User    <bdi lang="en">superPanda</bdi>:    152 comments  </li>  <li>    User <bdi lang="ar">شاب رائع</bdi>:    133 comments  </li></ul>
          <ul>
  <li>
    User <bdi lang="en">john_smith78</bdi>:
    167 comments
  </li>
  <li>
    User
    <bdi lang="en">superPanda</bdi>:
    152 comments
  </li>
  <li>
    User <bdi lang="ar">شاب رائع</bdi>:
    133 comments
  </li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

However, if we replace <bdi> with, say, <b>, we will encounter unexpected behavior:

        
          
          <li>  User <b>شاب رائع</b>:  133 comments.</li>
          <li>
  User <b>شاب رائع</b>:
  133 comments.
</li>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The third user has a login in Arabic, so it is read from right to left. Because of this, the browser assumes that subsequent characters should also be rendered from right to left. We would likely want to avoid such unpredictable behavior, so in such situations, it is wise to isolate usernames or other user-generated content using the <bdi> tag.

The <bdi> tag has no built-in semantics, so for screen readers it is treated as regular text. To make this text accessible, use the lang attribute.

💡 The <bdi> tag should be used when displaying user-generated content, such as usernames or comments, when we are not sure which direction the text will be oriented. Many languages have a right-to-left writing direction, such as Arabic, Hebrew, or Persian.