Сайт на арабском языке: практическое руководство по RTL

Сделать сайт на арабском языке — это не только перевести тексты: меняется направление всей страницы. Коротко: корневому элементу задаются dir="rtl" и lang="ar", CSS пишется через свойства начала и конца (логические свойства) вместо left и right, иконки со смыслом направления отражаются, а логотип, видео и графики — нет, для арабского подключается отдельный шрифт, а арабская версия объявляется через hreflang. Если заложить эти пять шагов с самого начала, арабский станет просто ещё одним языком; если добавлять их потом, часто приходится переписывать половину дизайна.

Кому нужен сайт на арабском?

Больше всего выигрывают экспортёры, работающие со странами Персидского залива, Ираком, Египтом и Северной Африкой, отели и клиники медицинского туризма с гостями из арабских стран, а также строительные и инженерные компании с проектами в регионе. Деловым языком там часто остаётся английский, но компания, которая говорит с лицами, принимающими решения, и конечными клиентами на их родном языке, вызывает больше доверия и нередко почти не встречает конкуренции в арабском поиске. О продажах за рубеж в целом мы писали в руководстве по экспортной электронной торговле, об основе многоязычности — в статье о многоязычном сайте; здесь речь только о том, что специфично для арабского с его письмом справа налево (RTL).

Первый шаг: dir="rtl" и lang="ar"

Направление страницы браузеру сообщает атрибут dir у элемента html. При dir="rtl" выравнивание текста, порядок столбцов таблиц, положение полосы прокрутки и поток flex и grid сами переключаются справа налево. lang="ar" нужен, чтобы экранные дикторы правильно произносили текст, браузер выбирал верное начертание букв, а поисковые системы распознавали язык. В структуре с языковым префиксом, как в Next.js, значение формируется в layout по текущему языку:

const RTL_LOCALES = new Set(['ar', 'fa', 'he']);

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

/* CSS: логические свойства вместо left/right */
.card {
  padding-inline-start: 24px; /* в LTR слева, в RTL справа */
  margin-inline-end: 16px;
  border-inline-start: 4px solid var(--color-primary);
  text-align: start;
}

/* Отражать иконку направления только в RTL */
[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

Направление должна знать и UI-библиотека. Ant Design, MUI и аналоги поддерживают RTL, но его нужно включить отдельно; иначе выпадающие меню, выбор даты и боковые панели будут открываться не с той стороны.

CSS на логических свойствах

Основная часть работы с RTL приходится на CSS. Физические направления вроде margin-left, padding-right, left: 0 или text-align: left в RTL оказываются с обратной стороны. Писать отдельное правило [dir=rtl] для каждого случая долго и ненадёжно. Правильный путь — с первого дня использовать логические свойства:

• margin-inline-start / margin-inline-end вместо margin-left / margin-right
• padding-inline-start / padding-inline-end вместо padding-left / padding-right
• inset-inline-start / inset-inline-end вместо позиционирования через left / right
• text-align: start вместо text-align: left
• border-inline-start вместо border-left; для углов border-start-start-radius
• Flex и grid уже следуют направлению, разворачивать их вручную через row-reverse не нужно

Дешёвой арабскую версию делает не перевод, а CSS, написанный на логических свойствах с первого дня. На сайте, свёрстанном с физическими направлениями, поддержка RTL означает ручную переработку каждого компонента.

Что отражать, а что оставить как есть

В RTL переворачивается не всё. Правило простое: элементы, смысл которых зависит от направления, отражаются; элементы, смысл которых от направления не зависит, остаются как есть.

• Отражаются: стрелки «назад» и «вперёд», направление раскрытия меню, разделители хлебных крошек, направление слайдеров и галерей, индикаторы прогресса и шагов.
• Не отражаются: логотип, фото и видео, иконки брендов, иконка часов, кнопка воспроизведения, временная ось графиков в большинстве случаев, номера телефонов и адреса электронной почты.
• Внимание: латинские слова, коды товаров и URL внутри арабского текста по-прежнему читаются слева направо; если обернуть их в элемент bdi или dir="ltr", знаки препинания в смешанных строках не будут перескакивать.

Арабский шрифт, межстрочный интервал и типографика

Шрифт, выбранный для латиницы, обычно не содержит арабских глифов, и браузер подставляет системный шрифт — сайт выглядит по-разному на каждом устройстве. Подключите отдельный арабский веб-шрифт, например Noto Naskh Arabic, Noto Kufi Arabic, Cairo или IBM Plex Sans Arabic, и только на арабских страницах. Арабские буквы соединяются, а их точки выходят над и под строкой, поэтому межстрочный интервал стоит делать чуть больше, чем для латиницы. Разрядка (letter-spacing) в арабском не используется — она разрывает соединения букв, а заглавных и строчных букв нет вовсе, так что стили заголовков на text-transform: uppercase в арабском бессмысленны.

Числа, даты и формы

В одних арабских странах привычны восточноарабские цифры (٠١٢٣), в других — западные (0123), а в странах Залива встречаются оба варианта. Выбирайте по целевому рынку и форматируйте цены, даты и валюты через Intl.NumberFormat и Intl.DateTimeFormat, а не вручную. В формах поля имени и адреса выравниваются вправо, а поля телефона, e-mail, IBAN и номера карты остаются слева направо. Проверьте и валидацию: поле имени, принимающее только латиницу, отклонит арабское имя, а каждая брошенная форма — это потерянный клиент.

SEO для арабских страниц

Чтобы арабская версия появилась в поиске, действуют обычные правила многоязычного сайта: отдельный URL для каждого языка (/ar/...), взаимные указания hreflang="ar" и свои title и description для каждого языка. Арабские буквы в URL допустимы: Google их читает и показывает в выдаче по-арабски, но при пересылке они превращаются в длинные закодированные строки. Работают оба варианта, если адреса короткие и читаемые; главное — выбрать один раз и не менять. Настоящая разница — в контенте: арабская страница, заполненная машинным переводом, выдаёт себя носителю языка уже в первом абзаце, и показатель отказов остаётся высоким. Если вы нацелены на конкретную страну, например Саудовскую Аравию, региональный hreflang вроде ar-SA и местные контакты усиливают сигнал. Техническую основу мы описали в руководстве по SEO-дружественному сайту, а пример рынка со своей поисковой системой — в статье про SEO для Яндекса.

Проверка RTL перед запуском

• Откройте каждый шаблон страницы на арабском и сравните скриншоты с LTR-версией на мобильном и десктопе.
• По очереди откройте выпадающие меню, модальные окна, боковые панели, выбор даты, слайдеры и всплывающие уведомления.
• Проверьте положение знаков препинания в строках, где арабский текст смешан с латинскими словами, числами и URL.
• Заполните и отправьте формы с арабским именем, восточноарабскими цифрами и длинными адресами.
• Прослушайте несколько страниц экранным диктором — ошибки lang и dir слышны сразу. Общие правила — в нашей статье о доступности (WCAG).
• Убедитесь, что изображения для соцсетей (OG) отрисовывают арабский текст со связанными буквами и в правильном направлении.

Итог

Качество арабского сайта определяют три решения: управлять направлением с корня (dir и lang), писать CSS на логических свойствах и доверить написание и проверку текстов тому, кто действительно говорит по-арабски. Если заложить это с самого начала, арабский станет ещё одним языком, а не отдельным сайтом. Если вам нужен сайт на нескольких языках, включая арабский, с поддержкой вёрстки справа налево с первого дня, посмотрите нашу услугу веб-разработки или запросите бесплатную смету.