¿Qué es el soporte RTL (de derecha a izquierda)?

El soporte RTL es la capacidad de un storefront para renderizarse correctamente en idiomas que fluyen de derecha a izquierda, como el árabe, el hebreo, el persa y el urdu. Es mucho más que reflejar el layout: afecta a la tipografía, la iconografía, las animaciones, el comportamiento de los formularios e incluso a cómo se recortan las imágenes de producto.

Definición

El soporte RTL empieza con el atributo HTML dir="rtl", complementado con propiedades lógicas de CSS (margin-inline-start en lugar de margin-left) y un design system que ofrece variantes LTR y RTL de los componentes direccionales. Los números, las divisas y los nombres de producto en alfabeto latino permanecen en LTR dentro de un párrafo RTL, produciendo texto bidireccional que el navegador gestiona mediante el algoritmo Unicode Bidi, pero solo si el markup usa los aislamientos direccionales correctos. La iconografía que implica una dirección (flechas, barras de progreso, carruseles) debe reflejarse en espejo, mientras que los logotipos y los iconos de marca permanecen intactos.

Por qué importa

Oriente Medio y África, junto con partes de Asia Central, representan mercados de ecommerce de rápido crecimiento donde el RTL no es un nicho, sino el estándar. Un storefront que presenta un layout reflejado a medias, con el texto invertido pero el cajón del carrito todavía deslizándose desde la derecha, se siente roto y erosiona la confianza en segundos. Más allá de la estética, el RTL afecta a la finalización del checkout: etiquetas de formulario desalineadas, campos de dirección en el orden equivocado o patrones de número de teléfono en LTR son causas reales de abandono. En un stack de Composable Commerce con un único design system, el soporte RTL también prepara la plataforma para el futuro: añadir ar-SA o he-IL se convierte en un cambio de configuración en lugar de una reconstrucción.

Casos de uso

Un retailer de moda que se expande a ar-AE configura su design system para cambiar los tokens direccionales en la raíz, de modo que el espaciado, la alineación y las variantes de componentes se invierten automáticamente. Un marketplace usa campos de locale del CMS para ofrecer imágenes de hero adecuadas para RTL y garantiza que los textos de producto en árabe usen fuentes tipográficamente apropiadas con un kerning correcto. Una marca de suscripción combina el RTL con Locale Routing de modo que las rutas /ar/ae/ activan tanto el contenido en árabe como la hoja de estilos RTL, mientras que la Storefront API subyacente permanece agnóstica a la dirección. El RTL también interactúa con Edge-Personalization: los experimentos y los banners deben diseñarse teniendo en mente los lados lógicos, no un "left" o "right" fijo.

Relacionado

Explora Multi-Brand and Multi-Market.