<bdi>: Элемент изоляции двунаправленного текста

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

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

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

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

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

Например, рассмотрим какой-то текст, подобный:

EMBEDDED-TEXT - 1st place

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

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, что означает, что его значение никогда не наследуется от родительского элемента. Это означает, что если вы не укажете значение rtl или ltr для dir, пользовательский агент определит правильное направление, исходя из содержимого <bdi>.

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

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

В этом примере перечисляются победители конкурса, используя только элементы <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>. Эти элементы указывают браузеру обрабатывать имя изолированно от контекста встраивания, поэтому вывод примера отформатирован правильно:

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

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