El sentido de derecha a izquierda no es un cambio de fuente. La dirección invierte la maquetación, el anclaje y el significado de izquierda y derecha, y un diseño construido con propiedades físicas se rompe de formas invisibles hasta que alguien lee la página. Esta habilidad encuentra las roturas de forma sistemática en lugar de por casualidad.
CUÁNDO USAR ESTO
Úselo antes de publicar en árabe, hebreo, farsi o urdu, o cuando un idioma RTL muestre texto solapado, URL invertidas o animaciones que van al revés.
---
name: rtl-layout-audit
description: Úselo antes de publicar en árabe, hebreo, farsi o urdu, o cuando un idioma RTL muestre texto solapado, URL invertidas o animaciones que van al revés.
---
# Auditoría de maquetación RTL
El sentido de derecha a izquierda no es un cambio de fuente. La dirección invierte la maquetación, el anclaje y el significado de izquierda y derecha, y un diseño construido con propiedades físicas se rompe de formas invisibles hasta que alguien lee la página. Esta habilidad encuentra las roturas de forma sistemática en lugar de por casualidad.
## Qué necesitas antes
- El sitio funcionando en un idioma RTL
- Una consola de navegador
## Método
1. Sustituya las propiedades físicas por lógicas en todo el proyecto: margin-inline, padding-inline, inset-inline, text-align start y end. Esto resuelve de golpe la mayor parte de las roturas.
2. Aísle cada isla latina con unicode-bidi. De lo contrario, las URL, el código, las marcas y los números de versión se reordenan catastróficamente: "https://" suele mostrarse como "//:https".
3. Audite el anclaje de texto en SVG por separado. En SVG, la dirección también redefine lo que significa text-anchor start, así que las etiquetas ancladas a la izquierda salen despedidas del lienzo. Use unicode-bidi plaintext, que corrige el orden sin tocar el anclaje.
4. Revise todo lo animado con transform. Los marquees y carruseles no se reflejan automáticamente, y una pista construida con flex moverá la mitad duplicada, haciendo que un bucle continuo dé tirones.
5. Revise los campos que deben permanecer LTR: un campo de URL con el prefijo del protocolo en un elemento aparte se partirá y colocará las dos mitades en extremos opuestos de la caja.
6. Lea la página a 375px además de en escritorio. Los fallos RTL se concentran donde el espacio es escaso.
## Qué produce esto
Una lista de defectos agrupada por causa (propiedades físicas, falta de aislamiento, anclaje SVG, animación basada en transform), cada uno con la regla concreta que lo resuelve.
## Dónde falla esto
- Poner direction rtl en un SVG, lo que saca de pantalla todas las etiquetas ancladas a la izquierda
- Invertir una animación de forma global, lo que cancela la alternancia en las filas que ya estaban invertidas
- Suponer que basta con una fuente compatible con el árabe: el letter-spacing por sí solo rompe la unión de las letras árabes
---
De la biblioteca de habilidades de QuQi - https://www.quqi.io/es/skills/rtl-layout-audit
Descarga gratis · sin cuenta, sin correo
Una lista de defectos agrupada por causa (propiedades físicas, falta de aislamiento, anclaje SVG, animación basada en transform), cada uno con la regla concreta que lo resuelve.