<bdi>

Тег <bdi> используется, когда нам нужно изолировать часть текста от влияния направления текста родителя. Это полезно, когда в тексте встречается несколько языков с разным направлением чтения, например, когда некоторые читаются слева направо, а другие — справа налево.

        
          
          <p>  <bdo dir="rtl">    <bdi lang="ru">Обычный текст</bdi> |    Зеркальный текст  </bdo></p>
          <p>
  <bdo dir="rtl">
    <bdi lang="ru">Обычный текст</bdi> |
    Зеркальный текст
  </bdo>
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Здесь используется тег <bdo> с атрибутом dir="rtl", поэтому текст в нём будет идти справа налево. Но фраза «Обычный текст» изолирована, и текст идёт слева направо.

bdi означает Bidirectional Isolate — двунаправленная изоляция.

Тег <bdi> игнорирует направление текста родителя и для текста внутри устанавливает автоматическое направление. Таким образом создаётся изоляция — контент внутри <bdi> не зависит от направления текста снаружи.

К тегу <bdi> можно применить любые глобальные атрибуты.

По умолчанию у тега есть атрибут dir со значением auto. Благодаря ему текст внутри <bdi> изолирован. Даже если попробуете задать другое значение, например, rtl, браузер будет смотреть только на содержимое <bdi>.

Предположим, мы разрабатываем международный сайт и хотим вывести список самых активных пользователей. Для этого нам может пригодиться такой подход:

        
          
          <ul>  <li>    Пользователь <bdi lang="en">john_smith78</bdi>:    167 комментариев  </li>  <li>    Пользователь    <bdi lang="en">superPanda</bdi>:    152 комментария  </li>  <li>    Пользователь <bdi lang="ar">شاب رائع</bdi>:    133 комментария  </li></ul>
          <ul>
  <li>
    Пользователь <bdi lang="en">john_smith78</bdi>:
    167 комментариев
  </li>
  <li>
    Пользователь
    <bdi lang="en">superPanda</bdi>:
    152 комментария
  </li>
  <li>
    Пользователь <bdi lang="ar">شاب رائع</bdi>:
    133 комментария
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Однако если мы заменим <bdi> на, скажем, <b>, то мы столкнёмся с неожиданным поведением:

        
          
          <li>  Пользователь <b>شاب رائع</b>:  133 комментария.</li>
          <li>
  Пользователь <b>شاب رائع</b>:
  133 комментария.
</li>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У третьего пользователя логин на арабском языке, поэтому он читается справа налево. Из-за этого браузер считает, что следующие за ним символы также нужно вывести справа налево. Скорее всего, мы бы хотели избавиться от такого непредсказуемого поведения, поэтому в подобных ситуациях стоит изолировать логины или иной генерируемый пользователем контент при помощи тега <bdi>.

У <bdi> нет встроенной семантики, поэтому для скринридеров это обычный текст. Чтобы такой текст стал доступным, используйте атрибут lang.

💡 Тег <bdi> стоит использовать, если мы выводим сгенерированный пользователями контент, такой как логин или комментарий, и мы не уверены, в каком направлении будет идти этот текст. Многие языки имеют направление письменности справа налево, например, арабский, иврит или персидский.