Поддержка макета для языков с направлением письма справа налево в вашем веб-приложении

Введение#

Logto — это ваш лучший выбор решения для управления идентификацией и доступом клиентов (CIAM). Это решение с открытым исходным кодом и поддерживаемое активным сообществом. Недавно наше сообщество (заслуга @zaaakher) предоставило перевод на арабский язык как для консоли администратора Logto, так и для интерфейса входа в систему Logto, что сделало его более доступным для пользователей, говорящих на арабском языке.

Однако мы понимаем, что одного перевода недостаточно. Мы должны убедиться, что макет пользовательского интерфейса также оптимизирован для языков с направлением письма справа налево. В этом учебнике мы обсудим общие проблемы совместимости с RTL и как их решить в вашем веб-приложении.

Как выглядит веб-приложение с RTL?#

В веб-приложении с направлением письма слева направо (LTR) макет разработан так, чтобы начинаться с левой стороны экрана. Содержание течет слева направо, а полоса прокрутки находится на правой стороне экрана. В отличие от этого, веб-приложение с RTL начинается с правой стороны экрана. Содержание течет справа налево, а полоса прокрутки находится на левой стороне экрана.

Пример скриншота консоли Logto:

Проблемы совместимости с RTL#

При преобразовании веб-приложения с LTR в совместимое с RTL, вы можете столкнуться с следующими проблемами:

1. Выравнивание текста: В режиме RTL текст должен быть выровнен по правому краю.
2. Направление содержимого: Направление содержимого должно быть справа налево в режиме RTL. Например, навигационная боковая панель, диаграммы и т. д.
3. Позиция полосы прокрутки: Полоса прокрутки должна быть на левой стороне экрана в режиме RTL.
4. Иконки и изображения: Некоторые иконки и изображения должны быть зеркально отражены в режиме RTL. Например, иконки с шевронами и т. д.
5. Локализация дат и чисел: Форматировать даты и использовать "Арабско-индийские цифры (٠١٢٣٤٥٦٧٨٩)" вместо "Западных арабских цифр (0-9)" в режиме RTL.
6. Отступы, позиционирование и другое: Другие незначительные корректировки, которые необходимо учитывать, включая отступы и заполнение, радиус границ, абсолютное позиционирование, анимации и т. д.

Как мы справляемся с вышеуказанными проблемами?#

Вот несколько советов и приемов, которые мы использовали, чтобы сделать Logto дружелюбным к RTL:

Используйте HTML-атрибут dir="rtl"#

Примените HTML-атрибут dir="rtl" к корневому элементу вашего веб-приложения, если текущий язык — арабский или любой другой язык с RTL.

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

Реализация компонента для переворота иконок в режиме RTL.#

Когда язык RTL, мы можем использовать CSS transform: scaleX(-1); для горизонтального переворота иконок. Вот пример, написанный на React и TypeScript:

С этим компонентом вы можете обернуть компонент иконки, и он автоматически перевернёт иконку в режиме RTL.

Локализация даты, времени и чисел.#

Используйте функцию JavaScript toLocalString для локализации даты, времени и чисел. Например:

Локализация даты и времени#

Вы также можете выбрать использование библиотеки, такой как date-fns, для обработки локализации даты и времени.

Локализация чисел#

Для чисел вы также можете использовать метод toLocaleString, но с опцией ar-u-nu-arab, чтобы отображать арабско-индийские цифры.

Объяснение

• ar: Обозначает арабский язык.
• u: Обозначает Unicode, позволяя использовать расширения.
• nu-arab: Указывает использование арабско-индийских цифр.

Настройка отступов, позиционирования и прочего.#

Возможно, вам нужно будет настроить отступы, позиционирование, радиус границ и другие стили CSS соответствующим образом. Вот некоторые распространенные случаи:

Отступы и заполнение#

Вместо написания margin-left, margin-right, padding-left и padding-right, вы можете использовать margin-inline-start, margin-inline-end, padding-inline-start и padding-inline-end, чтобы обрабатывать как LTR, так и RTL режимы.

Абсолютное позиционирование#

При использовании абсолютного позиционирования вы можете использовать inset-inline-start и inset-inline-end вместо left и right.

Радиус границ#

При использовании радиуса границ, вы можете использовать border-start-start-radius, border-start-end-radius, border-end-start-radius и border-end-end-radius, чтобы обрабатывать как LTR, так и RTL режимы.

Прочие мелочи#

Могут быть некоторые случаи, которые вы не сможете обработать с помощью указанных выше методов. В таких случаях вы можете использовать псевдокласс :dir(), чтобы применять различные стили в зависимости от направления текста.

Резюме#

В этом учебнике мы обсудили проблемы при реализации дружелюбного интерфейса для RTL и поделились, как мы их решили в Logto Console и Logto Sign-in Experience. Применяя упомянутые выше советы и приемы, вы также можете сделать ваше веб-приложение более доступным для пользователей языков с RTL.