Soporte para diseños de derecha a izquierda (RTL)

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

Problema

El diseño de una aplicación está construido 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 el árabe o el hebreo, todo el diseño aparece al revés, con el contenido mal alineado e ilegible.

Solución

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

Pasos

1. Definir qué idiomas son RTL

Primero, necesitas una forma de saber cuáles de tus idiomas soportados 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=Árabe, he=Hebreo
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

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

2. Establecer el atributo dir en el layout raíz

Modifica tu app/[lang]/layout.tsx para añadir 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 };
}) {
  // Determinar si el idioma actual es RTL
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...tus proveedores y contenido... */}
        {children}
      </body>
    </html>
  );
}

Al añadir 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. Actualizar 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 automáticamente aplica padding-inline-start a la derecha, invirtiendo correctamente el diseño de tu componente.