<bdi> HTML-элемент двунаправленной изоляции

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

Попробуйте

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</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>

html {
  font-family: sans-serif;
}

bdi {
  /* Add your styles here */
}

.name {
  color: red;
}

Двунаправленный текст — это текст, который может содержать как последовательности символов, расположенных слева направо (LTR), так и последовательности, расположенные справа налево (RTL), например цитату на арабском языке внутри строки на английском. Для обработки такого текста браузеры реализуют алгоритм двунаправленного текста Unicode. В этом алгоритме символам назначается направление по умолчанию: например, латинские символы считаются направленными слева направо, а арабские — справа налево. Некоторые другие символы (например, пробелы и знаки препинания) считаются нейтральными, и их направление определяется направлением окружающих символов.

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

Элемент <bdi> используется для выделения фрагмента текста и указывает алгоритму двунаправленного текста обрабатывать его отдельно от окружающего содержимого. Это работает в двух направлениях:

• Направление текста внутри <bdi> не влияет на направление окружающего текста.
• Направление текста внутри <bdi> не зависит от направления окружающего текста.

Например, рассмотрим такой текст:

EMBEDDED-TEXT - 1st place

Если EMBEDDED-TEXT направлен слева направо, всё работает правильно. Но если EMBEDDED-TEXT направлен справа налево, - 1 будет считаться текстом, направленным справа налево (поскольку состоит из нейтральных и слабых символов). В результате текст будет отображаться некорректно:

1 - EMBEDDED-TEXTst place

Если направление EMBEDDED-TEXT заранее известно, эту проблему можно решить, обернув EMBEDDED-TEXT в <span> с атрибутом dir, которому присвоено известное направление. Но если направление неизвестно — например, потому что EMBEDDED-TEXT загружается из базы данных или вводится пользователем, — следует использовать <bdi>, чтобы направление EMBEDDED-TEXT не влияло на окружающий текст.

Хотя того же визуального эффекта можно добиться с помощью правила CSS unicode-bidi: isolate для элемента <span> или другого элемента форматирования текста, авторам HTML не следует применять этот подход, поскольку он несемантичен, а браузеры могут игнорировать стили CSS.

Заключение символов в <span dir="auto"> даёт тот же эффект, что и использование <bdi>, но его семантика менее очевидна.

Атрибуты

Как и все остальные HTML-элементы, этот элемент поддерживает глобальные атрибуты, однако атрибут dir ведёт себя иначе, чем обычно: по умолчанию он имеет значение auto, то есть никогда не наследуется от родительского элемента. Это означает, что если для dir не указать значение rtl или ltr, пользовательский агент определит подходящее направление на основе содержимого <bdi>.

Примеры

Без bdi: только текст LTR

В этом примере показаны победители конкурса с использованием только элементов <span>. Если в именах содержится только текст LTR, результат выглядит правильно:

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

Без bdi: текст RTL

В этом примере показаны победители конкурса с использованием только элементов <span>; имя одного из победителей состоит из текста RTL. В этом случае - 1, состоящий из символов с нейтральным или слабым направлением, примет направление текста RTL, и результат будет отображаться некорректно:

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

Использование bdi с текстом LTR и RTL

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

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

Техническая сводка

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

Совместимость с браузерами

См. также

• Встроенная разметка и двунаправленный текст в HTML
• Основы алгоритма двунаправленного текста Unicode
• Локализация
• Связанный HTML-элемент: <bdo>
• Связанные свойства CSS: direction, unicode-bidi