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.

El archivo de la habilidad

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

Qué necesitas antes

• El sitio funcionando en un idioma RTL
• Una consola de navegador

Método

1. 01 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. 02 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. 03 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. 04 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. 05 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. 06 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

Usa esta skill en tu propia IA

El archivo es markdown simple, con el nombre y el disparador en su frontmatter. Cuando un asistente sabe cargar skills por su cuenta, es ese frontmatter lo que lee para decidir que esta le aplica.

Más en SEO internacional