Unterstützung von Rechts-nach-Links-Layouts (RTL)

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 Links-nach-Rechts-Textrichtung (LTR) voraussetzen. Wenn die Anwendung in eine RTL-Sprache wie Arabisch oder Hebräisch übersetzt wird, erscheint das gesamte Layout rückwärts, wobei Inhalte falsch ausgerichtet und unleserlich sind.

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 spiegeln.

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 Information zu speichern.

// 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. Setzen Sie das dir-Attribut im Root-Layout

Ändern Sie Ihr app/[lang]/layout.tsx, um bedingt das dir-Attribut (Richtung) 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 };
}) {
  // 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>
  );
}

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

3. Aktualisieren Sie CSS zur Verwendung logischer Eigenschaften

Gehen Sie Ihr globales CSS und Ihre Komponenten-Styles durch. 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 (Richtungsbezogen):

.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.