Сайт на арабском и английском для компании в ОАЭ: RTL и поиск

Сайт на арабском и английском для компании в ОАЭ это две версии одного сайта на общем шаблоне: английская читается слева направо, арабская справа налево (RTL), у каждой свой адрес страницы, и поисковик знает, что они друг другу соответствуют. Сделать арабскую версию хорошо значит решить три задачи: правильно перевернуть интерфейс, перевести тексты с проверкой носителем языка и настроить поиск так, чтобы арабоязычный клиент попадал на арабскую страницу.

Зачем компании в ОАЭ сайт на арабском

На официальном портале правительства ОАЭ в разделе о защите прав потребителей со ссылкой на Federal Law No. 15 of 2020 сказано, что счёт потребителю выставляется на арабском, другие языки поставщик добавляет по желанию. Для интернет-торговли там же перечислены обязанности, и среди них информация о товаре или услуге на арабском. Если у вас интернет-магазин или запись на услуги для людей в Эмиратах, закладывайте арабские карточки, условия и чеки в бюджет сразу. Про счета и переход на электронные инвойсы я писал отдельно в статье про НДС и электронные счета в ОАЭ.

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

Атрибуты lang и dir: с чего начинается RTL-вёрстка

W3C в материале о направлении текста в HTML советует ставить dir="rtl" на элемент html, когда весь документ справа налево. Блоки наследуют направление. Направление задают в разметке, через CSS-свойство direction его не задают: оно влияет на смысл текста и должно работать даже без стилей.

Язык и направление это разные вещи. MDN отдельно оговаривает, что атрибут lang не задаёт направление. На арабской странице нужны оба: lang="ar" и dir="rtl".

Отдельная история с текстом, направление которого заранее неизвестно: отзывы, имена, комментарии, поле поиска. Для них W3C рекомендует dir="auto" или элемент bdi, тогда браузер определяет направление по первой «сильной» букве. Английское название компании внутри арабской фразы стоит обернуть в span с dir="ltr", иначе точка или скобка на краю фразы уедет не туда (подробнее в статье W3C про разметку двунаправленного текста).

Зеркалирование интерфейса: что переворачивать

В арабской версии зеркалится всё, что связано с порядком чтения. По моему чек-листу это:

• меню и шапка: логотип уходит вправо, пункты читаются справа налево;
• стрелки «назад» и «вперёд», слайдеры, пагинация, хлебные крошки;
• боковые панели, выпадающие меню, иконки с направлением (стрелка в кнопке «Подробнее»);
• шаги формы и прогресс-бары.

Оставляю как есть:

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

В арабском письме нет заглавных букв, поэтому стиль uppercase для кнопок на арабской версии ничего не даёт. Разрядку (letter-spacing) на арабский текст я не ставлю вовсе: буквы в слове соединяются, и разрядка их разрывает.

Логические свойства CSS вместо left и right

Если стили написаны через left и right, для арабской версии придётся держать второй файл с переопределениями, и он отстаёт от основного при каждой правке. Логические свойства решают это в корне. MDN описывает их так: margin-inline-start работает как отступ слева в английской версии и как отступ справа в арабской, padding-inline-end наоборот, inset-inline-start заменяет left при позиционировании.

На практике я заменяю text-align: left на text-align: start, отступы и рамки на inline-варианты, а flex-раскладка переворачивается сама, потому что следует направлению документа. Иконки со стрелкой отражаю одним правилом для [dir="rtl"].

Шрифты, цифры и даты на арабском

Латинский шрифт с сайта часто не содержит арабских букв, и браузер подставит системный. Я беру пару из одного семейства. Например, на Google Fonts есть Noto Sans Arabic и IBM Plex Sans Arabic. Шрифты кладу на свой сервер и проверяю, что жирное начертание есть и в арабском файле.

С цифрами есть выбор. По тому же документу W3C, в западных арабских странах (Алжир, Марокко) пишут привычными цифрами от 0 до 9, в восточных (Египет, Саудовская Аравия, Ирак) восточно-арабскими ٠١٢٣. ОАЭ в этом списке нет, поэтому решение принимаю вместе с заказчиком и переводчиком. Я проверил, что делает Node.js с данными локалей CLDR 47: для ar-AE число 1234,5 выводится как 1,234.5, для ar-SA как ١٬٢٣٤٫٥. Чтобы не зависеть от версии браузера, систему цифр задаю явно через параметр numberingSystem со значением latn или arab. Даты форматирую через Intl.DateTimeFormat с локалью ar-AE, название месяца он пишет по-арабски сам.

