Prise en charge des mises en page de droite à gauche (RTL)

Adapter votre mise en page pour les langues comme l'arabe et l'hébreu

Problème

La mise en page d'une application est construite avec des propriétés CSS comme margin-left et padding-right, qui supposent une direction de texte de gauche à droite (LTR). Lorsque l'application est traduite dans une langue RTL comme l'arabe ou l'hébreu, toute la mise en page apparaît à l'envers, avec un contenu mal aligné et illisible.

Solution

Passez des propriétés CSS directionnelles (left/right) à leurs équivalents logiques modernes, indépendants de la direction (start/end). Définissez l'attribut dir sur l'élément <html> en fonction de la langue actuelle, et le navigateur inversera automatiquement la mise en page correctement.

Étapes

1. Définir quelles langues sont RTL

Tout d'abord, vous devez déterminer lesquelles de vos langues prises en charge sont RTL.

Créez un nouveau fichier app/i18n-config.ts (ou mettez à jour celui existant) pour stocker cette information.

// 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. Définir l'attribut dir dans la mise en page racine

Modifiez votre app/[lang]/layout.tsx pour ajouter conditionnellement l'attribut dir (direction) à la balise <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>
  );
}

En ajoutant dir="rtl" à la balise <html>, vous indiquez au navigateur que tout le flux du document doit être de droite à gauche pour cette page.

3. Mettre à jour le CSS pour utiliser les propriétés logiques

Parcourez votre CSS global et les styles de vos composants. Remplacez toutes les propriétés directionnelles par leurs équivalents logiques.

  • margin-left devient margin-inline-start
  • margin-right devient margin-inline-end
  • padding-left devient padding-inline-start
  • padding-right devient padding-inline-end
  • left (en positionnement) devient inset-inline-start
  • right (en positionnement) devient inset-inline-end
  • text-align: left devient text-align: start
  • text-align: right devient text-align: end

Exemple :

Avant (directionnel) :

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

Après (logique) :

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

Lorsqu'un utilisateur visite /en (dir="ltr"), padding-inline-start est appliqué à gauche. Lorsqu'un utilisateur visite /ar (dir="rtl"), le navigateur applique automatiquement padding-inline-start à droite, inversant correctement la disposition de votre composant.