What is RTL in web design?

RTL (right-to-left) design adapts a website for scripts read from right to left, such as Arabic and Hebrew. It means setting dir="rtl" on the page, mirroring the layout and directional icons, and keeping logos, numbers, media controls and photos unchanged.

Should I set RTL direction in CSS or HTML?

In HTML. The W3C advises adding dir="rtl" to the html element and never using CSS to set base direction, because direction is part of the content's meaning and must work even without the stylesheet.

Which icons should not be mirrored in RTL?

Logos, universal marks such as the checkmark, icons of real-world objects such as clocks, controls that point to an actual direction, and media playback controls. Arrows for navigation and progress should be mirrored.

Are numbers written right to left in Arabic?

No. The digits within a number keep the same order in Arabic and Hebrew text. Arabic may use Western or Eastern Arabic numerals depending on the country, but the order of digits never reverses.

Do CSS logical properties work in all modern browsers?

Yes, the core logical properties such as margin-inline-start, padding-inline-end and text-align: start are supported in all current major browsers. Check any newer or less common property on MDN before relying on it.

Diseño web RTL: 7 reglas para sitios web en árabe y hebreo

Resume este post con: 10 minutos de lectura

ChatGPT

Perplejidad

Grok

Inteligencia artificial de Google

Un buen diseño RTL (de derecha a izquierda) comienza en el marcado, no en la hoja de estilo: set dir="rtl" y el derecho lang en el <html> elemento de páginas árabes, hebreas, persas o urdu, construye tu CSS con propiedades lógicas como margin-inline-start De esta manera, el diseño se refleja a sí mismo y luego decide elemento por elemento qué debe invertirse. La navegación, las flechas hacia atrás y hacia adelante, las barras de progreso y los íconos de alineación de texto se reflejan; los logotipos, las marcas de verificación, los relojes, los controles de reproducción multimedia, las fotos y los dígitos dentro de un número no.

Conclusiones clave

Poner dirección en HTML (<html dir="rtl" lang="ar">), nunca sólo en CSS. El W3C dice que no se debe utilizar CSS para establecer la dirección base.
Reemplazar left y right en tu CSS con lógico start y end propiedades. Luego, una hoja de estilo sirve para ambas direcciones.
Refleje cualquier cosa que muestre orden de lectura, navegación o progreso. Mantenga logotipos, símbolos universales, objetos del mundo real y fotografías tal como están.
Los números mantienen el orden de sus dígitos incluso dentro del texto RTL. El hebreo utiliza dígitos occidentales; el árabe puede utilizar números arábigos occidentales u orientales.
Pruebe con texto traducido real, incluidas cadenas mixtas en árabe e inglés, antes del lanzamiento.

Qué significa el diseño RTL

Los scripts de derecha a izquierda se leen desde el borde derecho de la página. El W3C enumera el adlam, el árabe, el hebreo, el n'ko, el siríaco y el taana como escrituras de derecha a izquierda, utilizadas para escribir idiomas como el árabe, el dhivehi, el hebreo, el pashto, el persa, el sindhi, el urdu y el yiddish (Internacionalización del W3C).

El diseño RTL no es “alinear todo a la derecha”. Los lectores de estos idiomas esperan que toda la interfaz siga su dirección de lectura: el logotipo y la navegación principal a la derecha, la barra lateral intercambiada, una flecha hacia atrás que apunta hacia la derecha. También esperan que algunas cosas no cambien, como un número de teléfono, el logotipo de una marca o el botón de reproducción de un vídeo. Lograr esa división correcta es lo que separa una página traducida de una localizada.

1. Establecer dirección e idioma en el HTML

La base es un atributo. La respuesta rápida del W3C: “Si la dirección general del documento es de derecha a izquierda, agregue dir="rtl" a la etiqueta html” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

Según el W3C, ese único atributo alinea los párrafos a la derecha, hace que las columnas de la tabla corran de derecha a izquierda, inicia la entrada del formulario a la derecha, coloca la puntuación correctamente y, si su hoja de estilo está bien escrita, permite que CSS refleje el diseño.

Tres reglas de la misma guía:

No utilice CSS para la dirección base. La dirección afecta el significado, por lo que pertenece al marcado, donde todavía funciona si CSS no se carga.
Declarar lang por separado. lang="ar" no implica dir="rtl", y viceversa. Establezca ambos.
Uso dir="auto" sobre la entrada del usuario. Los campos de formulario y el texto insertado de dirección desconocida (un nombre de usuario, un comentario) deberían detectar su dirección en tiempo de ejecución.

Si solo marca bloques individuales como RTL mientras la página permanece LTR, luchará contra la alineación, la puntuación y el orden de las tablas en todas partes. Colóquelo una vez en la parte superior.

2. Escribe CSS con propiedades lógicas

La mayoría de los errores RTL provienen de CSS que dice “izquierda” o “derecha”. Una tarjeta con padding-left: 24px mantiene su acolchado a la izquierda en árabe, que ahora es el borde más alejado.

