RTL: от сложности восприятия до нюансов Unicode

Привет, я Виген Мовсисян, Frontend Developer в QIC digital hub. До начала работы в катарской компании я не сталкивался с задачами по адаптации интерфейсов для различных регионов. Однако в современном мире создание мультиязычных сайтов становится неотъемлемой частью веб-разработки, что значительно расширяет круг задач каждого разработчика.

Один из ключевых инструментов для создания таких сайтов — поддержка переводов на разные языки, и здесь на помощь приходит i18n (internationalization). Эта технология играет важную роль в удобстве использования продукта людьми из разных уголков мира. Название i18n также несет в себе особый смысл: "18" — это количество букв между 'i' и 'n' в английском слове "internationalization".

Однако, ограничиться лишь использованием i18n нельзя. Работая в компаниях, базирующихся в странах, где письменность идет справа налево (RTL — right-to-left), разработчики сталкиваются с нетипичными проблемами. О них и пойдёт речь в моей статье.

Прежде, чем говорить о сложностях, давайте рассмотрим, почему i18n является ключевым компонентом мультиязычных сайтов. Благодаря i18n достаточно иметь только JSON-файлы с переводами и настроенные конфиги сборщика. Далее вместо хардкорных строк можно передавать ключи, которые будут подстраиваться под язык пользователя. Эта технология обеспечивает гибкость адаптации контента под различные языки, учитывая особенности локализации. Однако, когда речь идет об арабоязычных компаниях, таких как QIC, возникают интересные задачи.

Сложности заключаются в адаптации интерфейсов и стилей для поддержки направления письма справа налево. Это касается не только текста, но и визуальных элементов, таких как кнопки, меню и изображения. Разработчику важно не только обеспечить правильное отображение текста, но и сохранить эффективность и удобство работы с интерфейсами для пользователей, которые привыкли к RTL-расположению.

С течением времени интернет стал неотъемлемой частью повседневной жизни, проникая в самые отдаленные уголки мира. Однако, когда речь заходит о Ближнем Востоке статистика за период с 2000 по 2023 годы предоставляет интересные данные. Согласно исследованиям, количество интернет-пользователей за этот период вырос в 62 раза. Это является явным индикатором того, как быстро и энергично регион начал использовать цифровые технологии.

Тем не менее, несмотря на внушительный прирост, доля пользователей, предпочитающих писать и читать справа налево, остается скромной. Только 3,8% от числа всех пользователей всемирной сети — жители Ближнего Востока. Казалось бы 3,8% — это довольно мало. Однако, если переводить проценты в численность людей, то мы получим порядка 200+ миллионов. Это число отражает огромные возможности для роста цифрового бизнеса и привлечения новых пользователей.

Предлагаю представить себя на месте разработчика в QIC digital hub и разобрать несколько примеров. Подумайте, что не так в каждом случае. Ниже я приведу правильные ответы.

Ответы:

На первой картинке, все в порядке. Да, знак вопроса находится в конце предложения (слева), и он перевернут. Правильный вариант ответа — 4.

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

Пример на третьей картинке тяжело даже прочесть, не так ли? Также тяжело это прочесть и жителям RTL-регионов, ведь номер телефона должен писаться идентично LTR. Правильный вариант ответа — 2.

Unicode — стандарт кодирования символов. Он играет ключевую роль в обеспечении поддержки различных языков и направлений текста. В контексте направления справа налево (RTL), такого, как арабский или иврит, Unicode классифицирует символы как сильные, слабые и нейтральные.

Сильные символы в Unicode обычно имеют четко определенное направление текста и включают в себя большинство символов арабского алфавита и алфавита иврита. Такие символы, как буквы, устанавливают явное направление текста и не поддерживают переключение направления внутри строки.

Пример сильного символа: «م» (арабская буква «мим»).

