2026-06-03 · Redacción Baduno · 8 blog.readMin · Blog & Conocimiento
Diseño RTL: qué cambia cuando la dirección de lectura se invierte
El árabe y el hebreo se leen de derecha a izquierda – y ponen patas arriba las suposiciones de diseño implícitas. Un informe práctico de nuestro sistema de diseño.
Más que un espejo
El enfoque ingenuo –'simplemente reflejar todo'– fracasa rápidamente: los números y las marcas latinas permanecen de izquierda a derecha, los iconos de los reproductores multimedia mantienen su dirección, los números de teléfono se rompen. El diseño RTL implica decidir para cada elemento si es lógico (siguiendo la dirección de lectura) o físico (fijo en dirección).
CSS: propiedades lógicas
La lógica moderna de CSS hace que RTL sea manejable: margin-inline-start en lugar de margin-left, inset-inline-end en lugar de right, text-align:start en lugar de left. Quien escribe de manera lógica desde el principio obtiene la segunda dirección de lectura casi gratis – quien la añade después, lucha con cientos de excepciones. Este sitio web utiliza propiedades lógicas de principio a fin; cada versión RTL se genera a partir de la misma hoja de estilos que la alemana.
Tipografía y densidad
La escritura árabe no tiene mayúsculas, tiene otras ascendentes/descendentes y parece más pequeña y densa con el mismo tamaño de fuente. Una buena tipografía RTL necesita fuentes especializadas, a menudo uno o dos puntos más grandes y un interlineado más generoso. Los efectos de espaciado entre letras, populares en latín, no funcionan con escritura conectada.
Pruebas con hablantes nativos
Ningún automatismo reemplaza la mirada de una persona que vive en la escritura: saltos de línea en palabras compuestas, números en texto corrido, direcciones mixtas en formularios: los tipos de error son sutiles. Por ello, nuestro proceso de revisión incluye siempre una revisión visual RTL, no solo corrección de texto.
Navegación: Donde la lógica se invierte
En entornos RTL, las estructuras de navegación deben repensarse. Una barra de menú horizontal comienza a la derecha, el primer elemento del menú es el más a la izquierda: el orden sigue siendo lógico de derecha a izquierda. Los menús desplegables se abren por defecto hacia abajo a la izquierda en lugar de hacia abajo a la derecha, ya que el punto de anclaje está en el lado derecho. Las barras laterales que en el diseño LTR están posicionadas a la izquierda, en el caso RTL se mueven a la derecha. Se debe tener especial cuidado con los menús hamburguesa: el icono en sí (tres líneas horizontales) es neutral en cuanto a dirección, pero su ubicación (arriba a la izquierda vs. arriba a la derecha) debe intercambiarse. Un error común son los submenús que aún muestran dirección LTR porque no se controlan mediante propiedades CSS lógicas. En nuestro sistema de diseño, definimos los componentes de navegación completamente con inset-inline-start/end, de modo que cambien automáticamente entre LTR y RTL. Ejemplo práctico: una navegación de migas de pan muestra en modo RTL la página actual a la izquierda y la página de inicio a la derecha; las flechas separadoras también deben cambiar de dirección. Aquí utilizamos CSS-content con flechas incrustadas que usan una entidad diferente según el valor dir.
Direcciones mixtas: Números y caracteres
Los números, números de teléfono, direcciones de correo electrónico y nombres de marcas latinas mantienen su dirección LTR, incluso cuando el texto circundante es RTL. Esto da lugar a secciones bidireccionales donde la dirección de lectura cambia en medio de la oración. Por defecto, el algoritmo de bidireccionalidad Unicode (Bidi) maneja estos textos mixtos, pero debe asegurarse de que el cambio de dirección sea correcto. Utilice el atributo dir en el nivel del elemento mixto o recurra a caracteres como LRM (Marca de izquierda a derecha) y RLM (Marca de derecha a izquierda). Ejemplo: en una frase en hebreo „Teléfono: 01234 56789“, la secuencia de números debe leerse de izquierda a derecha. Sin un marcado correcto, el navegador podría romper la secuencia o mostrarla incorrectamente. En formularios, es esencial que la etiqueta esté a la derecha y el campo de entrada a la izquierda, ya que el usuario comienza a leer por la derecha. Nuestro enfoque: para cada elemento de texto con material latino incrustado, colocamos en la plantilla RTL un wrapper <span dir="ltr"> con un LRM final, para que el siguiente carácter RTL se coloque correctamente al final.
El árabe y el hebreo se leen de derecha a izquierda – y ponen patas arriba las suposiciones de diseño implícitas. Un informe práctico de nuestro sistema de diseño.
Símbolos: ¿Dirección fija o lógica?
Los iconos y pictogramas suelen tener direcciones implícitas: las flechas hacia adelante apuntan a la derecha, las flechas hacia atrás a la izquierda. Estas deben invertirse en interfaces RTL, de lo contrario la navegación resulta contraintuitiva. Sin embargo, no todos los símbolos dependen de la dirección: un triángulo de reproducción permanece igual (porque representa una acción física), al igual que un icono de correo electrónico o teléfono. La regla general: la dirección lógica (secuencia temporal, dirección de lectura, dirección de navegación) debe invertirse; la dirección física o el significado simbólico no. En desarrollo, utilizamos transformaciones CSS para los iconos: scaleX(-1) para todos los SVGs direccionales, controlado por una clase [dir=rtl] .icon--directional. Así evitamos activos duplicados. Atención: las flechas de carrusel que apuntan a la derecha deben apuntar a la izquierda en modo RTL, ya que la página „siguiente“ ahora está a la izquierda. Lo mismo ocurre con las barras de progreso: el progreso debe aumentar de derecha a izquierda. En nuestro sistema de diseño, estos componentes se implementan con propiedades lógicas (inline-size en lugar de width), de modo que el nivel de llenado se vincule automáticamente al inicio de la barra de progreso.
Imágenes: ¿Qué reflejar, qué redibujar?
Los gráficos y las ilustraciones a menudo contienen símbolos culturales o dependientes de la dirección: relojes que giran en el sentido de las agujas (en contexto RTL, verse reflejados es normal), apretones de manos, líneas de tiempo. No todas las imágenes deben reflejarse por completo: un movimiento de aguja reflejado podría percibirse como incorrecto, ya que la realidad física se mantiene. Pero una línea de tiempo de izquierda a derecha debe ir de derecha a izquierda en contexto RTL. Los logotipos y las imágenes de marca generalmente no se modifican, ya que mantienen una apariencia fija. El desafío es entregar las imágenes correctas automáticamente. Almacenamos un equivalente RTL para cada gráfico como un activo separado o usamos transformaciones CSS para casos simples. En escenarios complejos (p. ej., infografías con texto), se requiere un rediseño manual. Nuestro flujo de trabajo: el diseñador gráfico marca cada imagen como «sin dirección», «reflectable» o «individual» en el CMS. La entrega se realiza mediante una condición que lee el atributo dir del elemento principal. Ejemplo: una imagen de una estantería con libros en escritura latina debería reflejarse para que los lomos queden a la derecha; esto puede parecer sorprendente a primera vista, pero es coherente.
SEO y hreflang: Marcación específica para RTL
Para los motores de búsqueda, la correcta marcación del idioma y la dirección es esencial. Además del atributo de idioma (lang), se debe establecer el atributo dir en cada página para que el navegador y el motor de búsqueda interpreten correctamente la dirección de lectura. En páginas RTL multilingües, la marcación hreflang es especialmente crítica: una página en árabe (ar) debe enlazar correctamente a sus contrapartes en alemán o inglés. Las entradas hreflang incorrectas provocan indexaciones erróneas, ya que Google no deduce automáticamente la dirección de lectura. Además, debería considerar sitemaps separados para versiones LTR y RTL para reforzar las señales. Un error común es el uso de etiquetas genéricas sin tener en cuenta la dirección del texto. Nosotros apostamos por una generación dinámica de hreflang que deriva tanto los códigos de idioma como de región de la base de datos lingüística. Para los dialectos árabes, la diferenciación regional es necesaria, ya que los consumidores y los algoritmos tienen expectativas diferentes. Además, utilizamos la etiqueta canonical para evitar inconsistencias entre contenidos espejados y no espejados. Nuestro flujo de trabajo verifica automáticamente si el atributo dir en el encabezado HTML es consistente con las indicaciones hreflang. Porque un texto árabe sin dir="rtl" puede ser mostrado incorrectamente por los navegadores, lo que a su vez aumenta la tasa de rebote. Por lo tanto, el rendimiento SEO no solo se ve afectado por los textos, sino también por la correcta marcación de la dirección de lectura.
Accesibilidad: Desafíos RTL para tecnologías de asistencia
Las necesidades de los lectores de pantalla y otras tecnologías de asistencia cambian según la dirección de lectura. Lectores de pantalla como JAWS o VoiceOver esperan el atributo dir para determinar el orden correcto de lectura. Si falta esta indicación, pueden leer contenido multilingüe en el orden incorrecto. Los puntos de referencia ARIA siguen siendo los mismos, pero la posición en el DOM debería idealmente seguir la dirección de lectura: el menú principal debería estar en el código fuente antes del contenido principal – en RTL, eso significa que la parte derecha va primero. Otro punto son los órdenes de enfoque: los índices de tabulación deben fluir lógicamente de derecha a izquierda en páginas RTL. Utilice elementos HTML nativos que ajusten automáticamente la navegación por teclado. Los textos alternativos de las imágenes deben ser específicos del idioma y reflejar la perspectiva de la cultura objetivo. Ejemplo: un gráfico que muestra un apretón de manos debería describirse en árabe como "dos manos que se cruzan", ya que la connotación cultural es diferente. Recomendamos realizar auditorías de accesibilidad tanto en vista LTR como RTL. Esto incluye la verificación de contrastes, que pueden ser diferentes bajo tipografía RTL. Nuestro equipo utiliza herramientas automatizadas combinadas con pruebas manuales realizadas por hablantes nativos para garantizar que la experiencia del usuario sea inclusiva.
blog.faqT
¿Debo reflejar todas las imágenes al crear una versión RTL?
No. Solo las imágenes con una dirección de lectura clara, como líneas de tiempo, flechas o diagramas secuenciales, deben reflejarse. Los logotipos, retratos y gráficos con objetos físicos (reloj, globo terráqueo) deben permanecer sin cambios, ya que de lo contrario se distorsiona el significado. Decida caso por caso.
¿Cómo pruebo RTL de manera más eficiente durante el desarrollo?
Utilice las herramientas de desarrollo del navegador para establecer el atributo dir en el elemento html como "rtl" y revise cada componente para verificar la disposición correcta. Amplíe su proceso de revisión de código con una verificación RTL dedicada realizada por hablantes nativos, que cubra irritaciones visuales y flujos de texto bidireccional incorrectos.
