<bdi>

Описание

Элемент HTML <bdi> представляет собой часть текста, который должен быть изолирован от окружающего текста, для целей двунаправленного форматирования. Элемент <bdi> полезен при встраивании пользовательского контента с неизвестной направленностью. В HTML документе могут одновременно использоваться языки с направлением письма как  слево направо, так и справо налево. Тег <bdi> дает указание браузеру для правильного отображения такого такого текста. 

Внимание! Не все браузеры правильно отображают данный элемент.

Синтаксис

<bdi>текст<bdi>

Атрибуты

Для этого тега доступны глобальные атрибуты и события.

Спецификация

версия HTML 3.2 HTML 4.01 HTML 5.0 XHTML 1.0 XHTML 1.1
поддержка нет нет да нет нет

Поддержка браузерами

браузер IE Chrome Opera Firefox Safari
версия 0.0+ 2.0+ 9.2+ 2.0+ 3.0+
поддержка нет да нет да нет

Пример

Пример №1. Используем тег <bdi>, чтобы правильно отобразить имя пользователя и кол-во сообщений от него  с использованием двунаправленного текста.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример элемента bdi</title>
 </head>
<body>
 <ul> 
  <li> Пользователь <bdi> jcranmer </bdi> : 12 сообщений.
  <li> Пользователь <bdi> hober </bdi> : 5 сообщений.
  <li> Пользователь <bdi> إيان </bdi> : 3 сообщения.
</ul>
</body>
</html>
Пример отображения двунаправленного текста с использованием тега <bdi>
Рис.1 Пример отображения двунаправленного текста с использованием тега <bdi>

Пример №2. Заменим тег <bdi> тегом <b>. Теперь видно, что браузер отобразил информация не совсем верно из-за текста с именем пользователя, который читается слева направо.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример элемента bdi</title>
 </head>
<body>
 <ul> 
  <li> Пользователь <b> jcranmer </b> : 12 сообщений.
  <li> Пользователь <b> hober </b> : 5 сообщений.
  <li> Пользователь <b> إيان </b> : 3 сообщения.
</ul>
</body>
</html>
Пример отображения двунаправленного текста без использования тега <bdi>
Рис.2 Пример отображения двунаправленного текста без использования тега <bdi>