Арабский и латиница в русской строке: как проверить направление

Когда арабское название, английский код и русская подпись оказываются в одной строке, слова могут визуально поменяться местами, а скобки и двоеточия — «прилипнуть» не к тому фрагменту. Обычно причина не в рисунке букв: алгоритм двунаправленного текста рассчитывает порядок показа символов, а шрифт отвечает за их начертание. Проверка должна охватывать и разметку направления, и поддержку глифов.

Компьютер хранит текст в логическом порядке: символы следуют так, как их набирают и читают внутри каждого слова. При отображении алгоритм Unicode Bidirectional Algorithm (UBA) рассчитывает визуальный порядок для строк, где встречаются письма с направлением слева направо и справа налево. Кириллица и латиница идут слева направо; арабское письмо — справа налево. В одной строке итог зависит не только от этих букв, но и от нейтральных символов: пробелов, скобок, дефисов, двоеточий и цифр.

Например, строка «Каталог: متجر النور (Noor-24)» объединяет русскую подпись, арабское имя, латинскую транслитерацию, цифры и скобки. Если направление всего контейнера задано не по содержимому, браузер всё равно применяет UBA, но результат для смешанных фрагментов может оказаться неожиданным: знаки препинания перейдут к соседнему сегменту, а конец строки будет выглядеть началом. Исправлять это подбором другого шрифта бесполезно — понадобится обозначить направление и границы фрагментов.

Важно различать две задачи. Направление определяет порядок показа символов и работу нейтральных знаков. Шрифтовое покрытие определяет, есть ли в выбранной гарнитуре нужные арабские буквы, соединительные формы, латинские знаки, цифры и пунктуация. Если арабское слово выводится системным шрифтом, а остальная строка — авторским, это проблема подстановки гарнитуры; если порядок сегментов или скобки неверны, это задача bidi-разметки. В реальном макете могут встретиться обе проблемы одновременно.

Направление следует задавать на том уровне, к которому оно относится. Русский абзац с короткой арабской вставкой остаётся блоком LTR, а сама вставка получает локальное RTL-направление. Целый арабский заголовок или цитата могут быть отдельными блоками RTL. Не меняйте направление всей страницы только из-за нескольких слов: это перестроит соседние подписи, поля и элементы интерфейса.

В HTML обозначьте основной язык и направление контейнера. Для русского абзаца логичным будет lang="ru" dir="ltr". Внутри него заключите арабскую фразу в отдельный элемент с lang="ar" dir="rtl". Язык помогает браузеру и вспомогательным технологиям понять язык содержимого; dir задаёт направление потока. Это разные сведения, и одно не заменяет другое. Подробный разбор таких inline-фрагментов с примерами есть в руководстве W3C по bidi-разметке.

Если вставляемое имя приходит из базы или вводится пользователем, язык заранее может быть неизвестен. Тогда изолируйте только этот фрагмент с <bdi dir="auto">…</bdi> либо добавьте dir="auto" существующему элементу, который тесно охватывает значение. bdi изолирует содержимое от окружающей строки, а auto позволяет определить направление по первому сильному символу. Вставка вроде A-17 будет интерпретирована слева направо, арабское имя — справа налево; скобки и знаки за пределами элемента при этом не должны управлять внутренней последовательностью.

Когда направление известного фрагмента известно, укажите его явно: например, <span lang="ar" dir="rtl">...</span>. Для английского кода, артикула или транслитерации используйте отдельную LTR-границу. Не оборачивайте весь абзац в bdi: изоляция должна совпадать со смысловой границей, иначе браузер начнёт воспринимать русский контекст как независимый неизвестный токен.

Вне HTML — например, при формировании обычного текста для редактора без разметки — Unicode описывает направляющие изоляторы LRI, RLI, FSI и PDI. Они обрамляют LTR- или RTL-фрагмент так, чтобы его содержимое не перестраивало окружающую строку. Используйте их только там, где среда гарантированно корректно их обрабатывает; невидимые управляющие символы трудно заметить при копировании и отладке. На веб-странице предпочтительнее семантическая HTML-разметка, о чём предупреждает UAX #9.

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

Проверяйте парные знаки отдельно. В логическом исходнике открывающая скобка должна стоять перед тем фрагментом, который она открывает, а закрывающая — после него. Не переставляйте знаки в строке вручную, чтобы «поправить» один браузер: такое исправление часто ломает другой контекст, поисковую индексацию, копирование или доступность. Сначала проверьте базовое направление блока, затем изоляцию вставки, и лишь после этого — поведение конкретной среды.

Цифры требуют отдельной проверки, потому что в тексте могут встретиться арабские, европейские цифры, код модели и скобки. Решите, какая запись нужна продукту, и сохраняйте символы именно в логическом порядке. Не заменяйте визуальный результат перестановкой кода и номера. Проверьте строку при переносе на узкую ширину: сегмент, который выглядел корректно в одну строку, может оказаться разделён переносом рядом с нейтральным знаком.

