Как избежать разрыва глифов при оптимизации шрифтов на арабском сайте

«Разрыв» арабских глифов на веб-странице обычно вызван не повреждением отдельного файла шрифта, а откатом к резервному шрифту, отсутствием поддержки формирования глифов (shaping) или нарушением контекстных связей арабского письма в процессе обработки текста. Арабские символы меняют форму в зависимости от положения в начале, середине, конце слова или отдельно; если браузер не обрабатывает последовательные символы с использованием одного шрифта, одного направления и корректных правил рендеринга, буквы будут отображаться раздельно, связное написание прерываться, знаки препинания располагаться неправильно, а порядок цифр может нарушаться.

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

Сначала определите: в шрифте отсутствуют символы или нарушено формирование текста

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

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

При выборе шрифта оценивайте полную языковую поддержку, а не только визуальный стиль

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

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

В CSS необходимо явно задать порядок резервных шрифтов, доступных для арабского языка, чтобы при отсутствии символов случайно не использовался шрифт устройства по умолчанию. Например, в стеке шрифтов сначала должен быть проверенный арабский Web Font, затем надёжный системный арабский шрифт, и только после этого — общее семейство шрифтов. В то же время разделение @font-face по языкам с помощью unicode-range может сократить загрузку нерелевантных символов, но заданный диапазон должен охватывать все необходимые для арабского языка области символов; некорректное создание подмножеств — частая причина «внезапного разрыва части текста».

Атрибуты направления должны применяться к самому языковому контенту

Арабская страница читается справа налево, однако одного применения direction: rtl к контейнеру страницы недостаточно. Наиболее надёжный подход — указать lang="ar" и dir="rtl" в арабском документе или соответствующей языковой области, чтобы браузер, вспомогательные технологии и механизм рендеринга шрифтов получили корректную информацию о языке и направлении.

На уровне макета технической команде следует в первую очередь использовать логические свойства, например margin-inline-start, padding-inline-end, text-align: start, а не механически заменять left на right во множестве арабских стилей. Первые адаптируются к направлению текста, тогда как второй подход чаще приводит к упущениям в адаптивных компонентах, всплывающих окнах, каруселях и подсказках валидации форм.

Смешанный контент требует дополнительной обработки. Модели товаров, электронные адреса, URL-адреса, номера телефонов, SKU, проценты и цены обычно используют латинские символы или цифры; при прямом встраивании в RTL-текст их визуальный порядок может смещаться. Такие самостоятельные фрагменты можно оборачивать элементом с dir="ltr"; для контента неизвестного языка, введённого пользователем или возвращённого интерфейсом, чаще подходит dir="auto". Не следует добавлять пробелы, дефисы или невидимые символы методом подбора: такие временные исправления трудно выдерживают обновление контента и рендеринг на разных устройствах.

Разрыв глифов может быть вызван системой контента, а не CSS

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

Способ проверки прост: откройте инструменты разработчика браузера и изучите DOM проблемного слова. Если обычное слово разделено на несколько узлов, сначала восстановите его как непрерывный текстовый узел, а затем решите, действительно ли необходимо сохранять стилевое разделение. Если в арабское предложение необходимо вставить переменную, она должна оставаться целостным фрагментом; также следует протестировать визуальный порядок символов и знаков препинания до и после переменной. Серверная часть, CMS, база данных и API также должны единообразно использовать UTF-8, чтобы при импорте, перекодировании или очистке контент не заменялся несовместимыми символами.

Перед запуском тестируйте «путь контента», а не только главную страницу

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

1. Подготовьте набор арабских тестовых текстов, содержащих связные слова, слова со знаками, арабские цифры, английские модели и ссылки.
2. Проверьте фактическую загрузку шрифтов в основных браузерах на настольных и мобильных устройствах, убедившись в отсутствии непредвиденного переключения на резервный шрифт.
3. Переключайте различные условия сети и наблюдайте, не вызывает ли подменный шрифт до полной загрузки основного шрифта скачки макета или кратковременные разрывы.
4. Проверьте направление текста после копирования, вставки, поиска по сайту и отправки формы, чтобы избежать ситуации «выглядит правильно, но при передаче всё нарушается».
5. Поручите корректору арабского контента проверить порядок чтения, написание терминов и смысл кнопок; техническая корректность не равна естественности языка.

Для многоязычных самостоятельных сайтов арабскую версию не следует создавать простым копированием английского шаблона с заменой текстов. Возможность платформы для создания сайтов стабильно управлять lang, dir и ресурсами шрифтов в языковых версиях, на уровне компонентов, полей форм и SEO-страниц напрямую влияет на последующие расходы на обслуживание. При оценке таких платформ, как 易营宝, ориентированных на многоязычное создание сайтов и зарубежный маркетинг, следует уделить особое внимание её арабскому языковому пакету, RTL-адаптации компонентов, правам настройки ресурсов шрифтов, а также поддержке повторного тестирования по страницам и устройствам после публикации контента. Здесь важнее не название платформы, а возможность избежать поддержки арабских страниц с помощью большого количества ручных CSS-переопределений.

Несколько кажущихся удобными подходов с высокой последующей стоимостью

Первый — преобразовать арабский текст в изображение. Это может временно обойти проблему шрифтов, но ухудшает возможность копирования текста, доступность и способность поисковых систем понимать содержимое; при обновлении товаров изображения придётся создавать заново. За исключением фиксированных брендовых визуальных материалов, такой подход не следует использовать для основного текста.

Второй — полагаться только на системные шрифты устройств пользователей. Доступные шрифты различаются в зависимости от региона, версии системы и браузера, поэтому на тестовом устройстве всё может быть нормально, а на реальном устройстве посетителя произойдёт переключение на резервный шрифт. В основном тексте и зонах конверсии следует загружать проверенный Web Font.

Третий — вручную вставлять в контент символы управления направлением, чтобы «исправить» смешанный текст. Это может решить проблему в одной строке, но создаст скрытые сложности при редактировании в CMS, копировании контента и последующем переводе. В первую очередь проблему следует решать с помощью семантических тегов, атрибута dir и правил вывода компонентов.

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