Unterstützung für Rechts-nach-Links
Eine Schritt-für-Schritt-Anleitung zur Hinzufügung von Rechts-nach-Links (RTL)-Unterstützung zu Ihrer Anwendung
Überblick
Während die meisten Sprachen von links nach rechts (LTR) geschrieben werden, gibt es einige Sprachen, die von rechts nach links (RTL) geschrieben werden. Zu diesen Sprachen gehören Arabisch, Hebräisch, Persisch und Urdu, die zusammen weltweit über 500 Millionen Sprecher haben.
Schauen Sie sich die General Translation-Startseite auf Englisch und Arabisch an, um den Unterschied zwischen LTR- und RTL-Darstellung zu veranschaulichen.
Guide
Um RTL-Unterstützung zu Ihrer Anwendung hinzuzufügen, müssen wir nur die Richtung der Sprache bestimmen und die Textrichtung auf dem Bildschirm entsprechend einstellen.
Sie können die getLocaleDirection()-Funktion aus der generaltranslation-Bibliothek verwenden, um zu bestimmen, ob eine Sprache "rtl" oder "ltr" verwendet.
Verwenden Sie die getLocale()-Funktion, um das Locale im Root-Layout zu erhalten, und fügen Sie dann die lang- und dir-Props zum <html>-Tag hinzu:
import { getLocale } from 'gt-next'
import { getLocaleDirection } from 'generaltranslation';
export default async function RootLayout({ children }) {
const locale = await getLocale(); // e.g. "ar" for Arabic
const dir = getLocaleDirection(locale); // e.g. "rtl" for "right-to-left"
return (
<html lang={locale} dir={dir}>
<body>
{children}
</body>
</html>
)
}Wie ist dieser Leitfaden?