Soporte de derecha a izquierda

Una guía paso a paso sobre cómo agregar soporte de derecha a izquierda (RTL) a su aplicación

Resumen

Mientras que 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 tienen un total combinado de más de 500 millones de hablantes en todo el mundo.

Mira la página de inicio de Traducción General en Inglés y Árabe para ilustrar la diferencia entre la representación ltr y rtl.

Guía

Para agregar soporte RTL a su 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.

Puede usar la función getLanguageDirection() de la biblioteca generaltranslation para determinar si un idioma va "rtl" o "ltr".

Use la función getLocale() para obtener la configuración regional en el diseño raíz, luego agregue los props lang y dir a la etiqueta <html>:

my-app/app/layout.tsx

import { getLocale } from 'gt-next'
import { getLanguageDirection } from 'generaltranslation';
 
export default async function RootLayout({ children }) {
        
  const locale = await getLocale(); // e.g. "ar" for Arabic
  const dir = getLanguageDirection(locale); // e.g. "rtl" for "right-to-left"
 
  return (
    <html lang={locale} dir={dir}>
      <body> 
        {children}
      </body>
    </html>
  )
}

Soporte de derecha a izquierda

Resumen

Guía

En esta página