Для HTML-страницы можно собрать минимальный стенд: один контейнер LTR, тот же текст внутри контейнера RTL и несколько локально изолированных вставок. Сравните результат в целевом браузере и в мобильном размере, а затем выделите и скопируйте строку в текстовый редактор. При копировании должна сохраняться исходная логическая последовательность. Если визуально всё выглядит верно, но копия переставляет фрагменты, в документ могли попасть ручные перестановки или скрытые управляющие символы.

Для печати и статичного макета тестируйте экспорт отдельно. Браузерная HTML-разметка не всегда переносится в дизайн-приложение как семантика: в PDF могут попасть уже вычисленные позиции символов либо изменённая структура текста. Проверьте, можно ли искать и выделять слова в итоговом PDF, совпадает ли порядок при копировании, не выпали ли арабские знаки и сохранился ли шрифтовой fallback. Растровая картинка не покажет, что текстовый порядок сломан.

После того как порядок фрагментов верен, проверьте сами формы. Арабские буквы меняют соединительную форму в зависимости от позиции и соседей; тестируйте не одиночную таблицу знаков, а реальные слова и их соединения. Отдельно просмотрите точки и знаки над/под буквами, если они есть в используемом языке, а также варианты цифр и латинские элементы в одном образце.

Если гарнитура не содержит арабских глифов, браузер выберет шрифт из fallback-цепочки. Это может изменить толщину, высоту, базовую линию и визуальный ритм слова. Сравните переходы на границах: одинаково ли выглядит высота строчных букв, не задевают ли диакритические знаки соседнюю строку, не сливаются ли точки в мелком размере. Не рассчитывайте, что lang="ar" автоматически добавит недостающие контуры: атрибут сообщает язык, но не создаёт глифы.

Проверьте реальный набор символов выбранного файла, а не только название гарнитуры или рекламное описание. Если создаёте рукописный шрифт в Fontgenerator, заполните и экспортируйте латинский/кириллический набор, который нужен макету, а арабский текст показывайте гарнитурой с подтверждённой поддержкой соответствующих букв. Затем сравните результат в реальном размере и на фоне страницы. Для смешанной строки лучше заранее определить, какой участок набирается авторским шрифтом, а какой — fallback.

**Переключить direction у всего интерфейса.** Это затрагивает русские подписи и расположение элементов. Направление меняют у конкретного блока или вставки, которая этого требует.

**Вручную менять порядок букв и скобок.** Текст перестаёт быть логичным и становится неудобным для поиска, чтения с экрана и копирования. Храните естественный порядок, поручая визуальную раскладку алгоритму и разметке.

**Добавить случайные LRM/RLM, не понимая контекст.** Такие символы невидимы и могут пережить копирование в другом тексте. Для веба начните с <bdi> и dir, а ручные управляющие знаки оставьте для форматов, где разметка недоступна и поведение проверено.

**Считать, что хороший шрифт исправит bidi.** Гарнитура отвечает за форму глифов и не может заменить указание базового направления. И наоборот, правильный dir не обеспечит наличие арабских букв в файле.

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

Нет. Русский абзац остаётся LTR, а арабский фрагмент размечается и изолируется локально. Направление всего блока меняют, когда основное содержимое действительно написано справа налево.

Оба варианта применяются к фрагменту, но bdi изолирует его от окружающего двунаправленного контекста и по умолчанию использует автоматическое определение направления. span dir="rtl" задаёт известное направление явно; проверьте, что границы элемента совпадают с границами вставки.

Нет. lang описывает язык содержимого, а dir задаёт направление отображения. Для арабского фрагмента в LTR-контексте указывайте нужные атрибуты вместе, если разметка допускает их применение.

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

В Unicode есть направляющие управляющие символы, включая изоляторы. Но в веб-разметке стандарт Unicode рекомендует применять HTML/CSS-механизмы; невидимые знаки добавляют риск скрытых различий при копировании и правке. Используйте их только при проверенной необходимости вне HTML.

Вероятно, активировался запасной шрифт для символов, которых нет в основной гарнитуре. Это вопрос покрытия и fallback, а не порядка bidi. Проверьте нужные арабские и латинские глифы в файле, а также их вид в экспортируемом макете.

В строке с русским, арабским и латиницей сначала задайте направление контейнера, затем изолируйте разнонаправленные вставки и проверьте скобки, цифры, копирование и переносы. После этого оцените покрытие шрифта и fallback. Такой порядок помогает найти первопричину, не переставляя символы вручную. Для авторского русского шрифта можно собрать и проверить нужную кириллицу и латиницу в Fontgenerator; арабскую часть макета следует тестировать с гарнитурой, которая действительно её поддерживает.

Источники: Unicode Bidirectional Algorithm, UAX #9 и W3C: Inline markup and bidirectional text in HTML.