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 la prise en charge RTL à votre application, il suffit de déterminer la direction de la langue et de définir la direction du texte à l'écran en conséquence.
Vous pouvez utiliser le hook useLocaleDirection()
pour déterminer si une langue s'écrit de droite à gauche "rtl"
ou de gauche à droite "ltr"
.
Utilisez la fonction useLocale()
pour obtenir la locale dans le layout racine, puis ajoutez les props lang
et dir
à la balise <html>
:
import { useLocale, useLocaleDirection, GTProvider } from 'gt-next'
export default function RootLayout({ children }) {
const locale = useLocale(); // par exemple "ar" pour l'arabe
const dir = useLocaleDirection(); // par exemple "rtl" pour "de droite à gauche"
return (
<html lang={locale} dir={dir}>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
)
}
Comment trouvez-vous ce guide ?