Для вложенного текста в HTML выбирайте изоляцию, если каждое выражение должно сохранять собственное направление, не влияя на соседние. Используйте внедрение, только когда предполагается взаимодействие с окружающим текстом, а переопределение — когда макет явно требует принудительного порядка символов.

Это руководство поможет при редактировании HTML-страницы на Mac выбрать подходящий механизм, сохранить вложенные подписи и знаки препинания, а также проверить результат в настольном браузере. В примерах используются вымышленные подписи, числа и геометрические символы.

Какой механизм подходит для этой задачи с макетом?

Начните с двух вопросов: должен ли браузер применять обычную двунаправленную сортировку внутри выражения и должно ли это выражение влиять на порядок окружающего текста? Эти решения дают следующее практическое сравнение. В справочнике MDN по unicode-bidi описано соответствующее поведение CSS.

Требование Механизм Предпочтительный подход в HTML
Задать границы для выражения с известным направлением Изоляция Существующий встроенный элемент с dir="ltr" или dir="rtl"
Изолировать выражение с неизвестным направлением Изоляция с автоматическим определением направления bdi или существующий встроенный элемент с dir="auto"
Создать направленную область, которая по-прежнему влияет на окружающий порядок Внедрение Специализированный случай CSS с unicode-bidi: embed
Принудительно задать порядок символов, изолировав результат Изолированное переопределение bdo с явным dir="ltr" или dir="rtl"
Принудительно задать порядок символов, сохранив взаимодействие с окружающим текстом Неизолированное переопределение Специализированный случай CSS с unicode-bidi: bidi-override

При обычной разметке HTML используйте направленную разметку как отправную точку. W3C рекомендует выделять каждое выражение с противоположным направлением отдельной оболочкой, а вложенные выражения оформлять вложенной разметкой. Так задуманные границы видны в документе. W3C: встроенная разметка и двунаправленный текст в HTML.

Как размечать вложенный изолированный текст?

Задайте отдельную направленную границу для каждого законченного выражения. Если существующий встроенный элемент уже содержит ровно это выражение, добавьте туда dir. В противном случае добавьте span. Знаки препинания, относящиеся к выражению, оставьте внутри его оболочки; знаки препинания окружающего предложения — снаружи. W3C называет это «плотным оборачиванием» выражения. Рекомендации W3C по встроенной разметке.

Для синтетической подписи фигуры, которая должна идти справа налево и содержит идентификатор слева направо, структура может выглядеть так:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Здесь намеренно заданы три области: внешнее предложение, последовательность фигур и вложенный идентификатор. Число относится к предложению, поэтому оно остается за пределами последовательности фигур. Если пометить только внешнее выражение, у внутреннего идентификатора не будет собственной явной границы. Такая вложенность соответствует рекомендованной W3C структуре для смены направления. Рекомендации W3C по вложенным выражениям.

Если направление вставленной подписи неизвестно, bdi обеспечивает изоляцию и по умолчанию автоматически определяет направление. Обычный span без dir не обеспечивает такого же значения по умолчанию. WHATWG указывает, что bdi по умолчанию использует auto, а не наследует направление обычным образом. Стандарт HTML: элемент bdi.

Автоматическое определение направления — это эвристика, основанная на первом символе с сильной направленностью, с заданными исключениями для вложенных направленных элементов. Она не понимает предполагаемый смысл подписи. Поэтому подпись, начинающаяся с A1, задает сигнал слева направо, даже если ее дальнейшее содержимое предполагает иное отображение. Если требование уже известно, задайте направление явно. MDN: глобальный атрибут dir.

Подписи, состоящие только из фигур и цифр, требуют особого внимания: в них нет букв с сильной направленностью. Для обычных встроенных примеров здесь алгоритм HTML при автоматическом определении направления переходит к направлению слева направо, если подходящий символ не найден. Укажите dir="rtl", если для этой синтетической последовательности необходимо базовое направление справа налево. Стандарт HTML: атрибут dir.

Когда уместны внедрение и переопределение?

Внедрение создает дополнительный уровень направления, сохраняя обычный порядок символов внутри него. Его граница также влияет на направление окружающего текста. Изоляция задает содержимому собственную область, при этом последовательность нейтральна по отношению к окружению. В спецификации W3C явно различаются эти внутренние и внешние эффекты. CSS Writing Modes Level 3: внедрение и переопределение.

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

Переопределение меняет внутреннее правило. Оно принудительно выстраивает непосредственный текст в последовательность заданного направления, вместо того чтобы позволить обычному алгоритму определить направленность фрагментов. isolate-override добавляет вокруг этого принудительного порядка границу изоляции. Это разные механизмы, а не усиленные настройки для исправления обычного выражения. MDN: значения unicode-bidi.

