Prise en charge de la droite vers la gauche
Un guide étape par étape pour ajouter la prise en charge de la droite vers la gauche (RTL) à votre application
Aperçu
Alors que la plupart des langues s'écrivent de gauche à droite (LTR), certaines langues s'écrivent de droite à gauche (RTL). Ces langues incluent l'arabe, l'hébreu, le persan et l'ourdou, qui comptent ensemble plus de 500 millions de locuteurs dans le monde.
Consultez la page d'accueil de General Translation en anglais et en arabe pour illustrer la différence entre le rendu ltr et rtl.
Guide
Pour ajouter le support RTL à votre application, tout ce que nous devons faire est de déterminer la direction de la langue et de définir la direction du texte à l'écran en conséquence.
Vous pouvez utiliser la fonction getLocaleDirection() de la bibliothèque generaltranslation
pour déterminer si une langue va "rtl" ou "ltr".
Utilisez la fonction getLocale() pour obtenir la locale dans la mise en page racine, puis ajoutez les props lang et dir à la balise <html> :
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>
)
}Comment trouvez-vous ce guide ?