Слабые символы могут быть направлены слева направо (LTR) или справа налево (RTL) в зависимости от контекста. Этот тип включает в себя символы пунктуации и цифры. Они могут изменять направление в соответствии с окружающим текстом.

Пример слабого символа: «5» (цифра пять).

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

Пример нейтрального символа: « » (пробел).

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

Сложно и хочется отозвать свое CV из зарубежной компании? Стойте, давайте разберем на пальцах:

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

На второй картинке изображено действие алгоритма BIDI (Bidirectional), который помогает корректно отображать текст, состоящий из символов с разным направлением письма.

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

При движении курсора вправо, он идет по логике текста: сначала по английским символам (слева на право), затем переходит на арабские (идет справа на лево) и потом снова на английские символы (слева на право).

Давайте устроим эксперимент, зайдите в Google, кликните на инпут поисковой строки правой кнопкой мыши, и наведите на Writing Direction, дальше выбирайте RTL. Если начать печатать текст, возникает баг: курсор оказывается за иконкой микрофона :)

Теперь, когда вы выбрали RTL, кликните на свой клавиатуре на «(», удивились?

В RTL-мире скобки переворачиваются и доламывают мозг человека, привыкшего к LTR.

Тег : эффективное управление направлением текста

Атрибут lang: маркировка языка для локализации и семантики

Атрибут dir: управление направлением текста

Включение тега и атрибутов lang и dir в ваш HTML не только улучшает визуальное представление и семантическую структуру веб-страниц, но и значительно повышает их доступность для международной аудитории. Эти элементы помогают в создании инклюзивных веб-сред, удобных для пользователей из различных языковых и культурных контекстов, и обеспечивают более высокую видимость контента в поисковых системах по всему миру.

Так, давайте сверстаем страницу с котиками

Установим dir=rtl

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

Неужели каждый раз из-за right и left свойств так мучиться? Нет, есть логические свойства в CSS, которые нам помогут, давайте изучать.

CSS Logical Properties - это набор свойств в CSS, предназначенных для работы с различными направлениями текста и расположением контента. Они предоставляют абстракцию от физических направлений (лево-право, верх-низ) и позволяют легко адаптировать дизайн для разных языков.

Прежде чем были введены логические свойства, для управления расположением элементов в CSS использовались физические свойства, такие как margin-left, margin-right, padding-top, и т.д. Однако такой подход не учитывал различные направления текста, что усложняло создание универсальных и легко адаптируемых стилей.

CSS Logical Properties включают следующие ключевые свойства:

Давайте рассмотрим на примере:

Ссылка на can i use, показывает, что логические свойства можно смело использовать в энтерпрайз проектах.

Действительно, не все иконки требуют переворота между макетами слева направо и справа налево. Некоторые иконки остаются симметричными и сохраняют свою читаемость и понимание в обоих направлениях.

Однако для некоторых иконок важно изменить их направление в макетах RTL, чтобы они могли быть поняты пользователем.

Но всегда есть исключения. В соответствии с рекомендациями Material Design, если иконка представляет объект, который может быть удержан в правой руке человека, то ее не нужно переворачивать.

Правильное именование классов CSS является важным аспектом в разработке, особенно когда дело касается поддержки макетов для различных направлений.

Допустим, для нейминга классов мы используем методологию БЭМ (Блок-Элемент-Модификатор): у нас есть блок menu, и 2 элемента, это __left и __right, кажется ваш коллега будет очень злиться на вас, когда для RTL версии сайта элемент с названием menu__right будет находиться у него слева 🤡

Мы рассмотрели основные сложности при переходе на RTL и разобрали методы для успешной работы с подобными сайтами: HTML-атрибуты, CSS Logical Properties, логику отображения графических элементов. Надеюсь теперь, вооружившись знаниями и готовые покорить мир RTL, ваши проекты станут еще более доступными и удобными для пользователей по всему миру!

Чтобы познакомиться с темой глубже, посмотрите видео моего выступления на HolyJs на YouTube.