Compatibilidad con diseños de derecha a izquierda (RTL)

Adaptar tu diseño para idiomas como árabe y hebreo

Problema

El diseño de una aplicación se construye con propiedades CSS como margin-left y padding-right, que asumen una dirección de texto de izquierda a derecha (LTR). Cuando la aplicación se traduce a un idioma RTL como árabe o hebreo, todo el diseño aparece al revés, con el contenido desalineado e ilegible.

Solución

Cambia de propiedades CSS direccionales (left/right) a sus equivalentes lógicos modernos e independientes de la dirección (start/end). Establece el atributo dir en el elemento <html> según el idioma actual, y el navegador invertirá automáticamente el diseño de forma correcta.

Pasos

1. Define qué idiomas son RTL

Primero, necesitas una forma de saber cuáles de tus idiomas compatibles son RTL.

Crea un nuevo archivo app/i18n-config.ts (o actualiza el existente) para almacenar esta información.

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=Arabic, he=Hebrew
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

export const rtlLocales = ['ar', 'he'];

2. Establece el atributo dir en el diseño raíz

Modifica tu app/[lang]/layout.tsx para agregar condicionalmente el atributo dir (dirección) a la etiqueta <html>.

// app/[lang]/layout.tsx
import { rtlLocales } from '@/i18n-config';

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'ar' }, { lang: 'he' }];
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  // Determine if the current language is RTL
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...your providers and content... */}
        {children}
      </body>
    </html>
  );
}

Al agregar dir="rtl" a la etiqueta <html>, le estás indicando al navegador que todo el flujo del documento debe ser de derecha a izquierda para esta página.

3. Actualiza el CSS para usar propiedades lógicas

Revisa tu CSS global y los estilos de componentes. Reemplaza todas las propiedades direccionales con sus equivalentes lógicos.

  • margin-left se convierte en margin-inline-start
  • margin-right se convierte en margin-inline-end
  • padding-left se convierte en padding-inline-start
  • padding-right se convierte en padding-inline-end
  • left (en posicionamiento) se convierte en inset-inline-start
  • right (en posicionamiento) se convierte en inset-inline-end
  • text-align: left se convierte en text-align: start
  • text-align: right se convierte en text-align: end

Ejemplo:

Antes (direccional):

.card {
  padding-left: 16px;
  border-left: 4px solid blue;
}
.title {
  text-align: left;
}

Después (lógico):

.card {
  padding-inline-start: 16px;
  border-inline-start: 4px solid blue;
}
.title {
  text-align: start;
}

Cuando un usuario visita /en (dir="ltr"), padding-inline-start se aplica a la izquierda. Cuando un usuario visita /ar (dir="rtl"), el navegador aplica automáticamente padding-inline-start a la derecha, invirtiendo correctamente el diseño de tu componente.