Las propiedades lógicas de CSS describen el diseño en relación con la dirección del texto (MDN). El W3C los recomienda exactamente por esta razón: uso start y end para márgenes, relleno y alineación “para facilitar la gestión de los cambios de dirección durante la localización”.

Físico (evitar)	Lógico (uso)
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	`float: inline-start`

Flexbox y grid ya siguen la dirección del documento: una fila de elementos flexibles comienza a la derecha en una página RTL. Es por eso que un diseño creado con flexión o cuadrícula y espaciado lógico generalmente se refleja correctamente sin ningún CSS adicional.

Cosas que las propiedades lógicas no manejan por ti:

Transformaciones y decoraciones posicionadas. transform: translateX(10px) se mueve hacia la derecha en ambas direcciones.
Posiciones de fondo y gradientes establecer con left o right.
Iconos dibujados como formas CSS o SVG individuales que apuntan en una dirección (ver paso 4).

Para estos, utilice un selector de dirección:

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3. Refleja el diseño, no el contenido

Cuando la página se voltea, estos se mueven hacia el lado opuesto:

Logotipo y navegación principal (normalmente en la parte superior derecha).
Barras laterales y columnas secundarias.
Migas de pan, que ahora se leen de derecha a izquierda con los separadores apuntando hacia la izquierda.
Etiquetas de formulario, marcadores requeridos e íconos de validación.
Columnas de tabla, que comienzan desde la derecha.
Carruseles y paginación, que avanzan hacia la izquierda.

Estos permanecen como están:

Fotos e ilustraciones. Las Pautas de interfaz humana de Apple desaconsejan voltear fotografías y obras de arte porque “voltear una imagen a menudo cambia el significado de la imagen” y puede crear problemas de derechos de autor. Si el contenido de una imagen depende de la dirección de lectura (por ejemplo, una captura de pantalla de una interfaz), cree una versión localizada (Manzana HIG).
Reproductores de vídeo y audio. La reproducción se refiere a la dirección de los medios, no al lenguaje.
Barras de desplazamiento. El W3C señala que la posición de la barra de desplazamiento es parte del navegador, controlada por el usuario, no de la página.

Cuando las imágenes aparecen en un orden significativo, como una línea de tiempo o una lista clasificada, invierta su orden en lugar de invertir cada imagen.

4. Decide qué iconos voltear

Las directrices de Apple establecen las reglas más claras y funcionan igual de bien para los sitios web (Manzana HIG):

Voltear:

Flechas Atrás, siguiente y anterior, y cualquier cosa que navegue por los elementos en un orden fijo. “Un botón de retroceso debe apuntar hacia la derecha” en RTL.
Barras de progreso y controles deslizantes, que deben llenarse de derecha a izquierda. Invierta el orden de cualquier número a lo largo de ellos, pero nunca invierta los dígitos.
Iconos que representan texto o dirección de lectura, como alineación de texto o íconos de lista.
Iconos que muestran movimiento hacia adelante o hacia atrás.

No voltees:

Logotipos, incluso aquellos que contienen texto. Apple advierte que un logo invertido “confunde a la gente y puede tener repercusiones legales”.
Marcas universales como la marca de verificación.
Objetos del mundo real, como un reloj, que “funcionan igual en todas partes”.
Controles que significan una dirección real, como “alinear a la derecha”, que aún debe apuntar a la derecha.

Un enfoque práctico: etiquetar cada icono en su sistema de diseño como mirror o fixed una vez, y aplique el giro con una única regla CSS para el mirror set.

5. Manejar números, fechas y texto mixto

Números. “Los dígitos en un número específico, como ‘541’, un número de teléfono o un número de tarjeta de crédito, siempre aparecen en el mismo orden”, dice la guía de Apple. El hebreo utiliza números arábigos occidentales (0-9). El texto árabe puede utilizar números arábigos occidentales o orientales (٠-٩), y el uso varía entre países e incluso regiones. Decida por mercado y mantenga la elección coherente en precios, fechas y formularios.

Dirección mixta. Las oraciones en árabe a menudo contienen nombres de productos, URL o códigos en inglés. El algoritmo bidireccional del navegador coloca estas ejecuciones, pero la puntuación junto a ellas puede llegar al lado equivocado. Envuelva fragmentos proporcionados por el usuario o de dirección desconocida en <bdi> o dárselos dir="auto", como sugiere el W3C para el texto insertado.

Títulos. Si el título de una página RTL comienza con letras latinas (un acrónimo, una marca), el W3C señala que los navegadores pueden mostrarlo en el orden incorrecto en pestañas y marcadores. Añadiendo &rlm; (la marca invisible de derecha a izquierda) al comienzo del título lo fija.

6. Elija fuentes y tamaños para el script

Las letras árabes se unen y cambian de forma dependiendo de su posición en la palabra, y el hebreo y el árabe no tienen letras mayúsculas. Dos consecuencias para el diseño:

