Поддержка макета для языков с направлением письма справа налево в вашем веб-приложении
Этот пост в блоге проведет вас через основные шаги по эффективной реализации поддержки языков с направлением письма справа налево (RTL) в вашем веб-приложении.
CharlesDeveloper
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
Logto — это ваш лучший выбор решения для управления идентификацией и доступом клиентов (CIAM). Это решение с открытым исходным кодом и поддерживаемое активным сообществом. Недавно наше сообщество (заслуга @zaaakher) предоставило перевод на арабский язык как для консоли администратора Logto, так и для интерфейса входа в систему Logto, что сделало его более доступным для пользователей, говорящих на арабском языке.
Однако мы понимаем, что одного перевода недостаточно. Мы должны убедиться, что макет пользовательского интерфейса также оптимизирован для языков с направлением письма справа налево. В этом учебнике мы обсудим общие проблемы совместимости с RTL и как их решить в вашем веб-приложении.
В веб-приложении с направлением письма слева направо (LTR) макет разработан так, чтобы начинаться с левой стороны экрана. Содержание течет слева направо, а полоса прокрутки находится на правой стороне экрана. В отличие от этого, веб-приложение с RTL начинается с правой стороны экрана. Содержание течет справа налево, а полоса прокрутки находится на левой стороне экрана.
При преобразовании веб-приложения с LTR в совместимое с RTL, вы можете столкнуться с следующими проблемами:
Выравнивание текста: В режиме RTL текст должен быть выровнен по правому краю.
Направление содержимого: Направление содержимого должно быть справа налево в режиме RTL. Например, навигационная боковая панель, диаграммы и т. д.
Позиция полосы прокрутки: Полоса прокрутки должна быть на левой стороне экрана в режиме RTL.
Иконки и изображения: Некоторые иконки и изображения должны быть зеркально отражены в режиме RTL. Например, иконки с шевронами и т. д.
Локализация дат и чисел: Форматировать даты и использовать "Арабско-индийские цифры (٠١٢٣٤٥٦٧٨٩)" вместо "Западных арабских цифр (0-9)" в режиме RTL.
Отступы, позиционирование и другое: Другие незначительные корректировки, которые необходимо учитывать, включая отступы и заполнение, радиус границ, абсолютное позиционирование, анимации и т. д.
Примените HTML-атрибут dir="rtl" к корневому элементу вашего веб-приложения, если текущий язык — арабский или любой другой язык с RTL.
Это помогает браузеру понять, что содержимое должно отображаться в режиме RTL, и он автоматически исправит первые три проблемы (выравнивание текста, направление содержимого и позицию полосы прокрутки). Однако, если вы используете пользовательскую полосу прокрутки, вам, возможно, придется настроить её позицию вручную.
Реализация компонента для переворота иконок в режиме RTL.#
Когда язык RTL, мы можем использовать CSS transform: scaleX(-1); для горизонтального переворота иконок. Вот пример, написанный на React и TypeScript:
С этим компонентом вы можете обернуть компонент иконки, и он автоматически перевернёт иконку в режиме RTL.
Возможно, вам нужно будет настроить отступы, позиционирование, радиус границ и другие стили CSS соответствующим образом. Вот некоторые распространенные случаи:
Вместо написания margin-left, margin-right, padding-left и padding-right, вы можете использовать margin-inline-start, margin-inline-end, padding-inline-start и padding-inline-end, чтобы обрабатывать как LTR, так и RTL режимы.
При использовании радиуса границ, вы можете использовать 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.
