Cómo añadir soporte RTL a tu sitio web: árabe, hebreo y más (2026)
El árabe y el hebreo juntos representan cientos de millones de usuarios de internet. Añadir soporte de derecha a izquierda es una de las decisiones de internacionalización con mayor impacto que puede tomar un equipo web, y es más manejable de lo que la mayoría de los desarrolladores espera.
Qué significa RTL para el desarrollo web
El mecanismo fundamental para RTL en HTML es el atributo dir. Establecer dir="rtl" en el elemento <html> indica al navegador que renderice todo el documento de derecha a izquierda.
En la práctica, esto cambia varios comportamientos del navegador simultáneamente:
- →La alineación de texto se establece por defecto a la derecha en lugar de a la izquierda.
- →La dirección flex se invierte: los elementos que fluyen de izquierda a derecha en LTR ahora fluyen de derecha a izquierda.
- →Los valores físicos de margen y padding no se invierten; solo lo hacen sus equivalentes lógicos.
- →La posición de desplazamiento comienza desde el borde derecho.
Los idiomas que requieren renderizado RTL incluyen: árabe, hebreo, persa (farsi), urdu y kurdo (sorani). El thaana (maldivo) y algunos otros alfabetos también son RTL, pero tienen audiencias web mucho más pequeñas.
Los dos enfoques: CSS lógico frente a CSS físico
CSS tiene dos formas de expresar el espaciado y la alineación: física (ligada a los bordes de la pantalla) y lógica (ligada a la dirección del texto). Entender esta distinción es la base del desarrollo RTL.
| Propiedad física | Equivalente lógico | Comportamiento en RTL |
|---|---|---|
margin-left | margin-inline-start | Se invierte a la derecha en RTL |
margin-right | margin-inline-end | Se invierte a la izquierda en RTL |
padding-left | padding-inline-start | Se invierte a la derecha en RTL |
padding-right | padding-inline-end | Se invierte a la izquierda en RTL |
text-align: left | text-align: start | Se alinea a la derecha en RTL |
border-left | border-inline-start | Se mueve a la derecha en RTL |
Desplázate horizontalmente para ver todas las columnas.
Tailwind CSS ofrece utilidades lógicas equivalentes: ms-* / me-* para margin-inline, ps-* / pe-* para padding-inline, y text-start / text-end para la alineación. Usarlas en lugar de sus equivalentes físicos hace que tu diseño se invierta correctamente en RTL sin ningún CSS adicional.
Errores comunes al implementar RTL
Incluso con propiedades lógicas implementadas, varios patrones de interfaz requieren atención específica:
Iconos direccionales
Los iconos que implican dirección — flechas, chevrones, indicadores de progreso, separadores de migas de pan, botones de avance/retroceso — deben invertirse en RTL. Una flecha que apunta a la derecha y significa “siguiente” debe convertirse en una flecha que apunta a la izquierda en árabe. Los iconos SVG pueden invertirse con transform: scaleX(-1) aplicado bajo un selector [dir="rtl"]. Los iconos sin significado direccional (una marca de verificación, una estrella, un teléfono) no deben invertirse.
Contenido mixto árabe/inglés (texto bidireccional)
El algoritmo bidireccional de Unicode gestiona automáticamente el contenido con alfabetos mixtos, pero puede producir resultados inesperados cuando el árabe y el texto latino aparecen en el mismo párrafo. El contenido LTR incrustado (como el nombre de un producto en inglés dentro de una frase en árabe) es gestionado por el navegador, pero la puntuación adyacente a texto con direcciones mixtas puede aparecer en la posición incorrecta. Prueba tus patrones de contenido específicos, no solo el diseño.
Los números siempre son LTR
Incluso en un documento RTL, los numerales (1, 2, 3…) siempre se renderizan de izquierda a derecha. Los números de teléfono, precios y fechas siguen el orden LTR dentro del flujo RTL. Los numerales arábigo-índicos (٠١٢٣٤٥٦٧٨٩) son una excepción usada en algunos contextos regionales, pero los numerales arábigos occidentales en texto RTL siempre van de izquierda a derecha.
Los bloques de código deben permanecer en LTR
El código, la salida de terminal y la sintaxis de programación siempre deben renderizarse en LTR, independientemente de la dirección del documento circundante. Aplica dir="ltr" explícitamente en <pre> y <code>, o usa una regla CSS como [dir="rtl"] code { direction: ltr; }.
Cómo probar RTL localmente
La forma más rápida de probar el renderizado RTL es directamente en las DevTools del navegador, sin cambiar de idioma ni tocar el servidor.
- 1Abre las DevTools (F12 o Cmd+Option+I), selecciona la pestaña Consola y ejecuta:
document.documentElement.dir = "rtl". La página se invierte a RTL inmediatamente, sin recargar. - 2Alternativamente, selecciona el elemento
<html>en el panel Elements y añade el atributodir="rtl"directamente. - 3Recorre cada página y estado interactivo. Presta especial atención a: menús de navegación, modales y paneles laterales, diseños de formularios, tablas y cualquier componente con posicionamiento absoluto o fijo.
Tanto Firefox como Chrome renderizan RTL correctamente y son fiables para este tipo de pruebas. Safari en macOS también es útil para verificar el renderizado de fuentes a nivel de sistema para texto en árabe.
Servir RTL a los visitantes automáticamente
Cuando usas Lingvit para traducción, el cambio de diseño RTL se gestiona automáticamente. Cuando un visitante cambia a árabe, hebreo, persa o urdu, Lingvit establece:
Cuando el visitante vuelve a un idioma LTR, se establece dir="ltr" de nuevo. Tus visitantes LTR no se ven afectados en absoluto: el atributo solo se cambia para los usuarios que seleccionan un idioma RTL.
Para la mayoría de los sitios construidos con propiedades CSS lógicas y utilidades lógicas de Tailwind, este único cambio de atributo es suficiente para obtener un diseño RTL correcto sin reglas CSS adicionales.
Qué sigues necesitando revisar
Incluso con el cambio automático a RTL, algunos patrones no se invierten correctamente con un solo cambio de atributo y necesitan revisión explícita:
- ✗Elementos con posición absoluta: los componentes que usan
left: 0oright: 0(físico) no se invierten. Sustitúyelos porinset-inline-start/inset-inline-end. - ✗Iconos SVG direccionales: las flechas y chevrones con significado direccional necesitan reglas de espejo explícitas con
[dir="rtl"]. - ✗Degradados y sombras CSS con dirección física: por ejemplo, un degradado de izquierda a derecha que crea un indicador visual de dirección de lectura.
- ✗Librerías de componentes de terceros: las librerías de gráficos, los selectores de fecha y los editores de texto enriquecido pueden tener sus propias configuraciones de soporte RTL que deben activarse por separado.
Preguntas frecuentes
- ¿Qué idiomas requieren RTL?
- Los principales idiomas RTL con audiencias web significativas son el árabe, el hebreo, el persa (farsi) y el urdu. El kurdo sorani también es RTL. El thaana (dhivehi/maldivo) es RTL pero tiene una presencia web menor. Todos los demás idiomas ampliamente usados, incluidos todos los alfabetos europeos, de Asia oriental y del sur de Asia, son LTR.
- ¿El cambio a RTL afecta a los visitantes LTR?
- No. El atributo dir se establece en 'rtl' solo cuando un visitante selecciona activamente un idioma RTL. Los visitantes LTR ven dir='ltr' (o el valor por defecto, que es LTR). La preferencia de idioma se almacena por sesión de navegador, así que no hay contaminación cruzada entre usuarios.
- ¿Cómo pruebo RTL en un sitio en producción sin afectar a los usuarios?
- Abre la página en una ventana privada/incógnito, abre las DevTools y ejecuta document.documentElement.dir = 'rtl' en la consola. Esto solo afecta a tu sesión. También puedes poner el selector de idioma de Lingvit en árabe en tu propio navegador para ver la experiencia completa de traducción + RTL.
Guías relacionadas
Añade árabe y hebreo a tu sitio
Lingvit gestiona el cambio de diseño RTL automáticamente. No se requieren cambios de CSS.