Меня зовут Максим, я веб-разработчик. В 2024 году я получил необычный заказ: адаптировать сайт российского производителя промышленного оборудования для арабских стран — ОАЭ, Саудовская Аравия, Египет. Казалось бы: переведи тексты на арабский, поменяй направление — и готово. На деле я провёл 3 месяца в исследованиях и столкнулся с десятками подводных камней, о которых не пишут в стандартных руководствах. Расскажу всё, что узнал — от технической RTL-вёрстки до культурных особенностей, которые влияют на конверсию.
Почему арабский рынок — это перспективно для российского бизнеса
После 2022 года российский бизнес активно разворачивается на Восток. ОАЭ, Саудовская Аравия, Оман, Катар, Бахрейн — рынки с высокой покупательной способностью и растущим спросом на промышленное оборудование, IT-услуги, строительные материалы, продовольствие.
Арабский мир — это более 400 миллионов человек. Из них интернетом пользуются более 70% в странах Залива (в ОАЭ — 99%). Это платёжеспособная, технически грамотная аудитория. И если ваш сайт не адаптирован под их язык и культуру — вы теряете этот рынок.
RTL-вёрстка: что это и почему всё сложнее, чем кажется
RTL — Right-to-Left. Арабский текст читается справа налево. Это значит, что весь интерфейс сайта должен быть зеркально отражён: навигация начинается справа, тексты выровнены по правому краю, иконки и стрелки направлены в противоположную сторону.
Что нужно зеркалировать
Весь layout. Боковое меню, которое было слева — переезжает направо. Логотип, который был слева — теперь справа (или остаётся слева, но навигация уходит влево). Сетка колонок — зеркалится.
Отступы и маржины. Если в LTR-версии у элемента `margin-left: 20px` — в RTL это становится `margin-right: 20px`. CSS-свойства `padding-left`, `margin-right`, `text-align: left` — все требуют замены.
Иконки направления. Стрелка «назад» (←) должна стать (→). Иконка «следующий слайд» — зеркалится. Но не все иконки: галочка, крестик, лупа — остаются как есть. Часы остаются как есть (стрелки часов не зеркалятся). Кнопка «Поделиться» — тоже.
Скроллбары. В RTL-версии скроллбар находится слева. Горизонтальная прокрутка — в противоположном направлении.
Формы. Поля ввода — текст вводится справа налево. Но! Числа, email-адреса, URL — пишутся слева направо даже в арабском тексте. Это называется BiDi (bidirectional text) — и это один из самых сложных аспектов.
Как я реализую RTL технически
CSS Logical Properties. Вместо `margin-left` использую `margin-inline-start`. Вместо `padding-right` — `padding-inline-end`. Эти свойства автоматически адаптируются при смене направления. Поддержка браузерами — хорошая (все современные браузеры).
Атрибут dir="rtl". Устанавливается на теге `<html>` или на конкретном контейнере. Браузер автоматически меняет направление текста и некоторые CSS-свойства.
Отдельные стили или автоматическая генерация. Есть два подхода: писать отдельный CSS-файл для RTL (трудоёмко, нужно поддерживать два файла) или использовать инструменты автоматической RTL-трансформации (rtlcss, postcss-rtlcss). Я использую второй вариант — PostCSS-плагин автоматически генерирует RTL-версию стилей из LTR-исходников.
Tailwind CSS и RTL. Если проект на Tailwind — использую модификатор `rtl:`. Например: `ltr:ml-4 rtl:mr-4`. Или, лучше, логические утилиты: `ms-4` (margin-start), `me-4` (margin-end) — они автоматически работают в обоих направлениях.
BiDi-текст: самая коварная проблема
Арабский текст может содержать вставки на английском языке, числа, знаки препинания — и все они имеют своё направление. Браузер обрабатывает это через Unicode Bidirectional Algorithm, но иногда результат неожиданный.
Пример: строка «Цена: 1,500 AED за единицу» на арабском может отобразиться с числом в неправильном месте, если не обернуть его в тег `<bdo dir="ltr">` или не использовать Unicode-символы управления направлением.
Практический совет: всегда тестируйте реальный арабский контент, а не Lorem Ipsum. Проблемы BiDi проявляются только на реальных текстах с числами и латиницей.
Типографика для арабского языка
Выбор шрифта
Арабское письмо — каллиграфическое, буквы соединяются между собой. Не все шрифты поддерживают арабский, и не все арабские шрифты хорошо выглядят на экране.
Мои рекомендации:
Noto Sans Arabic (Google Fonts). Бесплатный, отличная читаемость, полная поддержка арабского. Хорошо работает в паре с Noto Sans для латиницы.
IBM Plex Sans Arabic. Современный, профессиональный. Хорош для B2B-сайтов.
Cairo. Элегантный, хорошо смотрится в заголовках.
Tajawal. Лёгкий, читаемый, подходит для длинных текстов.
Размеры и интервалы
Арабский текст визуально «мельче» латиницы при том же размере в пикселях — из-за вертикальных пропорций букв и наличия диакритических знаков. Я увеличиваю базовый размер шрифта на 1–2px для арабской версии.
Межстрочный интервал (line-height) — увеличиваю до 1,8–2,0. Арабские буквы с диакритическими знаками требуют больше вертикального пространства, иначе знаки накладываются друг на друга.
Культурные нюансы, влияющие на дизайн
Цвета
Зелёный — цвет ислама, ассоциируется с благополучием и ростом. Хороший выбор для CTA-кнопок и акцентов.
Золотой — ассоциируется с роскошью и премиальностью. Широко используется в дизайне для стран Залива.
Белый — чистота и мир. Хорошо работает как фон.
Чёрный — может ассоциироваться с трауром (как и во многих культурах). Использовать осторожно, не как доминирующий цвет.
Красный — в целом нормально, но в контексте предупреждений и ошибок лучше сочетать с текстовым пояснением.
Изображения
Избегайте. Изображения с алкоголем, откровенной одеждой, свининой, символикой других религий. Собаки в исламской культуре считаются нечистыми — не используйте фото с собаками в маркетинговых материалах.
Используйте. Изображения, демонстрирующие уважение к традициям: деловые встречи в национальной одежде, современная архитектура Залива, семейные ценности.
Осторожно с гендером. В Саудовской Аравии фотографии женщин на коммерческих сайтах — нормальны (страна сильно либерализовалась с 2020-х), но контекст важен. Для B2B-сайтов лучше фокусироваться на профессиональных изображениях.
Календарь и даты
В арабских странах используются два календаря: григорианский (привычный нам) и исламский (хиджра). На коммерческих сайтах обычно используют григорианский, но для формальных документов и некоторых контекстов может потребоваться хиджра. Если ваш сайт показывает даты — предусмотрите возможность переключения.
День недели: в арабских странах рабочая неделя — с воскресенья по четверг. Пятница и суббота — выходные. Если на сайте есть расписание, режим работы, форма записи — учитывайте это.
Валюта и числа
ОАЭ — дирхам (AED), Саудовская Аравия — риал (SAR), Египет — фунт (EGP). Цены должны быть в местной валюте — или хотя бы с возможностью переключения.
Числа: в арабских странах используются как «западные» цифры (1, 2, 3), так и «восточно-арабские» (١، ٢، ٣). Для коммерческих сайтов в ОАЭ и Саудовской Аравии достаточно западных цифр. Для Египта — может потребоваться поддержка обоих вариантов.
SEO для арабского рынка
Поисковые системы
В арабских странах доминирует Google (90%+ доля рынка). Яндекс не используется. SEO-оптимизация — по правилам Google, но с учётом арабской специфики.
Ключевые слова
Арабские ключевые слова — отдельная наука. Арабский язык агглютинативный: одно слово может иметь десятки форм. Плюс диалекты: египетский арабский сильно отличается от арабского Залива. Для B2B-рынка — Modern Standard Arabic (MSA) подходит для всех стран.
Рекомендую: привлечь носителя языка для составления семантического ядра. Машинный перевод ключевых слов — не работает.
Домен
Варианты: поддомен (ar.company.com), подпапка (company.com/ar/), или отдельный домен для конкретной страны (company.ae). Для начала рекомендую подпапку — проще управлять, единый авторитет домена.
hreflang-теги
Обязательно указываем связь между языковыми версиями: `<link rel="alternate" hreflang="ar" href="https://company.com/ar/" />`. Это помогает Google показывать правильную версию сайта пользователям из арабских стран.
Техническая архитектура мультиязычного сайта
Для Next.js-проекта я использую встроенную поддержку i18n:
- Маршрутизация через подпапки: /en/, /ar/
- Файлы переводов в JSON (отдельный файл для каждого языка)
- Автоматическое определение языка по заголовку Accept-Language и GeoIP
- Переключатель языка в шапке сайта
Для RTL: устанавливаю `dir="rtl"` и `lang="ar"` на `<html>` при арабской версии. CSS — через логические свойства или автогенерацию RTL.
Сроки и бюджеты
Адаптация существующего сайта под арабский рынок (RTL-вёрстка, перевод, культурная адаптация дизайна, базовое SEO). Срок: 4–8 недель. Бюджет: 200–500 тысяч рублей + стоимость профессионального перевода (от 5 руб/слово).
Создание мультиязычного сайта с нуля (русский + английский + арабский, с учётом RTL и культурных особенностей). Срок: 2–4 месяца. Бюджет: 600 тысяч — 2 миллиона рублей.
Профессиональный перевод контента на арабский: от 100 до 300 тысяч рублей в зависимости от объёма. Не экономьте на переводе — плохой арабский текст = потеря доверия.
Чек-лист для выхода на арабский рынок через сайт
- Профессиональный перевод (не Google Translate!) носителем языка из целевой страны
- RTL-вёрстка с тестированием на реальном арабском контенте
- Адаптация изображений и цветовой палитры
- Локализация валют, дат, контактных данных
- Местный номер телефона (или хотя бы WhatsApp с арабским номером)
- SEO-оптимизация под арабские запросы с участием носителя языка
- Тестирование с реальными пользователями из целевой страны
- Хостинг с CDN-точкой в регионе (для скорости загрузки)
Если вы планируете выход на арабский рынок и нужна помощь с разработкой или адаптацией сайта — обращайтесь.