Unterstützung für Rechts-nach-Links

Eine Schritt-für-Schritt-Anleitung zum Hinzufügen von Rechts-nach-Links (RTL) Unterstützung zu Ihrer Anwendung

Überblick

Während die meisten Sprachen von links nach rechts (LTR) geschrieben werden, werden einige Sprachen von rechts nach links (RTL) geschrieben. Zu diesen Sprachen gehören Arabisch, Hebräisch, Persisch und Urdu, die zusammen über 500 Millionen Sprecher weltweit haben.

Schauen Sie sich die allgemeine Übersetzungs-Startseite auf Englisch und Arabisch an, um den Unterschied zwischen LTR- und RTL-Darstellung zu veranschaulichen.

Anleitung

Um RTL-Unterstützung zu Ihrer Anwendung hinzuzufügen, müssen wir lediglich die Richtung der Sprache bestimmen und die Richtung des Textes auf dem Bildschirm entsprechend einstellen.

Sie können die Funktion getLanguageDirection() aus der Bibliothek generaltranslation verwenden, um festzustellen, ob eine Sprache "rtl" oder "ltr" ist.

Verwenden Sie die Funktion getLocale(), um das Gebietsschema im Root-Layout zu erhalten, und fügen Sie dann die lang- und dir-Props zum <html>-Tag hinzu:

my-app/app/layout.tsx

import { getLocale } from 'gt-next'
import { getLanguageDirection } from 'generaltranslation';
 
export default async function RootLayout({ children }) {
        
  const locale = await getLocale(); // z.B. "ar" für Arabisch
  const dir = getLanguageDirection(locale); // z.B. "rtl" für "right-to-left"
 
  return (
    <html lang={locale} dir={dir}>
      <body> 
        {children}
      </body>
    </html>
  )
}

Unterstützung für Rechts-nach-Links

Überblick

Anleitung

Auf dieser Seite