Le droite-à-gauche n'est pas un simple changement de police. La direction inverse la mise en page, l'ancrage et le sens même de gauche et droite, et un design bâti sur des propriétés physiques casse d'une manière invisible jusqu'à ce que quelqu'un lise la page. Cette compétence trouve ces défauts méthodiquement plutôt qu'au hasard.
QUAND S’EN SERVIR
À utiliser avant de livrer l'arabe, l'hébreu, le farsi ou l'ourdou, ou lorsqu'une locale RTL affiche des textes qui se chevauchent, des URL en miroir ou des animations qui partent dans le mauvais sens.
---
name: rtl-layout-audit
description: À utiliser avant de livrer l'arabe, l'hébreu, le farsi ou l'ourdou, ou lorsqu'une locale RTL affiche des textes qui se chevauchent, des URL en miroir ou des animations qui partent dans le mauvais sens.
---
# Audit de mise en page RTL
Le droite-à-gauche n'est pas un simple changement de police. La direction inverse la mise en page, l'ancrage et le sens même de gauche et droite, et un design bâti sur des propriétés physiques casse d'une manière invisible jusqu'à ce que quelqu'un lise la page. Cette compétence trouve ces défauts méthodiquement plutôt qu'au hasard.
## Ce qu’il vous faut d’abord
- Le site fonctionnant dans une locale RTL
- Une console de navigateur
## Méthode
1. Remplacez partout les propriétés physiques par leurs équivalents logiques : margin-inline, padding-inline, inset-inline, text-align start et end. Cela résout l'essentiel des dégâts d'un coup.
2. Isolez chaque îlot latin avec unicode-bidi. Sinon les URL, le code, les noms de marque et les numéros de version se réordonnent catastrophiquement — « https:// » s'affiche couramment en « //:https ».
3. Auditez séparément l'ancrage du texte SVG. En SVG, la direction redéfinit aussi ce que signifie text-anchor start, si bien que les libellés ancrés à gauche s'envolent hors du canvas. Utilisez unicode-bidi plaintext, qui corrige l'ordre sans toucher à l'ancrage.
4. Vérifiez tout ce qui est animé par transform. Les marquees et les carrousels ne se reflètent pas automatiquement, et une piste construite en flex déplacera la moitié dupliquée, faisant saccader une boucle censée être continue.
5. Vérifiez les champs qui doivent rester LTR — un champ URL dont le préfixe de protocole se trouve dans un élément séparé se scindera, envoyant les deux moitiés aux extrémités opposées du cadre.
6. Lisez la page à 375px autant qu'en desktop. Les bugs RTL se concentrent là où l'espace est compté.
## Ce que ça produit
Une liste de défauts regroupés par cause — propriétés physiques, isolation manquante, ancrage SVG, animation par transform — chacun accompagné de la règle précise qui le résout.
## Là où ça dérape
- Poser direction rtl sur un SVG, ce qui envoie hors écran tous les libellés ancrés à gauche
- Inverser une animation globalement, ce qui annule l'alternance sur les rangées déjà inversées
- Croire qu'une police prenant en charge l'arabe suffit — le seul letter-spacing casse déjà les liaisons arabes
---
Extrait de la bibliothèque de compétences QuQi - https://www.quqi.io/fr/skills/rtl-layout-audit
Téléchargement gratuit · sans compte, sans e-mail
Une liste de défauts regroupés par cause — propriétés physiques, isolation manquante, ancrage SVG, animation par transform — chacun accompagné de la règle précise qui le résout.