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

Remplacez les propriétés CSS directionnelles (left/right) par leurs équivalents logiques modernes et 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 avez besoin d'un moyen de savoir 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 ces informations.

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=Arabe, he=Hébreu
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

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

2. Définir l'attribut dir dans le layout 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 };
}) {
  // Déterminer si la langue actuelle est RTL
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...vos fournisseurs et contenu... */}
        {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 des propriétés logiques

Parcourez votre CSS global et les styles de 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 mise en page de votre composant.