Ajouter le support droite-à-gauche (RTL) dans votre application mobile

Pourquoi le support RTL est important

Plus de 400 millions de personnes utilisent des langues droite-a-gauche comme l'arabe, l'hebreu et le persan. Le support RTL va au-dela de l'inversion du layout. La navigation, l'alignement du texte, les gestes de balayage et les barres de progression s'inversent tous. Mais les numeros de telephone, les horloges et les controles de lecture multimedia gardent la meme direction. Ce guide couvre l'implementation RTL sur iOS, Android et Flutter.

Qu'est-ce qui change en RTL ?

Le RTL ne se limite pas à inverser la direction du texte. Toute la mise en page de votre interface se reflète :

• La navigation se fait de droite à gauche
• Les boutons retour se déplacent vers le côté droit
• Les barres de progression se remplissent de droite à gauche
• Les éléments de liste s'alignent à droite
• Les icônes avec une signification directionnelle (flèches, etc.) doivent être inversées
• Les paddings et marges changent de côté

RTL sur iOS (SwiftUI)

SwiftUI gère automatiquement la plupart de la mise en page RTL lorsque vous utilisez des composants standards. Les règles clés :

• Utilisez .leading et .trailing au lieu de .left et .right
• Évitez les décalages de frame codés en dur
• Testez avec le réglage de schéma : Edit Scheme → Options → App Language → Right-to-Left Pseudolanguage

RTL sur Android

Ajoutez android:supportsRtl="true" à votre AndroidManifest.xml. Remplacez les attributs Left/Right par Start/End :

android:paddingStart="16dp"   (pas paddingLeft)
android:paddingEnd="16dp"     (pas paddingRight)
android:layoutDirection="locale"

RTL sur Flutter

Les widgets Flutter sont compatibles RTL par défaut lorsqu'ils sont encapsulés dans un MaterialApp avec les délégués de localisation appropriés. Utilisez EdgeInsetsDirectional au lieu de EdgeInsets, et AlignmentDirectional au lieu de Alignment.

Tester le RTL

N'attendez pas d'avoir des traductions arabes pour tester le RTL. Les trois principales plateformes offrent des modes pseudo-RTL qui reflètent votre texte anglais existant, vous permettant de détecter les problèmes de mise en page tôt. LocaleKit signale les problèmes spécifiques au RTL dans votre workflow de traduction et vous aide à gérer le contenu bidirectionnel sur toutes les plateformes.