Esta publicación de blog te guiará a través de los pasos fundamentales para implementar soporte de idioma RTL (de derecha a izquierda) en tu aplicación web de manera efectiva.
Logto es tu mejor opción de solución de Gestión de Identidad y Acceso de Cliente (CIAM). Es de código abierto y respaldada por una comunidad activa. Recientemente, nuestra comunidad (crédito a @zaaakher) contribuyó con la traducción al idioma árabe tanto para el Logto Admin Console como para Logto Sign-in Experience, haciéndolo más accesible para los usuarios de habla árabe.
Sin embargo, entendemos que tener solo una traducción no es suficiente. Necesitamos asegurarnos de que el diseño de la interfaz de usuario también esté optimizado para idiomas de derecha a izquierda (RTL). En este tutorial, hablaremos sobre los desafíos comunes de la compatibilidad con RTL y cómo abordarlos en tu aplicación web.
En una aplicación web de izquierda a derecha (LTR), el diseño está diseñado para comenzar desde el lado izquierdo de la pantalla. El contenido fluye de izquierda a derecha, y la barra de desplazamiento está en el lado derecho de la pantalla. En contraste, una aplicación web RTL comienza desde el lado derecho de la pantalla. El contenido fluye de derecha a izquierda, y la barra de desplazamiento está en el lado izquierdo de la pantalla.
Tomando como ejemplo una captura de pantalla de Logto Console:
Al convertir una aplicación web LTR a compatible con RTL, puedes encontrar los siguientes desafíos:
Aquí hay algunos consejos y trucos que implementamos para hacer Logto amigable con RTL:
dir="rtl"Aplica el atributo HTML dir="rtl" al elemento raíz de tu aplicación web, si el idioma actual es árabe u otro idioma RTL.
Esto ayuda al navegador a entender que el contenido debe mostrarse en modo RTL, y ajustará automáticamente los primeros tres desafíos (alineación de texto, dirección del contenido y posición de la barra de desplazamiento). Sin embargo, si utilizas una barra de desplazamiento personalizada, puede que necesites ajustar la posición manualmente.
Cuando el idioma es RTL, podemos usar el CSS transform: scaleX(-1); para voltear los iconos horizontalmente. Aquí hay un ejemplo escrito en React y TypeScript:
Con este componente, puedes envolver el componente del icono y automáticamente volteará el icono en modo RTL.
Usa la función de JavaScript toLocalString para localizar fecha, hora y números. Por ejemplo:
También puedes optar por usar una biblioteca como date-fns para manejar la localización de fecha y hora.
Para los números, también puedes usar el método toLocaleString, pero con la opción ar-u-nu-arab para mostrar números arábigo-índicos.
Explicación
Puede que necesites ajustar el espaciado, posicionamiento, radio de borde y otros estilos CSS en consecuencia. Aquí hay algunos casos comunes:
En lugar de escribir margin-left, margin-right, padding-left y padding-right, puedes usar margin-inline-start, margin-inline-end, padding-inline-start y padding-inline-end para manejar tanto modos LTR como RTL.
Cuando uses posicionamiento absoluto, puedes usar inset-inline-start y inset-inline-end en lugar de left y right.
Cuando uses radio de borde, puedes usar border-start-start-radius, border-start-end-radius, border-end-start-radius, y border-end-end-radius para manejar tanto modos LTR como RTL.
Puede que todavía haya algunos casos particulares que no puedas manejar con los métodos anteriores. En tales casos, puedes usar la pseudo-clase :dir() para aplicar diferentes estilos basados en la dirección del texto.
En este tutorial, discutimos los desafíos al implementar una interfaz de usuario amigable con RTL, y compartimos cómo los abordamos en Logto Console y Logto Sign-in Experience. Al aplicar los consejos y trucos mencionados anteriormente, también puedes hacer que tu aplicación web sea más accesible para usuarios de idioma RTL.