Для намеренной демонстрации порядка символов используйте bdo с dir="ltr" или dir="rtl". Стандарт HTML требует явного указания направления и запрещает auto для этого элемента. В правилах отображения используется unicode-bidi: isolate-override, поэтому текущее поведение HTML для bdo включает изоляцию. Стандарт HTML: элемент bdo, Стандарт HTML: отображение двунаправленного текста.

Это различие важно для подписей латиницей: базовое направление справа налево не означает «перевернуть каждую латинскую букву». Такое расположение последовательности можно принудительно задать переопределением. Но даже в этом случае отдельные глифы сохраняют свою ориентацию; bdo не рисует буквы задом наперед. MDN: элемент bdo.

Сравните механизмы на полной странице на Mac

Для следующей автономной страницы нужны только браузер и простой текстовый редактор. В первых двух строках сравнивается обычная обработка направления с принудительным порядком. Остальные строки показывают варианты вложенности и границ. Строка с внедрением в CSS включена для демонстрации механизма; для обычной независимой подписи используйте строку с изоляцией в HTML как отправную точку.

В TextEdit выберите File > New, затем Format > Make Plain Text. Вставьте полный код ниже. Выберите File > Save, назовите файл bidi-demo.html и при появлении запроса выберите Use .html. Это документированные Apple шаги для создания HTML-файла. Откройте сохраненный файл в настольном браузере. Apple: работа с HTML-документами в TextEdit на Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Перед изменениями проверьте первые две строки. В обычном направленном диапазоне ABC должны сохранять порядок букв слева направо. Переопределение должно показывать CBA при чтении от левого края. Это ожидание, вытекающее из описанных механизмов, а не результат измерения в браузере. MDN: поведение bdo.

Затем сравните строки с вложенной изоляцией и внедрением. Не меняя слова и число, изучите последовательность фигур и знаки препинания на ее границе. Механизмы различаются, даже если конкретный пример выглядит одинаково: изоляция и внедрение не обязательно дают заметно разные результаты для каждой строки. Документированное различие касается участия области в разрешении направления окружающего текста. W3C: CSS Writing Modes Level 3.

Чтобы проверить границу, перенесите двоеточие внутрь внешнего направленного диапазона, сохраните файл и перезагрузите страницу. Затем верните его наружу. Так вы меняете, к какому выражению относится знак препинания, поэтому оценивайте результат с учетом этого замысла. Наконец, сузьте окно браузера и проверьте те же границы при переносе предложения на новую строку.

Фон и пунктирная рамка обозначают проверяемый диапазон. Это вспомогательные средства для осмотра. Они не задают направление и не обеспечивают изоляцию.

Как выяснить, почему результат по-прежнему выглядит неверно?

Проверяйте, начиная с самого маленького затронутого выражения и постепенно переходя к внешнему тексту. Если менять сразу несколько свойств направления, будет трудно определить, какая граница вызвала результат.

  1. Проверьте оболочку. Содержит ли она всю подпись и только ее? Знаки препинания предложения и числа следует оставлять снаружи, если только они не относятся к подписи.
  2. Проверьте вложенные выражения. Идентификатор с независимым направлением внутри другого выражения может требовать собственной оболочки dir.
  3. Проверьте автоматическое определение направления. Если предполагаемое базовое направление известно, замените auto явным направлением. Это особенно полезно для синтетических фигур и цифр.
  4. Проверьте наличие переопределений. Если порядок символов неожиданно задан принудительно, проверьте bdo и объявления CSS unicode-bidi.
  5. Проверьте каскад CSS. Правило автора может заменить направленное оформление браузера. Удалите экспериментальные правила bidi и повторно проверьте разметку HTML.

Первые две проверки основаны на рекомендациях W3C по оборачиванию и вложенности. Проверка автоматического направления следует документации MDN по dir; последние проверки основаны на правилах отображения HTML.

Также различайте порядок и выравнивание. text-align: right размещает встроенное содержимое у правого края блока, но не изолирует выражение. text-align: start ориентируется на направление блока, поэтому изменение базового направления также может изменить используемый край. Диагностируйте проблему с порядком символов отдельно от расположения строки. MDN: text-align.

Для проверки совместимости WHATWG указывает, что bdi и bdo поддерживаются во всех современных браузерных движках. Это не означает, что они поддерживаются во всех старых браузерах или встроенных средствах просмотра. При проверке в другой среде отображения испытайте именно целевую среду и сохраните направленную разметку HTML: MDN рекомендует ее вместо изоляции только средствами CSS, поскольку стили могут быть проигнорированы. Стандарт HTML: семантика текстового уровня, MDN: примечания по использованию bdi.

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

Источники