Por qué usar propiedades lógicas: internacionalización
Comprenda por qué las propiedades físicas de CSS rompen los layouts RTL y cómo las propiedades lógicas lo solucionan.
Por qué usar propiedades lógicas: internacionalización es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 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.
El problema de las propiedades físicas
Tradicionalmente, CSS utiliza direcciones físicas: top, right, bottom y left. Funcionan bien para idiomas de izquierda a derecha (LTR), como el inglés, pero fallan en idiomas de derecha a izquierda (RTL), como el árabe y el hebreo, o en sistemas de escritura vertical, como el japonés tradicional.
Físico frente a lógico
Compare:
- Físico: top, right, bottom, left — fijo respecto a la pantalla
- Lógico: block-start, block-end, inline-start, inline-end — relativo al modo de escritura
Ejes de bloque y en línea
Todo sistema de escritura tiene:
- Eje de bloque: dirección en la que se apilan los bloques de texto (vertical en LTR/RTL, horizontal en la escritura vertical)
- Eje en línea: dirección en la que fluye el texto dentro de una línea (horizontal en LTR/RTL, vertical en la escritura vertical)
Diseño LTR frente a RTL
En LTR (inglés): inline-start = izquierda, inline-end = derecha. En RTL (árabe): inline-start = derecha, inline-end = izquierda. Las propiedades lógicas se adaptan automáticamente sin media queries ni JavaScript.
El coste real de las propiedades físicas
Un sitio escrito con propiedades físicas necesita una hoja de estilos independiente para las anulaciones de RTL, o anulaciones por propiedad para cada propiedad de margin, padding, border, position y text-alignment que deba invertirse. Esto duplica el trabajo de mantenimiento.
El modo de escritura afecta a los ejes
Cuando se establece writing-mode: vertical-rl (japonés o coreano verticales), el eje de bloque se vuelve horizontal y el eje en línea se vuelve vertical. Las propiedades lógicas se adaptan automáticamente.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Adopción en CSS moderno
Todos los navegadores principales admiten las propiedades lógicas. La especificación de CSS recomienda ahora utilizar propiedades lógicas para cualquier propiedad relacionada con una dirección que pueda cambiar según el modo de escritura o la dirección.
Impacto práctico
Una única base de código que utilice correctamente las propiedades lógicas admite LTR, RTL y la escritura vertical sin duplicación. CSS simplemente sigue los valores de direction y writing-mode del elemento raíz.
dir="rtl" en HTML
Establezca la dirección de escritura en HTML, no solo en CSS:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Adopción progresiva
No necesita reescribir todo su CSS de una vez. Empiece a utilizar propiedades lógicas en los componentes nuevos. Con el tiempo, refactorice las propiedades físicas de los componentes que formen parte de áreas sensibles a la internacionalización.
Propiedad CSS direction
La propiedad CSS direction (ltr o rtl) afecta a la dirección del flujo en línea. Funciona junto con writing-mode para definir el contexto completo del sistema de escritura del elemento.
Comprobación rápida
¿Por qué las propiedades físicas de CSS, como margin-left, causan problemas en los diseños RTL?
Resumen
Las propiedades lógicas de CSS utilizan el modelo de bloque y en línea en lugar de top, right, bottom y left físicos. Esto permite que una única hoja de estilos funcione con sistemas de escritura LTR, RTL y verticales. Las propiedades direction y writing-mode definen el contexto al que las propiedades lógicas se adaptan automáticamente.
Preguntas frecuentes
¿La lección «Por qué usar propiedades lógicas: internacionalización» es gratis?
Sí — el texto completo de «Por qué usar propiedades lógicas: internacionalización» 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 «Por qué usar propiedades lógicas: internacionalización»?
Comprenda por qué las propiedades físicas de CSS rompen los layouts RTL y cómo las propiedades lógicas lo solucionan. 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 1 de 4.
¿Cuánto tiempo toma la lección «Por qué usar propiedades lógicas: internacionalización»?
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