RTL Language Support in React: Layout-Mirroring und Best…

TL;DR: Die Unterstützung von Arabisch, Hebräisch, Persisch und Urdu erfordert Layout-Mirroring. Dieser Guide behandelt CSS Logical Properties, dir="rtl"-Handling, die Anpassung von Drittanbieter-Komponenten und das Testen von RTL-Layouts. RTL-Patterns von tanstackship.com.

Einleitung

Mehr als 400 Millionen Menschen lesen von rechts nach links. Die Unterstützung von RTL-Sprachen ist für Märkte im Nahen Osten, in Südasien und Nordafrika unerlässlich. RTL-Support umfasst mehr als nur die Textrichtung – er beeinflusst das Layout, Icons, Animationen und Formularinteraktionen. Für grundlegende i18n-Architekturmuster empfehlen wir i18n für SaaS: Architekturmuster im Vergleich.

RTL-Implementierungsansätze

Ansatz	Aufwand	Zuverlässigkeit	Wartbarkeit
CSS Logical Properties	Gering	Ausgezeichnet	Hoch
`dir`-Attribut + CSS-Flip	Gering	Gut	Mittel
CSS-in-JS mit RTL-Plugin	Mittel	Gut	Mittel
PostCSS RTL-Plugin	Mittel	Sehr gut	Hoch
Manuelle RTL-Stylesheets	Hoch	Schlecht	Sehr gering

CSS Logical Properties (Empfohlen)

css

/* Vorher (physische Properties – funktionieren nicht bei RTL) */
.sidebar {
  margin-left: 16px;
  padding-right: 24px;
  border-left: 1px solid #e5e7eb;
  text-align: left;
}

/* Nachher (logische Properties – passen sich automatisch an RTL an) */
.sidebar {
  margin-inline-start: 16px;
  padding-inline-end: 24px;
  border-inline-start: 1px solid #e5e7eb;
  text-align: start;
}

Physische Property	Logisches Äquivalent
`left`	`inset-inline-start`
`right`	`inset-inline-end`
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`padding-left`	`padding-inline-start`
`padding-right`	`padding-inline-end`
`border-left`	`border-inline-start`
`border-right`	`border-inline-end`

React RTL-Kontext

tsx

// RTL-Provider-Komponente
function RTLProvider({ locale, children }: { locale: string; children: React.ReactNode }) {
  const direction = getDirection(locale) // 'rtl' oder 'ltr'
  
  useEffect(() => {
    document.documentElement.dir = direction
    document.documentElement.lang = locale
  }, [direction, locale])
  
  return (
    <ThemeProvider theme={{ direction }}>
      {children}
    </ThemeProvider>
  )
}

// Hook für bedingte RTL-Styles
function useRTL() {
  const { i18n } = useTranslation()
  const isRTL = ['ar', 'he', 'fa', 'ur'].includes(i18n.language)
  
  return {
    isRTL,
    direction: isRTL ? 'rtl' : 'ltr',
    // Icons spiegeln
    fliplcon: (icon: string) => isRTL ? `${icon}-flip` : icon,
    // Animationsrichtung anpassen
    slideDirection: isRTL ? 'left' : 'right',
  }
}

Kompatibilität von Drittanbieter-Komponenten

Komponentenbibliothek	RTL-Support	Hinweise
Radix UI	Vollständig	Erkennt `dir`-Attribut automatisch
shadcn/ui	Vollständig	Erbt von Radix UI
TanStack Table	Gut	Manuelle Spaltenausrichtung erforderlich
TanStack Form	Vollständig	Respektiert `dir`-Attribut
Recharts	Teilweise	Achsenbeschriftungen erfordern manuelle Konfiguration
TipTap Editor	Vollständig	RTL über `direction`-Extension

RTL-Layouts testen

tsx

// Playwright RTL-Test
test('Dashboard wird korrekt auf Arabisch gerendert', async ({ page }) => {
  await page.goto('/ar/dashboard')
  
  // Dokumentrichtung prüfen
  const dir = await page.getAttribute('html', 'dir')
  expect(dir).toBe('rtl')
  
  // Layout-Mirroring prüfen
  const sidebarBox = await page.locator('[data-testid="sidebar"]').boundingBox()
  const mainBox = await page.locator('[data-testid="main-content"]').boundingBox()
  
  // Bei RTL sollte die Sidebar rechts sein
  expect(sidebarBox.x + sidebarBox.width).toBeCloseTo(mainBox.x, 0)
  
  // Visueller Snapshot-Vergleich
  await expect(page).toHaveScreenshot('dashboard-ar.png')
})

Fazit

Beginnen Sie mit CSS Logical Properties – sie bewältigen 90 % des RTL-Layouts automatisch. Fügen Sie einen locale-bewussten RTL-Kontext-Provider hinzu, testen Sie mit Playwright-Visual-Snapshots und prüfen Sie Drittanbieter-Komponenten auf RTL-Kompatibilität. Die Unterstützung der vier wichtigsten RTL-Sprachen (Arabisch, Hebräisch, Persisch, Urdu) öffnet den Zugang zu schnell wachsenden Märkten.

Für die Navigation in diesen Märkten empfehlen wir den Guide für den Markteintritt im Nahen Osten. Locale-bewusste Formatierung wird in Lokalisierung von Datum-, Zeit-, Zahlen- und Währungsformaten behandelt. Für responsive Layout-Patterns bietet unser CSS Container Queries Guide moderne Alternativen.