Unterstützung von rechts-nach-links (RTL) Layouts

Anpassung Ihres Layouts für Sprachen wie Arabisch und Hebräisch

Problem

Das Layout einer Anwendung wird mit CSS-Eigenschaften wie margin-left und padding-right erstellt, die eine Textrichtung von links nach rechts (LTR) voraussetzen. Wenn die Anwendung in eine RTL-Sprache wie Arabisch oder Hebräisch übersetzt wird, erscheint das gesamte Layout rückwärts, mit falsch ausgerichtetem und unlesbarem Inhalt.

Lösung

Wechseln Sie von richtungsabhängigen CSS-Eigenschaften (left/right) zu ihren modernen, richtungsunabhängigen logischen Äquivalenten (start/end). Setzen Sie das dir-Attribut auf dem <html>-Element basierend auf der aktuellen Sprache, und der Browser wird das Layout automatisch korrekt umkehren.

Schritte

1. Definieren Sie, welche Sprachen RTL sind

Zunächst benötigen Sie eine Möglichkeit zu wissen, welche Ihrer unterstützten Sprachen RTL sind.

Erstellen Sie eine neue Datei app/i18n-config.ts (oder aktualisieren Sie Ihre bestehende), um diese Informationen zu speichern.

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=Arabisch, he=Hebräisch
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

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

2. Setzen Sie das dir-Attribut im Root-Layout

Modifizieren Sie Ihre app/[lang]/layout.tsx, um das dir (direction)-Attribut bedingt zum <html>-Tag hinzuzufügen.

// 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 };
}) {
  // Ermitteln, ob die aktuelle Sprache RTL ist
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...Ihre Provider und Inhalte... */}
        {children}
      </body>
    </html>
  );
}

Durch das Hinzufügen von dir="rtl" zum <html>-Tag teilen Sie dem Browser mit, dass der gesamte Dokumentfluss für diese Seite von rechts nach links erfolgen soll.

3. CSS aktualisieren, um logische Eigenschaften zu verwenden

Gehen Sie durch Ihr globales CSS und Ihre Komponenten-Styles. Ersetzen Sie alle richtungsabhängigen Eigenschaften durch ihre logischen Äquivalente.

  • margin-left wird zu margin-inline-start
  • margin-right wird zu margin-inline-end
  • padding-left wird zu padding-inline-start
  • padding-right wird zu padding-inline-end
  • left (bei Positionierung) wird zu inset-inline-start
  • right (bei Positionierung) wird zu inset-inline-end
  • text-align: left wird zu text-align: start
  • text-align: right wird zu text-align: end

Beispiel:

Vorher (Richtungsabhängig):

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

Nachher (Logisch):

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

Wenn ein Benutzer /en (dir="ltr") besucht, wird padding-inline-start links angewendet. Wenn ein Benutzer /ar (dir="rtl") besucht, wendet der Browser automatisch padding-inline-start rechts an und spiegelt das Layout Ihrer Komponente korrekt.