Перевод: переводчик, машина и проверка носителем

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

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

SEO для двух языков: адреса, hreflang и x-default

Google в руководстве по многоязычным сайтам рекомендует отдельный адрес для каждой языковой версии и предупреждает: если менять язык по cookie или настройкам браузера, поисковик может не найти все варианты. Там же он не советует автоматически перекидывать человека на «угаданный» язык, лучше дать ссылки на другие версии. Поэтому у меня схема простая: /en/ и /ar/ на одном домене и переключатель языка в шапке.

Связь между версиями задают теги hreflang. По документации Google каждая версия перечисляет себя и все остальные, иначе теги игнорируются. Код языка по ISO 639-1 (ar, en), регион добавляется по желанию (ar-AE). Значение x-default указывает страницу для тех, чей язык не совпал ни с одной версией, обычно это выбор языка или английская версия. Теги можно поставить в head страницы или в карте сайта, Google считает эти способы равноценными. На больших сайтах я выношу их в sitemap: так проще не забыть ни одну пару. По той же документации Google определяет язык страницы по тексту, атрибут lang он для этого не использует.

Формы и телефоны +971

Форма на арабской версии переворачивается вместе со страницей, но поле телефона по MDN всегда остаётся слева направо: у input type="tel" направление ltr. Номер проверяю библиотекой libphonenumber от Google, она знает план нумерации ОАЭ, самописная регулярка легко отсечёт настоящий номер. Код +971 подставляю по умолчанию, но даю выбрать другую страну: клиенты пишут и с российских номеров. Если человек набрал номер восточно-арабскими цифрами с арабской раскладки, перед проверкой перевожу их в обычные. Сообщения об ошибках переводятся вместе с остальным текстом, и для экранного диктора у полей остаются подписи на обоих языках.

Как проверить арабскую версию перед запуском

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

Как я это делаю

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

Порядок работы такой: глоссарий, перевод, вёрстка с арабским текстом (без «рыбы»: у арабского другая длина строк), вычитка носителем на живом сайте, правки, проверка hreflang и форм. Только после этого запуск. Как я собираю сайты для рынка Дубая на общих данных, видно в разборе четырёх демо-сайтов агентства недвижимости.

Сколько стоит сайт на арабском и английском

• Корпоративный сайт: от 100 000 ₽, срок от 3 недель.
• Лендинг: от 40 000 ₽, от 5 дней.
• Перевод и локализация: от 30 000 ₽, от 3 дней. Это добавление арабской или другой версии к готовому сайту.
• Редизайн без поломки: от 80 000 ₽, если текущий сайт свёрстан через left и right и его нужно перевести на один шаблон для двух направлений.

Для компаний в ОАЭ считаю в рублях или в дирхамах по договорённости. Все позиции собраны на странице цен, а состав работ по сайтам на странице разработки сайтов.

Частые вопросы

Можно сделать арабскую версию на текущем сайте?

Да, если движок поддерживает несколько языков. Сначала я смотрю, как написаны стили: при логических свойствах хватает перевода и настройки, при жёстких left и right добавляется переделка вёрстки.

Хватит ли машинного перевода?

Для черновика и проверки вёрстки хватит. Для публикации нужен переводчик и вычитка носителем языка, а для юридических страниц ещё и юрист.

Какие цифры ставить на арабской версии?

Привычные от 0 до 9 или восточно-арабские ٠١٢٣, это решение заказчика. Систему цифр я в любом случае задаю в коде явно.

Нужен ли отдельный домен для арабской версии?

Нет, Google допускает разные варианты. Я делаю папки /ar/ и /en/ на одном домене: так проще вести один сайт и одну аналитику.

Коротко о главном

Если вы продаёте потребителям в ОАЭ, информация о товаре и счёт на арабском входят в требования о защите прав потребителей, которые приводит портал u.ae. Для B2B арабская версия нужна по ситуации. Технически всё держится на dir="rtl", логических свойствах CSS и явно заданной системе цифр, а для поиска на отдельных адресах с hreflang.

Напишите мне в Telegram кодовое слово «АРАБСКИЙ»: посмотрю ваш сайт и скажу, сколько работы займёт арабская версия.