Elija fuentes creadas para el script. Una fuente web latina recurre a una fuente del sistema para el árabe, que a menudo parece no coincidir. Cargue una fuente árabe o hebrea dedicada con buenas sugerencias en tamaños pequeños.
Tamaños de equilibrio. Apple señala que el texto árabe o hebreo puede parecer demasiado pequeño junto a un texto latino en mayúsculas del mismo tamaño, y que aumentar el tamaño de fuente RTL en aproximadamente 2 puntos a menudo lo equilibra.
No espacies las letras en árabe. El seguimiento adicional rompe las uniones entre letras. Evite también text-transform: uppercase sobre elementos que pueden contener texto RTL; no tiene ningún efecto allí, por lo que cualquier diseño que se base en mayúsculas para enfatizar necesita otro tratamiento.
Permitir diferentes alturas de línea. Las escrituras árabes utilizan más espacio vertical para puntos y marcas, por lo que es necesario probar la altura de la línea y el texto recortado en los botones.

7. Pruebe con contenido real y lectores reales

Las maquetas llenas de texto de marcador latino ocultan la mayoría de los problemas de RTL. Antes del lanzamiento:

Cargar texto traducido real en cada plantilla, incluidas las cadenas más largas, mensajes de error y correos electrónicos.
Pruebe cuerdas mixtas: una oración árabe con una marca en inglés, una URL y un precio.
Verifique los formularios de un extremo a otro: dirección de escritura, alineación de marcadores de posición, mensajes de validación, campos de teléfono y tarjeta (que permanecen de izquierda a derecha).
Prueba en móvil, donde los gestos de deslizamiento y los menús fuera del lienzo deben abrirse desde la derecha.
Pregúntele a un lector nativo para hacer clic en los viajes principales. Detectarán una flecha invertida o una coma mal colocada en segundos.
Mantenga los conceptos básicos de SEO por idioma: cada versión de idioma RTL en su propia URL, con hreflang vinculándola a los otros idiomas. Vea nuestro Descripción general del SEO multilingüe.

Cómo ayuda ConveyThis con los lenguajes RTL

ConveyThis traduce su sitio al árabe, hebreo, persa, urdu y el resto de sus 210 idiomas admitidos, y sirve a cada idioma en su propia URL. Para los idiomas de derecha a izquierda, puede activar una configuración que cambie las páginas traducidas de derecha a izquierda, como se muestra en nuestro artículo de ayuda sobre cambiar la dirección del texto. Cuando está activado, la página traducida está configurada en dir="rtl" con texto alineado a la derecha, mientras que las páginas en su idioma original se dejan tal como las construyó.

Lo que esa configuración no puede hacer es arreglar una hoja de estilo llena de left y right. Cuanto más limpio sea su CSS (pasos 2 a 4), mejor funcionará el interruptor automático. Para el trabajo lingüístico en sí, puede perfeccionar las traducciones automáticas en el editor visual, mantener los términos de marca consistentes con un glosario e intercambiar imágenes por idioma Traducción de imágenes y medios. Nuestra guía paso a paso para Traducir un sitio web al árabe cubre el proceso desde la elección del idioma hasta el lanzamiento, y el descripción general de la localización explica cómo ConveyThis maneja las partes más allá de la traducción.

Preguntas frecuentes

¿Qué es RTL en el diseño web?

El diseño RTL (de derecha a izquierda) adapta un sitio web para scripts leídos de derecha a izquierda, como árabe y hebreo. Significa configurar dir=“rtl” en la página, reflejar el diseño y los íconos direccionales y mantener sin cambios los logotipos, números, controles multimedia y fotos.

¿Debo configurar la dirección RTL en CSS o HTML?

En HTML. El W3C recomienda agregar dir=“rtl” al elemento html y nunca usar CSS para establecer la dirección base, porque la dirección es parte del significado del contenido y debe funcionar incluso sin la hoja de estilo.

¿Qué iconos no deberían reflejarse en RTL?

Logotipos, marcas universales como la marca de verificación, íconos de objetos del mundo real como relojes, controles que apuntan a una dirección real y controles de reproducción multimedia. Las flechas para la navegación y el progreso deben reflejarse.

¿Los números se escriben de derecha a izquierda en árabe?

No. Los dígitos dentro de un número mantienen el mismo orden en el texto árabe y hebreo. El árabe puede utilizar números arábigos occidentales u orientales según el país, pero el orden de los dígitos nunca se invierte.

¿Funcionan las propiedades lógicas CSS en todos los navegadores modernos?

Sí, las propiedades lógicas principales como margin-inline-start, padding-inline-end y text-align: start son compatibles con todos los navegadores principales actuales. Verifique cualquier propiedad más nueva o menos común en MDN antes de confiar en ella.

Empecemos con la traducción

Un diseño RTL limpio aún necesita contenido árabe o hebreo preciso detrás. Puedes crear una cuenta ConveyThis, añade un lenguaje de derecha a izquierda y revisa el resultado en tus propias páginas.