В мире латиницы и кириллицы все кажется таким привычным и понятным. Интуитивно знаешь, где должна быть call to action, как расположить подписи к полям ввода... И вдруг из этой зоны комфорта вышвыривает задача по адаптации макета на иврит.
Мир в моих глазах из left-to-right перевернулся в right-to-left.
С одной стороны, может показаться, что здесь нет ничего сложного, нужно только отразить весь макет, и пользователи будут довольны. Во многом так и есть. Но в right-to-left языках достаточно много нюансов и микроправил, которые не так просто было найти и пришлось собирать по крупицам. В этой статье мы расскажем вам, что удалось узнать за время нашего проекта с адаптацией на иврит — DOKKA.
Символы и текст
Для начала разберемся в терминологии.
Left-to-Right (LTR) — письмо, которое начинается с левого края страницы и продолжается вправо. Это всем нам привычные кириллица и латиница и тому подобные.
Right-to-Left (RTL) — письмо, которое начинается с правого края страницы и продолжается влево. Самые распространенные здесь арабский, иврит, персидский.
Также есть двунаправленное письмо — Bidirectional (BIDI) — содержит текст в направлении как слева направо, так и справа налево. Часто такое происходит, когда совмещаются символы из разных алфавитов. Иврит как раз подходит к этому описанию, так как использует привычные нам арабские цифры, а они пишутся слева направо.
Изображение с сайта behance.net
Кстати, нужно уточнить: то, что мы называем арабскими цифрами, в самом арабском алфавите не используется:
У иврита также есть свои символы для цифр, но они используются преимущественно в религиозных текстах, поэтому обычно они пишут европейскими. А вот римских цифр следует вообще избегать.
В зависимости от гарнитуры, отображение символов может отличаться. Для нас такие различия могут быть незаметны, а вот для нативных пользователей нет. Поэтому, во-первых, нужно выбирать проверенный шрифт, а во-вторых, протестировать его на пользователях.
Например, шрифты можно подобрать на codepen.io или сразу на fonts.google.com
И само собой, выравнивание текста по умолчанию — по правому краю. Допускается выравнивание по центру.
Символы в арабском алфавите отличаются по ширине от латинских, что создает визуальное различие на сайте. Поэтому не забывайте тестировать «узкие места» типа полей для ввода, где есть вероятность, что весь текст не поместится. Наш совет — оставлять немного больше горизонтального пространства для RTL-языков.
Особенность арабского языка — имена зачастую состоят из трех частей: имя данное при рождении, имя отца и семейное имя. Для таких случаев нужно предусматривать три поля.
Локализуйте даты. Это касается не только RTL, но и в целом формата дат, которые у разных стран могут отличаться. Если сомневаетесь, как правильно, лучше проверьте.
Еще один совет не только для RTL, но для мультиязычных сайтов в целом. Делайте выбор языка для пользователей простым и понятным:
Изображение с сайта dribbble.com
Макет
Самое главное, что нужно понимать: RTL-пользователи сканируют страницу, начиная с правого верхнего края. Поэтому важная информация должна располагаться справа вверху. Но чаще всего сначала готовится LTR-макет, а затем адаптируется под RTL. С текстом проблем возникнуть не должно, а вот с изображениями может. Их также важно адаптировать под RTL-пользователей, и если важная информация находится в левой части изображения, то сделать новый вариант с отражением.
Изображение с сайта priority-software.com
Что нужно сделать, чтобы LTR-макет превратить в RTL:
- текстовые поля и иконки расположить на противоположной стороне;
- кнопки навигации поставить в противоположном порядке;
- иконки, которые указывают направление, например стрелки, отразить;
- текст выровнять по правому краю.
Не нужно отражать:
- иконки, в которых нет указаний направления, например фотоаппарат;
- цифры и часы;
- графики;
- предметы, которые держат в правой руке (вроде кружки или лупы), так как они не имеют отношения к направлению, а лишь ссылаются на то, что большинство людей — правши.
Подробнее о том, какие иконки отражать, а какие нет, можно почитать в гайдах Material Design
Календарь. Правильнее календарь отражать, но далеко не все сайты это делают, что доказывают два примера ниже:
Изображения с сайта bac.org.il и cdb.org.il
Проблемы при работе с right-to-left макетом
Помимо визуальных тонкостей, была одна значительная техническая загвоздка. Оказалось, при вставке текста на иврите в графические редакторы типа Sketch и Figma, символы идут в противоположном порядке. Sketch к этому времени решил проблему и добавил автоматическую адаптацию, но для вставки текста на иврите в Figma приходится немного повозиться и использовать Reverse Text Generator, например textmechanic.com
Примеры right-to-left интерфейсов
Теперь подробнее остановимся на том, как выглядят сайты на иврите.
Вот так выглядит сайт майкрософт:
Давайте посмотрим на левый верхний угол. Дизайнеры правильно адаптировали кнопку — иконка и направление анимации на ней указывают влево. Можно было бы придраться, что отразили иконку лупы, но она выглядит так же и в английской версии сайта. А вот иконку тележки по-хорошему можно было бы отразить: сейчас она указывает направление слева направо.
На этом сайте новостная лента движется справа налево, а чат открывается слева внизу:
Этот пример показывает, как правильно должны работать элементы, но красоты в нем мало. Теперь посмотрим на пару более визуально приятных страниц.
На cайте Annanuna движение на видео идет справа налево. Заголовки справа. Правильно подобраны иллюстрации. Глаз радуется :)
Другая страница этого сайта. Здесь по правилам иконки, указывающие направление, должны отражаться. И лого внизу страницы движутся слева направо, а должны наоборот.
Во время работы над проектом появился вопрос, куда поставить знак процента: до или после числа. Правильно вот так, как в LTR:
Изображение с сайта tzina.space
На сайте createmagazine.co.il можно посмотреть на пример правильной пагинации:
Интересный пример с заполнением полей слева направо на сайте int-college.co.il
Хочется отдельно отметить, что большинство сайтов, которые довелось видеть, имеют режим для людей с ограниченными возможностями. Это очень заботливо.
В заключение
Надеюсь, эти советы помогут вам лучше и безболезненно справиться с адаптацией макетов для right-to-left. К тому же видеть свой макет отзеркаленным — неплохая тренировка для мозга :)
Но все же наш главный совет: если сомневаетесь как сделать, спросите у нативного пользователя.
