dir=rtl para texto de derecha a izquierda
Habilite el diseño RTL para árabe, hebreo y otros idiomas RTL
dir=rtl para texto de derecha a izquierda es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Qué hace dir
El atributo dir declara la dirección de base del texto de un elemento. dir="ltr" (de izquierda a derecha, la dirección predeterminada para la mayoría de los idiomas) o dir="rtl" (de derecha a izquierda, para árabe, hebreo, persa y urdu).
Establecerlo en html para RTL en todo el sitio
En sitios en árabe, hebreo, persa y urdu, establezca dir="rtl" en el elemento raíz. Esto invierte el flujo predeterminado de cada bloque: el texto se alinea a la derecha, las listas se sangran a la derecha, las barras de desplazamiento pasan a la izquierda y los diseños se reflejan automáticamente con CSS moderno.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Texto bidireccional
El texto con direcciones mixtas (árabe con nombres de marca en inglés incrustados) sigue automáticamente el Algoritmo Bidireccional de Unicode. La dirección base (indicada por dir) controla cómo se organizan los segmentos unidireccionales a nivel de línea; cada secuencia de caracteres fluye según la dirección natural de su propio sistema de escritura.
Propiedades lógicas de CSS
El CSS moderno utiliza propiedades lógicas que se adaptan a la dirección: margin-inline-start (izquierda en LTR, derecha en RTL), padding-inline-end y border-inline-start. Sustituir left/right por start/end permite que una sola hoja de estilos funcione en ambas direcciones.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox y Grid se adaptan automáticamente
La dirección de fila de Flexbox respeta dir: en RTL, los elementos fluyen de derecha a izquierda. Las columnas de plantilla de Grid también se invierten. Esto significa que la mayoría de los diseños creados con flex o grid funcionan en RTL sin CSS específico para cada dirección: el diseño moderno es independiente de la dirección.
Iconos que deben invertirse
Los iconos direccionales (flecha atrás, flecha siguiente, deshacer/rehacer) deben invertirse en RTL. Use CSS transform: scaleX(-1) dentro de [dir="rtl"] o proporcione variantes SVG independientes para RTL. Los iconos no direccionales (búsqueda, configuración, engranaje) no cambian.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Alineación del texto
Prefiera text-align: start en lugar de text-align: left: start se resuelve como izquierda en LTR y como derecha en RTL. Lo mismo ocurre con end. La alineación adaptada a la dirección elimina una clase de errores al añadir compatibilidad con RTL.
Anulación de dir por elemento
Establezca dir="auto" en un elemento para que el navegador detecte la dirección a partir del primer carácter con dirección fuerte: <p dir="auto">{user.name}</p> gestiona nombres proporcionados por usuarios que pueden estar en árabe, inglés o una mezcla de ambos sin casos especiales.
Inserción bidireccional
Los elementos bdi (aislamiento bidireccional) y bdo (anulación bidireccional) ofrecen un control detallado sobre cómo el algoritmo bidi trata un texto específico; son útiles al reproducir literalmente la entrada del usuario o forzar una dirección concreta para un fragmento de código dentro de un texto corrido.
Campos de formulario
Los campos de entrada heredan dir de su elemento padre. Para texto proporcionado por usuarios cuya dirección puede variar (por ejemplo, en una aplicación de chat con usuarios multilingües), establezca dir="auto" en cada campo de entrada para que se muestre correctamente según su contenido.
Probar diseños RTL
Los navegadores permiten previsualizar RTL estableciendo temporalmente document.documentElement.dir = "rtl" en la consola de DevTools. Compruebe la orientación de los iconos, el relleno y el margen, la posición de la barra de desplazamiento y que ningún elemento use left/right de forma fija cuando debería usar start/end.
La dirección de CSS difiere de la dirección del diseño
La propiedad CSS direction y el atributo HTML dir tienen el mismo efecto en la mayoría de los diseños. Prefiera el atributo HTML porque las tecnologías de asistencia, los sistemas de correo y otros consumidores lo leen, mientras que la propiedad CSS solo afecta al renderizado en los navegadores.
Comprobación de conocimientos
¿Por qué se prefieren las propiedades lógicas de CSS, como margin-inline-start, a margin-left al admitir idiomas RTL?
Resumen
dir="rtl" en <html> invierte la dirección base en sitios en árabe, hebreo, persa y urdu. Las propiedades lógicas de CSS (margin-inline-start, padding-block-end) se adaptan automáticamente. Los diseños de Flexbox/Grid se reflejan sin cambios. Invierta los iconos direccionales, use text-align: start/end y emplee dir="auto" para contenido de usuario cuya dirección se desconoce.
Preguntas frecuentes
¿La lección «dir=rtl para texto de derecha a izquierda» es gratis?
Sí — el texto completo de «dir=rtl para texto de derecha a izquierda» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «dir=rtl para texto de derecha a izquierda»?
Habilite el diseño RTL para árabe, hebreo y otros idiomas RTL Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «dir=rtl para texto de derecha a izquierda»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El atributo lang y los lectores de pantalla
- dir=rtl para texto de derecha a izquierda
- Los elementos bdi y bdo
- charset y gestión de Unicode: caracteres especiales