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

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

Чем арабская версия сайта отличается от обычной

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

Разница в LTR и RTL

Подъехали аббревиатуры. LTR (Left to Right) и RTL (Right to Left) описывают, как текст и элементы интерфейса должны быть организованы на веб-странице. По сути, они отличаются тем, как пользователь просматриваем контент на экране.

Просто запомните, что:

LTR — читаем и пишем слева направо, используем в русском и английском языках. 

RTL — читаем и пишем справа налево, используем в арабском и иврите.

Далее пройдёмся по каждой группе элементов, на которые надо обратить внимание и продумать в процессе дизайна.

Оформление текста

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

• Буквы арабского алфавита меньше букв латинского. Поэтому можете на пару пунктов уменьшить размер шрифта, чтобы улучшить читаемость.
• Выравнивайте текст по правому краю.
  

• Учитывайте длину слов — большинства арабских слов короче русских или английских.
• Не сокращайте дни недели и месяцы.
  
• Не меняйте направление слов, которые пишутся латиницей и заимствованы из языков LTR. Например, название компании Apple так и будет выглядеть на сайте, без перевода.

Название отеля будет написано также, как и на LTR

• Не меняйте название цифр, номера телефона, авиарейсов и брендов. То есть, номер +7 911 123 45 67 будет написан также, без изменений. 
• Плюс и минус будут написаны по правилам RTL.
  

Багаж +3 000 ₽ → RUB 3,000+ أمتعة

Посмотрите на цифры под календарём

• Выбирайте для дизайна шрифты, поддерживающие арабский язык. Например, Noto Sans Arabic ExtraCondensed или IBM Plex Sans Arabic →  https://fonts-online.ru/languages/arabic

Оформление цифр

В арабском интервал пишут по правилам RTL. Например, если вы выберете на сайте даты с 2-9, они должны быть написаны так — 9-2.

Валюты

• Символ валюты находится слева от числа — RUB 10,000
• В качестве разделителя тысячной или десятичной части используется запятая. 10 000 → 10,000

• Для рублей используйте код RUB

Изображения

1. Если порядок изображений имеет значение — есть какая-то история, хронология или алфавит, поменяйте их местами по правилам RTL.
2. В векторных иллюстрациях есть смысл менять расположение элементов с направлением. 

Иконки

• Не переворачивайте симметричные иконки и иконки без явного направления. Например, камеру, корзину, профиль пользователя и другие.

• Не меняйте универсальные символы и знаки — например, галочку.
• Иконки с явным направлением делайте зеркальными. Например, в RTL кнопка «Назад» должна указывать направо.
• Учитывайте культурные особенности и альтернативные значения символов. Некоторые иконки — значок копилки или бокал с алкоголем — неуместны на сайтах с RTL.

Недавно на проекте (под NDA)

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

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

Сложно ли реализовать арабскую версию сайта в коде?

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13229 тендеров
проведено за восемь лет работы нашего сайта.

С точки зрения вёрстки особо ничего не усложняется. Для перевода с одного языка на другой есть специальный HTML атрибут dir.

dir определяет направление текста на веб-странице.

Он может принимать значения LTR, RTL или AUTO, где последний позволяет браузеру определить направление текста на основе его содержимого. Особенно полезно, когда на одной странице смешиваются тексты разных направлений.

Как происходит адаптация сайта под RTL и LTR

Для этого у разработчиков есть специальные инструменты автоматизации, которые могут автоматически генерировать стили для написания RTL.

Например, CSS Flexbox и Grid могут автоматически изменять расположение элементов в зависимости от значения атрибута dir . 

С помощью свойств dir и direction сетка с лёгкостью отражается по горизонтали, а какие-то детали можно доработать вручную.

Что это значит для веб-дизайнера, который отдаёт макет разработчикам?

Ничего отдельно готовить для разработчика в макете не нужно, только учесть все особенности дизайна, которые мы прописали выше) Но важно кое-что учесть — проверить макет перед тем, как отдавать в разработку. Почему?

Лишние детали/элементы/страницы мешают разработчикам быстро анализировать макет и оценивать работу. 

Несколько советов по оформлению макета от разработчиков Лиги

Для чистоты и порядка в макетах:

1. Используйте в работе компоненты
2. Делайте UI-kit для цветов, текста и компонентов
3. Цвета в макете задавайте не наложением нескольких цветов друг на друга, а просто одним цветом
4. Продумывайте логику перестроения блоков на адаптиве
5. Однотипные svg оборачивайте во фрейм одного размера
6. Больше общайтесь с разработчиками. Можно даже не по работе)