Propiedades lógicas en layouts RTL
Cree un layout verdaderamente bidireccional que se adapte automáticamente al árabe y al hebreo mediante propiedades lógicas.
Propiedades lógicas en layouts RTL es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Configurar RTL en HTML
Declare RTL en HTML con el atributo dir y el lang correspondiente:
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" en CSS
También puede establecer la dirección en CSS, lo que resulta útil para realizar pruebas o para secciones RTL parciales:
<div dir="rtl">هذا العنصر باتجاه RTL</div>
Probar el cambio entre LTR y RTL
Una prueba rápida: añada dir="rtl" a <html>. Con propiedades lógicas, el diseño debería reflejarse correctamente. Con propiedades físicas, verá qué es necesario corregir.
Lo que se adapta automáticamente
Cuando se establece dir="rtl", estas propiedades se invierten automáticamente mediante las propiedades lógicas:
- Alineación del texto (start/end)
- Márgenes y rellenos (inline-start/end)
- Bordes (inline-start/end)
- Elementos flotantes (inline-start/end)
- Posicionamiento (inset-inline-start/end)
Lo que NO se adapta automáticamente
Incluso con propiedades lógicas, estos elementos requieren atención en RTL:
- Imágenes de fondo con contenido direccional
- Iconos SVG cuyo significado depende de la dirección (flechas, chevrones)
- Transformaciones como
translateX(): usetranslateX(calc(-1 * var(--offset)))con un indicador de dirección - Posicionamiento absoluto con valores de píxel explícitos
Reflejar iconos SVG
CSS proporciona una forma sencilla de invertir iconos direccionales en RTL:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
Variable CSS sensible a la dirección
Un truco con variables CSS para usar valores sensibles a la dirección:
<div dir="rtl" class="drawer">Drawer</div>
Ejemplo práctico de RTL
Un componente de tarjeta que utiliza propiedades lógicas:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size y RTL
Algunas fuentes árabes parecen más grandes o más pequeñas con el mismo tamaño en píxeles que las equivalentes latinas. Defina font-size por sistema de escritura si es necesario:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
Herramientas de prueba
Las herramientas de desarrollo del navegador pueden emular diseños bidireccionales. Use también el árbol de accesibilidad de Chrome para comprobar que el orden de lectura siga el orden lógico, no el orden visual, para los lectores de pantalla.
Lista de comprobación de RTL en proyectos reales
Lista de comprobación de RTL:
- Todos los márgenes y rellenos usan propiedades lógicas
- Todos los bordes usan inline-start/end
- La alineación del texto usa start/end
- Los iconos direccionales se invierten con scaleX(-1)
- Las posiciones absolutas usan inset-inline-* cuando es necesario
- Los contenedores desplazables se desplazan desde el borde correcto
Comprobación rápida
¿Qué transformación CSS es la forma más sencilla de reflejar un icono de flecha SVG direccional en diseños RTL?
Resumen
Establezca dir="rtl" en el elemento html para usar un diseño RTL. Las propiedades lógicas adaptan automáticamente los márgenes, el relleno, los bordes y la alineación. Los píxeles físicos en las transformaciones y el posicionamiento absoluto todavía requieren una consideración manual para RTL. Invierta los iconos direccionales con scaleX(-1). Pruebe alternando dir="rtl" en el elemento raíz.
Preguntas frecuentes
¿La lección «Propiedades lógicas en layouts RTL» es gratis?
Sí — el texto completo de «Propiedades lógicas en layouts RTL» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Propiedades lógicas en layouts RTL»?
Cree un layout verdaderamente bidireccional que se adapte automáticamente al árabe y al hebreo mediante propiedades lógicas. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 4 de 4.
¿Cuánto tiempo toma la lección «Propiedades lógicas en layouts RTL»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Por qué usar propiedades lógicas: internacionalización
- Direcciones de bloque y de línea
- Margin, padding y border lógicos
- Propiedades lógicas en layouts RTL