Soporte de derecha a izquierda
Una guía paso a paso para agregar soporte de derecha a izquierda (RTL) a tu aplicación
Descripción general
Aunque la mayoría de los idiomas se escriben de izquierda a derecha (LTR), algunos idiomas se escriben de derecha a izquierda (RTL). Estos idiomas incluyen árabe, hebreo, persa y urdu, que en conjunto suman más de 500 millones de hablantes en todo el mundo.
Consulta la página principal de General Translation en inglés y árabe para ilustrar la diferencia entre la visualización ltr y rtl.
Guía
Para agregar soporte RTL a tu aplicación, todo lo que necesitamos hacer es determinar la dirección del idioma y establecer la dirección del texto en la pantalla en consecuencia.
Puedes usar la función getLocaleDirection() de la biblioteca generaltranslation
para determinar si un idioma va "rtl" o "ltr".
Usa la función getLocale() para obtener el locale en el layout raíz, luego agrega las props lang y dir a la etiqueta <html>:
import { getLocale } from 'gt-next'
import { getLocaleDirection } from 'generaltranslation';
export default async function RootLayout({ children }) {
const locale = await getLocale(); // e.g. "ar" for Arabic
const dir = getLocaleDirection(locale); // e.g. "rtl" for "right-to-left"
return (
<html lang={locale} dir={dir}>
<body>
{children}
</body>
</html>
)
}¿Qué te parece esta guía?