Почему арабский текст с английскими вставками выглядит не так, как ожидалось¶
В строке «رقم الطلب ABC-123» арабские слова читаются справа налево, а латинские буквы и цифры внутри кода - слева направо. Если рядом оказываются скобки, двоеточие или запятая, визуальное расположение знаков может удивить редактора. Проблема не обязательно в неправильном переводе: порядок показа вычисляет алгоритм двунаправленного текста.
Двунаправленный текст, или bidi-текст, - строка, где вместе встречаются символы с направлением письма справа налево и слева направо. Арабское письмо обычно идет справа налево, английское - слева направо. Одной английской вставки, числа или фрагмента с латиницей достаточно, чтобы строка стала двунаправленной. Unicode описывает правила ее отображения в документе UAX #9.
Например, арабское предложение может включать название продукта, адрес электронной почты, номер заказа, URL или латинскую аббревиатуру. В интерфейсе добавляются еще и динамические значения: имя пользователя, код подтверждения, номер телефона. Каждый такой фрагмент может влиять на вид соседних символов, если границы и направление не заданы достаточно ясно.
Для читателя видимая строка выглядит как единое предложение. Для браузера это последовательность символов с разными свойствами направления. Алгоритм анализирует символы и базовое направление абзаца, а затем рассчитывает порядок отображения. Исходная последовательность в данных при этом остается логической: арабские слова хранятся в порядке чтения, а не в порядке, который виден на экране.
Именно поэтому разворот строки вручную обычно создает новую проблему. Переставленные символы могут выглядеть приемлемо в одном поле, но перестать корректно копироваться, искать или отображаться в другом. Правильный путь - оставить логический порядок и дать браузеру или другой программе корректную информацию о направлении.
Для переводчика, редактора и разработчика это разные, но связанные задачи. Переводчик отвечает за смысл и содержание фраз, редактор - за корректное расположение элементов в итоговом макете, разработчик - за направление контейнеров и изоляцию вставок. Ошибку визуального порядка легко принять за ошибку перевода, хотя причина может быть в настройке абзаца.
Как формулирует справка Unicode о bidi-тексте:
«Unicode Bidirectional Algorithm, часто сокращенно называемый UBA, подробно объясняет, как следует размещать текстовые строки, если в них смешаны символы письма слева направо и справа налево».
Практический смысл прост: браузер не угадывает направление по тому, какой язык автор «имел в виду». Он применяет правила к символам и базовому направлению. Если контейнер размечен неправильно, алгоритм может последовательно и корректно обработать неверную исходную настройку.
В арабской локализации этот вопрос встречается не только на сайтах. Смешанные строки бывают в формах, письмах, электронных таблицах, PDF, презентациях, субтитрах и печатных макетах. Принцип остается тем же: не меняйте внутренний порядок букв ради визуального эффекта, а проверяйте направление блока, границы вставки и то, как программа отображает соседнюю пунктуацию.
Как алгоритм определяет порядок символов¶
Алгоритм двунаправленного текста Unicode назначает символам направленные свойства и рассчитывает, как они будут показаны внутри строки. В UAX #9 описаны сильные, слабые и нейтральные типы символов.
Сильные символы явно указывают направление. К этой группе относятся, например, буквы арабского письма и латиницы. Слабые символы не задают направление так же однозначно: к ним относятся многие символы, связанные с числами. Нейтральные символы сами по себе не показывают, к какому направлению принадлежат. В эту группу входит большая часть пунктуации и символов.
Алгоритму также нужно базовое направление абзаца. Оно помогает расставить направленные фрагменты и определить позицию нейтральных знаков на границе между ними. Поэтому верное базовое направление может исправить визуальную проблему без каких-либо изменений в словах. MDN поясняет назначение атрибута dir в справке по глобальному атрибуту dir.
Представьте арабское предложение с английским названием товара в скобках. Если название известно как английское, его направление можно обозначить явно. Если же вся строка с самого начала размечена как английская, алгоритм получает неверную базу для окружающего арабского текста. Если направление абзаца правильное, но название никак не отделено, его символы могут влиять на соседние нейтральные знаки.
Пунктуация особенно чувствительна к контексту. Запятая не сообщает сама по себе, относится ли она к арабской части, английской вставке или всему предложению. Браузер учитывает ее соседство с другими символами и направление абзаца. В результате знак может оказаться визуально ближе к фрагменту, который редактор не считает его владельцем.
Подобное поведение не означает, что символ «переехал» в исходных данных. Логическая последовательность и визуальная последовательность - разные представления строки. Unicode описывает отображение, но не переписывает исходный текст на экране. Этот принцип объясняет, почему строку нельзя надежно исправить обычным перемещением букв в исходном файле.
В официальном примере объяснения механизма Unicode задает не только порядок показа, но и правила взаимодействия разных типов символов. Важна вся строка, а не отдельное слово. Поэтому короткий фрагмент может отображаться иначе в заголовке, форме или ячейке таблицы: его окружающий контекст и базовое направление отличаются.
Практический пример - номер заказа, вставленный в арабское сообщение. Сам номер может содержать латинские буквы, дефис и цифры. Латинские буквы имеют направление слева направо, цифры относятся к особой категории, а дефис может вести себя как нейтральный знак. У результата нет универсального правила вроде «все символы после арабского слова визуально сдвигаются влево». Позиция зависит от конкретной последовательности и контекста.
Похожая задача возникает с телефонными номерами и URL. В строке могут сочетаться латинские буквы, цифры, слеши, точки, знаки вопроса и параметры. Отдельные фрагменты не всегда имеют сильное направление. Если URL вставлен в арабский абзац без изоляции, окружающая пунктуация может выглядеть не там, где ее ожидает автор. Исправлять следует не текст URL, а его разметку и контекст.
Считать видимый порядок эквивалентом логического порядка опасно для дальнейшей обработки. Поиск, копирование, сравнение и анализ текста работают с последовательностью символов, а не только с картинкой, которую видит читатель. Управляющие символы направления меняют отображение, но, согласно UAX #9, не меняют сравнение текста, разбиение на слова, разбор или числовой анализ.
Для специалистов полезно разделять три вопроса: правильно ли написана строка, правильно ли задано направление абзаца и изолирован ли фрагмент с другим направлением. Один и тот же визуальный дефект может иметь любую из этих причин. Исправление слов без проверки разметки может оставить дефект, а исправление разметки не должно подменять проверку смысла.
Как задать направление в HTML и изолировать вставки¶
В HTML направление текста задают атрибутом dir, потому что направление относится к смысловой структуре содержимого, а не только к его оформлению. Атрибут поддерживает значения ltr, rtl и auto; подробности приведены в документации MDN по dir.
Для страницы, основное содержимое которой написано на арабском, задайте dir="rtl" корневому элементу html. Для вложенного блока с известным английским текстом используйте dir="ltr". Если направление блока заранее неизвестно, dir="auto" позволяет определить его по содержимому. Выбирать значение стоит по тому, что известно о конкретной строке, а не по удобству в моменте.
Языковой атрибут и направление решают разные задачи. lang сообщает язык содержимого, но сам по себе не задает направление письма. Поэтому отметка языка не заменяет dir, если странице или вложенному блоку нужно явно указать направление. MDN разделяет эти назначения в справке об атрибуте dir.
Условный пример структуры:
<html lang="ar" dir="rtl">
<body>
<p>النص العربي هنا</p>
<p dir="ltr">English text here</p>
</body>
</html>
Пример показывает принцип, а не обязательную форму разметки для каждого проекта. Направление страницы задает базу для арабского содержимого, а отдельный английский блок получает собственную настройку. Если английская фраза встроена внутрь арабского предложения, ее стоит ограничить элементом с подходящим направлением, а не менять направление всего абзаца.
Элемент bdi предназначен для изоляции фрагмента двунаправленного текста. Изоляция работает в обе стороны: содержимое внутри элемента не влияет на порядок окружающего текста, а окружающий текст не влияет на порядок внутри элемента. Это описывает документация MDN по элементу bdi.
Например, имя пользователя может быть введено на арабском или английском, а интерфейс заранее не знает, какой язык выберет человек. В таком случае изоляция помогает встроить имя в шаблон сообщения, не позволяя его направлению менять отображение соседних слов и знаков. Если конкретное направление известно, можно выбрать dir явно; для содержимого неизвестного направления bdi подходит по назначению.
При отсутствии указанного dir элемент bdi ведет себя так, как если бы для него задали dir="auto". Это делает элемент полезным для пользовательского ввода, который начинается с символов неизвестного направления. MDN описывает это поведение в справке по bdi, а стандарт HTML объясняет назначение элемента для изоляции текста в разделе о текстовых элементах.
Разница между dir="auto" и bdi важна. Атрибут задает направление элемента, а bdi дополнительно изолирует его содержимое от окружающего двунаправленного текста. Если в динамической строке неизвестны и язык, и направление, изоляция помогает избежать взаимного влияния фрагментов. Если направление известно, явное значение обычно точнее эвристики.
dir="auto" не распознает язык. Атрибут ориентируется на символы, в частности на первый символ с сильным направлением. Поэтому строка, которая начинается с английского имени, а продолжается арабским текстом, может получить базовое направление слева направо. В таких случаях нельзя считать автоматическое определение эквивалентом языкового анализа. Когда направление заранее известно, задайте его явно.
Для встроенной фразы с известным направлением оборачивайте полный фрагмент, включая принадлежащую ему пунктуацию. Если скобка, точка или иной знак относится к английскому названию, граница элемента должна охватить и этот знак. Такое оформление ограничивает влияние соседнего арабского текста на вставку, а вставки - на абзац. Рекомендацию по изоляции фразы с известным направлением дает MDN.
Для семантической разметки предпочтительнее dir, а не только CSS. MDN отмечает, что атрибут сохраняет смысловое указание направления, даже если стили недоступны или отключены. CSS-свойство direction задает базовое направление для блочных элементов и влияет на выравнивание и поток ячеек таблиц и сеток. Для встроенных элементов его действие зависит от сочетания с unicode-bidi; описание приведено в справке MDN по CSS direction.
Не стоит компенсировать неверное направление абзаца набором отдельных CSS-правил. Сначала определите семантически правильную структуру: какая часть страницы арабская, где начинается английская вставка и какие элементы должны быть изолированы. Потом проверьте выравнивание и размещение. Внешний вид важен, но оформление не должно скрывать ошибочную модель направления.
Проверяйте и элементы управления. Поле ввода, подпись к нему, текст ошибки и кнопка могут иметь разные языки и направления. Если арабское поле принимает пользовательский текст на любом языке, его фактическое содержимое меняется во время работы. Для динамического ввода пригодится автоматическое направление или изоляция; для постоянного английского текста в интерфейсе лучше указать направление явно.
Когда direction controls помогают, а когда нужны другие решения¶
Явное направление и изоляция особенно полезны, когда строка включает предсказуемый фрагмент на другом языке. К таким фрагментам относятся англоязычное название товара в арабском предложении, латинская аббревиатура, URL, адрес электронной почты и пользовательское имя. Для каждого случая нужно решить, известно ли направление и где проходят границы текста.
Если направление известно, используйте явное значение. Английский заголовок в арабском интерфейсе можно отметить dir="ltr", не меняя базовое направление всей страницы. Если же строка поступает извне и язык неизвестен, dir="auto" или bdi подходит лучше, чем заранее назначенное направление. Выбор определяется свойствами конкретного поля, а не тем, на каком языке написана большая часть сайта.
Изоляция полезна для коротких значений внутри фраз и шаблонов. Например, в арабском интерфейсе рядом с именем клиента могут выводиться статус заказа и латинский идентификатор. Если имя вводит пользователь, его направление заранее неизвестно. Если идентификатор всегда формируется в фиксированном формате, направление известного фрагмента можно обозначить явно. В обоих случаях задача разметки - сохранить границы каждого значения.
dir="auto" не стоит использовать как универсальную замену явному направлению. Автоматический выбор основан на символах строки, а не на знании языка или смысла поля. Если первым идет латинское слово, а дальше арабская часть, алгоритм может выбрать направление по латинице. Такое поведение ожидаемо для эвристики, но не всегда соответствует предполагаемой структуре сообщения.
Управляющие символы Unicode могут быть полезны в отдельных типах текста, но для веб-страницы обычно лучше применить средства HTML и CSS. Unicode прямо рекомендует для веб-содержимого заменять явные символы форматирования направления подходящими механизмами HTML и CSS. В частности, для этого есть dir и bdi в разметке. Подробности приведены в UAX #9.
Unicode определяет управляющие символы изоляции: LRI, RLI, FSI и PDI. Они задают границы изолированного фрагмента, чтобы символы внутри него не влияли на порядок снаружи и наоборот. Направленные изоляции появились в Unicode 6.3, потому что встраивания могли слишком сильно воздействовать на окружающий текст. Стандарт рекомендует изоляции вместо встраиваний в новых документах, когда целевые платформы их поддерживают; эти сведения относятся к UAX #9.
Число версии Unicode в этом контексте - историческая часть описания стандарта, а не срок действия функции. Для текущей работы важнее проверить совместимость платформы и выбрать подходящий уровень решения. В веб-разметке направление контейнера и изоляцию проще поддерживать через семантические элементы, чем через невидимые символы, рассыпанные по тексту.
Не вставляйте управляющие символы «на всякий случай» прямо в перевод. Такие символы трудно заметить в редакторе, легко случайно удалить при копировании и непросто объяснить следующему специалисту. Увидев визуальную проблему, сначала проверьте dir, структуру вложенных блоков и границы фрагментов. Если задача связана не с веб-страницей, а с текстом для другой платформы, учитывайте, поддерживает ли эта платформа соответствующие символы изоляции.
Символы направления влияют на визуальное представление, но не предназначены для исправления содержания. Они не меняют порядок символов в данных и не исправляют опечатки, неправильные номера или ошибки перевода. Проверка текста должна отдельно оценивать смысл, а проверка отображения - направление и контекст. Если смешать эти этапы, визуально аккуратная строка может сохранить неверный код или ошибочное название.
Для печатного документа, текстового редактора или экспорта в PDF правила разметки HTML напрямую не применяются, но принцип логического порядка остается важным. Не переворачивайте арабскую строку вручную, чтобы добиться нужного вида. Сначала посмотрите, как конкретное приложение обрабатывает направление и управляющие символы, а затем проверьте экспорт и повторное копирование текста. Один и тот же фрагмент может пройти через несколько программ, каждая из которых отображает bidi-содержимое по-своему.
Смешанный текст связан и с визуальной безопасностью. Логическая последовательность символов может отличаться от того, как строка выглядит на экране. Из-за такого расхождения пользователь может неверно прочитать адрес, идентификатор или имя. Доклад Unicode о соображениях безопасности рассматривает подмену и визуальную путаницу в двунаправленном тексте. Этот риск не означает, что любой арабско-английский фрагмент опасен; он означает, что программам и редакторам важно учитывать разницу между исходной последовательностью и ее отображением.
Проверка смешанного текста: типичные ошибки и рабочий порядок¶
Большинство проблем проще обнаружить, если тестировать не отдельный арабский абзац, а реальные смешанные строки из интерфейса или документа. Проверьте примеры с числами, английскими названиями, пунктуацией, адресами и динамическими значениями. В каждом случае посмотрите на исходное содержимое, заданное направление и итоговый вид.
Не переворачивайте строку вручную¶
Самая опасная «быстрая правка» - переставить арабские символы так, чтобы они выглядели в нужном порядке в одном просмотрщике. Алгоритм bidi рассчитан на логическую последовательность символов и сам выполняет преобразование отображения. Если заранее перевернуть порядок, браузер применит правила еще раз и результат может стать неверным.
Ручное переворачивание также мешает копированию и поиску. Пользователь видит один вариант, а строка в данных хранит другой. При вставке в другое приложение, индексировании или сравнении текста видимое представление может не совпасть с исходной последовательностью. Правильная проверка начинается с того, что арабские слова записаны в логическом порядке.
Не считайте пунктуацию принадлежащей нужному фрагменту автоматически¶
Запятая, скобка или дефис рядом с границей языков может отображаться неожиданно, потому что знак часто имеет нейтральный тип. Алгоритм учитывает окружающие символы и базовое направление. Разработчику нужно решить, к какой фразе относится знак, а затем проверить, включен ли он в соответствующий изолированный фрагмент.
Не ограничивайте элемент только буквами, если завершающая точка или скобка относится к английской вставке. И наоборот, не включайте арабскую пунктуацию в английский элемент только потому, что так проще написать шаблон. Точная граница помогает алгоритму обработать знак в контексте нужного фрагмента.
Не путайте язык и направление¶
Указание lang="ar" полезно для информации о языке, но не заменяет dir="rtl". Указание lang="en" также не превращает содержимое автоматически в отдельный блок слева направо. Если направление важно, задайте его отдельно. Различие между языком и направлением описано в документации MDN.
Не полагайтесь на dir=”auto” как на распознавание языка¶
Автоматическая настройка определяет направление по содержимому, а не распознает, к какому языку относится вся фраза. Если начало строки содержит английское имя, а продолжение написано по-арабски, базовое направление может определиться по английскому фрагменту. Для известного направления задайте явный dir; неизвестное направление оставьте для auto или bdi.
Не решайте задачу только через CSS¶
CSS отвечает за оформление и направление отображения, но атрибут dir несет смысловую информацию о тексте. Когда направление задано только стилем, его проще потерять при отключенных стилях или переносе содержимого. Используйте HTML-разметку как основной источник направления, а CSS - для визуальной настройки. Такое предпочтение отмечено в справке MDN по dir.
Не добавляйте невидимые символы без понимания их роли¶
Управляющие символы могут влиять на то, как строка выглядит, хотя пользователь их не видит. Unicode советует для веб-страниц использовать подходящие возможности HTML и CSS вместо разбросанных по разметке символов явного форматирования. Невидимые символы затрудняют редактирование, поиск причины дефекта и перенос текста между платформами. Об этом предупреждает UAX #9.
Для проверки удобно пройтись по короткому списку:
- Убедитесь, что исходные арабские символы сохранены в логическом порядке.
- Проверьте базовое направление страницы и вложенных блоков.
- Найдите английские фрагменты и определите, известно ли их направление заранее.
- Изолируйте встроенные фрагменты с другим или неизвестным направлением.
- Проверьте пунктуацию на границах: скобки, запятые, точки и дефисы.
- Посмотрите, как строка отображается, копируется и вставляется в нужной программе.
- Отдельно проверьте смысл, имена и числовые значения.
Такой порядок помогает отличить дефект текста от дефекта отображения. Если предложение верно, но пунктуация выглядит не на месте, начните с базового направления и границ вставок. Если код заказа отличается после копирования, сравните исходную последовательность символов. Если арабское слово написано неверно, разметка направления проблему не исправит.
Типичный пример для проверки - арабское сообщение с английским названием, номером и скобками. Сначала оставьте название и номер в том порядке, в котором они должны храниться. Затем задайте направление самого арабского блока, отметьте английскую часть и проверьте, к какой части относятся скобки. После этого скопируйте строку в целевое поле: проверка только на экране редактора не показывает, как она поведет себя в другом контексте.
Отдельная ловушка - смешанное содержимое, которое приходит из внешнего источника. Имя, введенное пользователем, может начинаться латиницей, хотя затем включает арабские символы. Для такого значения автоматическое направление полезно как эвристика, но не как гарантия языковой классификации. Изолируйте динамическую строку, чтобы она не меняла порядок внешнего шаблона.
Проверяйте и экспорт. Документ может корректно выглядеть в браузере, но иначе отображаться после копирования в текстовый редактор или сохранения в другой формат. Такой результат не доказывает, что перевод неверен. Он указывает, что нужно проверить поддержку направления и изоляции в каждом звене рабочего процесса. Для арабской локализации проверка одной страницы без проверки экспорта оставляет часть проблемы незамеченной.
Частые вопросы¶
Как сохранить правильный порядок арабского и английского текста в переводе?¶
Сохраняйте символы в логическом порядке и задавайте направление контейнера, а не переставляйте буквы ради вида на экране. Для английской вставки внутри арабского текста задайте подходящее направление и изолируйте фрагмент от окружающей строки.
Почему пунктуация перемещается, когда арабский текст смешан с английским?¶
Большинство знаков пунктуации имеют нейтральное направление. Алгоритм определяет, где показать такой знак, по окружающим символам и базовому направлению абзаца, поэтому важны и направление контейнера, и граница встроенной фразы.
Когда использовать dir=”rtl”, dir=”ltr” и dir=”auto”?¶
Для страницы, преимущественно написанной на арабском, используйте dir="rtl". Известный английский блок можно отметить dir="ltr", а dir="auto" подходит для строки неизвестного направления, например пользовательского ввода.
Как элемент HTML bdi помогает смешивать арабский и английский?¶
bdi изолирует содержимое элемента от окружающего двунаправленного текста и защищает окружение от влияния этого содержимого. Элемент удобен для встроенного текста неизвестного направления, например имени пользователя.
Нужно ли переводчику вставлять управляющие символы Unicode?¶
Для веб-страницы обычно нет: направление задают подходящей HTML-разметкой, например атрибутом dir или элементом bdi. Управляющие символы Unicode стоит рассматривать только тогда, когда они подходят для конкретного формата и поддерживаются целевыми платформами.