jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Conversor de propiedades lógicas CSS

Convierte propiedades CSS físicas en lógicas para diseños RTL y multilingües.

Cargando herramienta...

Qué es Conversor de propiedades lógicas CSS?

Las propiedades logicas de CSS usan direcciones relativas al modo de escritura en lugar de direcciones fisicas. Inline (direccion del flujo de texto) y Block (direccion perpendicular) reemplazan Left, Right, Top y Bottom. Esto significa que el mismo CSS funciona para idiomas de izquierda a derecha, derecha a izquierda y verticales sin anulaciones. Por ejemplo, margin-inline-start se aplica al lado izquierdo en LTR y al lado derecho en RTL.

Respuesta rápida

Convierta propiedades CSS fisicas como margin-left y padding-right en equivalentes logicos que consideren el modo de escritura. Esto ayuda a que los disenos se adapten automaticamente a modos de escritura de derecha a izquierda y verticales sin anulaciones separadas.

Last updated: 2026-06-11

Limitaciones

  • Algunas propiedades logicas abreviadas como border-inline, border-block e inset-inline tienen compatibilidad irregular en navegadores en comparacion con las propiedades logicas individuales principales.
  • El convertidor maneja la conversion de propiedades individuales. Migrar una hoja de estilos grande a propiedades logicas requiere actualizar cada par fisico-logico y verificar que no queden casos de direccion mixta.
  • Las propiedades logicas se asignan a propiedades fisicas segun el modo de escritura y la direccion del elemento. Un mismo inline-start se asigna a left en LTR y a right en RTL, lo que requiere pruebas en ambos modos LTR y RTL.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija la propiedad CSS fisica que desea convertir, como margin-left o padding-right.
  2. Seleccione el equivalente logico de las sugerencias disponibles.
  3. Ingrese el valor para la propiedad.
  4. Copie la declaracion de propiedad logica en su hoja de estilos y pruebe en direcciones LTR y RTL.

Para qué puedes usarla

  • Preparar CSS que funcione para sitios web multilingues con soporte para idiomas RTL.
  • Escribir estilos de componentes independientes de la direccion que no necesiten anulaciones RTL separadas.
  • Reducir la necesidad de una hoja de estilos RTL separada usando propiedades logicas desde el inicio.

Casos de uso

Ejemplos prácticos

Ejemplo

Tarjeta con soporte RTL automatico

Un componente de tarjeta usa margin-inline-end en lugar de margin-right. En modo RTL, el espaciado se invierte automaticamente sin anulaciones CSS adicionales.

Ejemplo

Diseno con modo de escritura vertical

Un diseno usa padding-block-start en lugar de padding-top para que el espaciado se mantenga correcto en modo de escritura vertical, donde arriba y abajo tienen significados diferentes.

Errores comunes

  • Convertir cada propiedad fisica sin verificar la compatibilidad del navegador para la variante de propiedad logica especifica.
  • Mezclar propiedades fisicas y logicas en la misma declaracion, lo que puede causar comportamiento inconsistente entre modos de escritura.
  • Asumir que todas las propiedades logicas tienen compatibilidad total en navegadores. Algunas propiedades logicas abreviadas son mas recientes que el conjunto basico.

Verificación

  1. Aplique las propiedades convertidas a una pagina y cambie el atributo direction de ltr a rtl en el elemento html para verificar que el diseno se invierte correctamente.
  2. Pruebe la pagina en modos LTR y RTL para confirmar que el espaciado, los bordes y la alineacion se comporten como se espera en cada direccion.

FAQ

Preguntas sobre Conversor de propiedades lógicas CSS

Todos los navegadores admiten propiedades logicas?

Chrome 87+, Edge 87+, Safari 15+ y Firefox 66+ admiten el conjunto basico de propiedades logicas. Algunas variantes abreviadas son mas recientes. Verifique la compatibilidad de la propiedad especifica que planea usar.

Deberia reemplazar todas las propiedades fisicas con logicas?

Para sitios multilingues con soporte RTL o idiomas verticales, si. Para sitios solo en ingles, las propiedades logicas tambien funcionan bien, pero las propiedades fisicas siguen siendo validas y son mas simples de leer.

Cual es la diferencia entre el eje inline y el eje block?

El eje inline sigue la direccion en que fluye el texto. En ingles, el eje inline es horizontal. El eje block corre perpendicular al flujo de texto, que es vertical en ingles. En un modo de escritura vertical, estas direcciones se intercambian.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también