Leçon 4 : RTL et PWA — une UI qui fonctionne dans les deux sens d'écriture et s'installe comme une app
Une app fintech israélienne bien connue : magnifique — mais des nombres alignés à gauche, des boutons qui débordent sur iOS, et une police anglaise sur du contenu hébreu. Quatre bugs dans une seule capture d'écran. Tous évitables avec les propriétés CSS logiques.
Une propriété CSS logique comprend le sens du texte. Au lieu de dire « ajoute de l'espace à gauche », elle dit « ajoute de l'espace au début ». En RTL, le « début » est à droite. En LTR, le « début » est à gauche.
- CSS logical properties
- Des propriétés CSS qui se réfèrent au sens du texte (« start », « end ») plutôt qu'à une direction physique (« left », « right »). Fonctionnent correctement aussi bien en RTL qu'en LTR.
- PWA (Progressive Web App)
- Une web app qui peut être installée sur l'écran d'accueil iOS/Android, fonctionne hors ligne, et apparaît sans barre d'adresse, comme une app native.
- BiDi (Bidirectional text)
- Du texte qui mélange les sens d'écriture — de l'hébreu avec des nombres étrangers, des noms de marque anglais à l'intérieur de phrases hébraïques. Le HTML `<bdi>` et le CSS `unicode-bidi` gèrent ça.