---
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