Propiedades lógicas en CSS: inline, block y textos de derecha a izquierda

Hasta ahora has escrito margin-left, padding-top o width. Son propiedades físicas: hablan de izquierda, derecha, arriba y abajo de la pantalla. Funcionan muy bien mientras el texto vaya de izquierda a derecha y de arriba abajo, como en español. Pero hay idiomas que se escriben de derecha a izquierda (árabe, hebreo, persa) y otros que pueden escribirse en vertical (japonés, chino). Las propiedades lógicas describen la caja según el sentido del texto, y se adaptan solas cuando ese sentido cambia.

En esta lección vas a entender los ejes inline y block, la tabla de equivalencias completa, los atajos que te ahorran líneas aunque tu web solo esté en español, y cómo preparar una página para un idioma que se lee al revés.

En el modelo de caja ya viste de pasada padding-inline y margin-block. Aquí los vemos con calma.

Los dos ejes: inline y block

Piensa en cómo escribes en un cuaderno:

• Las letras avanzan en una dirección: en español, hacia la derecha. Esa es la dirección inline (en línea).
• Cuando acabas una línea, bajas a la siguiente, y los párrafos se apilan hacia abajo. Esa es la dirección block (de bloque).

Cada eje tiene un inicio (start) y un final (end):

	Español	Árabe	Japonés vertical
inline-start	Izquierda	Derecha	Arriba
inline-end	Derecha	Izquierda	Abajo
block-start	Arriba	Arriba	Derecha
block-end	Abajo	Abajo	Izquierda

En español, inline es horizontal y block es vertical. Si recuerdas solo esto, ya puedes usar las propiedades lógicas: margin-inline son los márgenes de los lados y margin-block, los de arriba y abajo.

Tamaños: inline-size y block-size

width y height también tienen versión lógica:

.tarjeta {
  inline-size: 300px;       /* el ancho, en español */
  max-inline-size: 100%;    /* = max-width */
  min-block-size: 200px;    /* = min-height */
}

inline-size es “lo que mide en la dirección del texto”. En una página normal es el ancho; si el texto se pone en vertical, pasa a ser la altura. Por eso las container queries usan container-type: inline-size: vigilan el tamaño en la dirección de lectura.

Márgenes, rellenos y bordes

Aquí está lo que más usarás. Cada propiedad física tiene su versión lógica, y además hay atajos para los dos lados de un eje:

.aviso {
  margin-block: 24px;            /* arriba y abajo: 24px */
  margin-inline: auto;           /* izquierda y derecha: auto (centra el bloque) */
  padding-inline: 16px 24px;     /* inicio 16px, final 24px */
  padding-block-start: 8px;      /* solo arriba */
  border-inline-start: 4px solid #2563eb; /* raya en el lado donde empieza el texto */
}

Con dos valores, el primero es el inicio y el segundo el final. Con uno, se aplica a los dos lados.

Aunque tu web nunca se traduzca, estos atajos son cómodos. Compara:

/* Físico: hay que escribir los dos lados */
.bloque { margin-left: auto; margin-right: auto; padding-top: 2rem; padding-bottom: 2rem; }

/* Lógico: un atajo por eje, sin tocar el otro */
.bloque { margin-inline: auto; padding-block: 2rem; }

Con margin: 0 auto también pondrías los laterales en auto, pero de paso pondrías arriba y abajo a cero, aunque no quisieras. margin-inline: auto toca solo lo que dice.

Tabla de equivalencias

Físico	Lógico (en español)
width / height	inline-size / block-size
margin-left / margin-right	margin-inline-start / margin-inline-end
margin-top / margin-bottom	margin-block-start / margin-block-end
padding-left + padding-right	padding-inline
border-left	border-inline-start
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-left-radius	border-end-start-radius
left / right	inset-inline-start / inset-inline-end
top / bottom	inset-block-start / inset-block-end
text-align: left	text-align: start
float: left	float: inline-start

Las esquinas son las más raras: en border-start-end-radius, el primer término es el eje block y el segundo el inline. “Start-end” es la esquina donde empieza el bloque (arriba) y termina la línea (derecha, en español).

Nota: el valor inicial de text-align ya es start, no left. Por eso un párrafo en árabe se alinea a la derecha sin que hagas nada.

Posición: inset y sus versiones lógicas

inset es el atajo de top, right, bottom y left, en ese orden, como margin. Ojo: inset a secas es físico. Las versiones lógicas son inset-inline e inset-block:

.cerrar {
  position: absolute;
  inset-block-start: 8px;   /* arriba */
  inset-inline-end: 8px;    /* a la derecha en español, a la izquierda en árabe */
}

.capa {
  position: absolute;
  inset: 0;                 /* los cuatro lados a 0: cubre todo el padre */
}

.barra-inferior {
  position: fixed;
  inset-inline: 0;          /* de lado a lado */
  inset-block-end: 0;       /* pegada abajo */
}

El botón de cerrar de una ventana se coloca en la esquina donde termina la primera línea. En una web en árabe, aparecerá a la izquierda sin tocar el CSS. inset: 0 sirve igual en cualquier idioma, porque los cuatro lados valen lo mismo. Más sobre colocar elementos en posicionamiento.

Idiomas de derecha a izquierda

Para cambiar la dirección del texto no se usa CSS: se usa el atributo dir de HTML. Así el navegador, los lectores de pantalla y los buscadores saben que el contenido va de derecha a izquierda aunque falle la hoja de estilos.

<html lang="ar" dir="rtl">

Los valores son ltr (left to right, de izquierda a derecha), rtl (right to left) y auto (el navegador lo deduce del primer carácter con dirección, útil para comentarios escritos por los usuarios). Puedes ponerlo en cualquier elemento, no solo en <html>.

Existe la propiedad CSS direction: rtl, que hace lo mismo a nivel visual, pero la propia especificación recomienda usar dir en el HTML. Verás direction en código antiguo o en casos muy concretos.

Qué cambia solo con dir="rtl"

• El texto se alinea a la derecha (por el text-align: start inicial).
• Una fila de Flexbox empieza por la derecha: el primer hijo queda a la derecha.
• Las columnas de Grid se numeran desde la derecha: la línea 1 está a la derecha.
• Las viñetas de las listas cambian de lado.
• Todas las propiedades lógicas: margin-inline-start pasa a ser el margen derecho.

Lo que no cambia son las propiedades físicas. Si escribiste margin-left: 12px para separar un icono del texto, en árabe el hueco quedará en el lado equivocado. Esa es la razón de ser de las propiedades lógicas.

Un ejemplo: comentario con avatar

<div class="comentario">
  <img class="avatar" src="img/lucia.jpg" alt="" width="48" height="48">
  <p>¡Muy buena la ruta! La hicimos el domingo con niños.</p>
</div>

.comentario {
  display: flex;
  align-items: start;
  padding-block: 12px;
  border-block-end: 1px solid #e2e8f0;
}
.avatar {
  margin-inline-end: 12px;   /* separación entre avatar y texto, en cualquier idioma */
  border-radius: 50%;
}

En español, el avatar queda a la izquierda con 12px a su derecha. Si la página se traduce al hebreo con dir="rtl", Flexbox pone el avatar a la derecha y el margen pasa a su izquierda. Sin una sola regla extra. (Con gap: 12px en el contenedor tampoco tendrías problema: gap no tiene lados.)

Lo que sí tienes que ajustar a mano

Algunas cosas no tienen versión lógica o dependen del significado:

• Iconos con dirección. Una flecha “siguiente” que apunta a la derecha debe apuntar a la izquierda en árabe. Usa la pseudoclase :dir():

.siguiente::after { content: "→"; }
.siguiente:dir(rtl)::after { display: inline-block; scale: -1 1; } /* la refleja en horizontal */

• transform, translate, background-position y las sombras son físicos. Un translate: 20px mueve a la derecha en cualquier idioma.
• Animaciones de deslizamiento lateral: revisa el sentido.

Los iconos que no indican dirección (una lupa, un corazón, un reloj) no se reflejan.

Consejo: :dir(rtl) es mejor que el selector [dir="rtl"], porque detecta la dirección aunque el atributo esté en un antepasado lejano, por ejemplo en <html>.

writing-mode: texto en vertical

writing-mode decide si las líneas son horizontales o verticales, y hacia dónde se apilan:

Valor	Las líneas son…	Y se apilan hacia…
horizontal-tb	Horizontales (por defecto)	Abajo (top to bottom)
vertical-rl	Verticales	La izquierda (right to left), como en japonés
vertical-lr	Verticales	La derecha (left to right)

Fuera de los idiomas asiáticos, se usa para detalles de diseño: el lomo de un libro, una etiqueta lateral, la cabecera estrecha de una tabla.

.lomo {
  writing-mode: vertical-rl;
  inline-size: 200px;     /* ahora el eje inline es vertical: esto es la ALTURA */
  padding-block: 8px;     /* y esto, el relleno izquierdo y derecho */
  text-align: center;     /* centra en vertical, a lo largo de la línea */
}

Fíjate en lo que ha pasado: con el texto en vertical, los ejes giran. Las propiedades lógicas siguen al texto, así que inline-size mide la altura. Las físicas (width, height) siguen significando lo mismo en pantalla. Cuando trabajes con texto vertical, las lógicas evitan muchos líos.

text-orientation y sideways

Con vertical-rl, las letras latinas aparecen giradas 90°. Si las quieres de pie, una debajo de otra:

.cartel { writing-mode: vertical-rl; text-orientation: upright; }

Y para leer de abajo arriba, como en el lomo de muchos libros en español, existe writing-mode: sideways-lr. Es reciente en algunos navegadores, así que comprueba que funciona en los que te interesan. En código antiguo verás en su lugar writing-mode: vertical-rl con rotate: 180deg.

Nota: no uses rotate para poner un texto en vertical si quieres que la caja ocupe su sitio. rotate gira el dibujo, pero la caja sigue ocupando el espacio horizontal original. writing-mode cambia de verdad el tamaño de la caja.

Unidades lógicas

Las unidades de ventana también tienen versión lógica: vi es el 1 % del tamaño de la ventana en el eje inline y vb, en el eje block. En una página en español, vi equivale a vw y vb a vh. Con las container queries tienes cqi y cqb. Las viste en unidades.

¿Debo usarlas siempre?

Hoy todos los navegadores las entienden, así que la decisión es de estilo. Unas pautas prácticas:

• Si tu web puede traducirse a un idioma de derecha a izquierda, úsalas siempre para márgenes, rellenos, bordes y posiciones. Ahorrarás reescribir media hoja de estilos.
• Si haces componentes reutilizables (un botón, una tarjeta para varios proyectos), úsalas: no sabes dónde acabarán.
• Aunque solo escribas en español, margin-inline, padding-block o inset-inline son atajos cómodos. Muchas guías de estilo modernas ya los usan por defecto.
• Lo que de verdad es físico, sigue siendo físico: una sombra que cae hacia abajo, un degradado que va hacia arriba o una barra fija en la parte de abajo de la pantalla del móvil.

Lo importante es ser coherente. Mezclar margin-left y margin-inline-end en el mismo componente hace que, al cambiar de dirección, unas reglas se den la vuelta y otras no.

Errores frecuentes

• Pensar que inset es lógico. inset equivale a top, right, bottom y left. Las versiones que siguen al texto son inset-inline e inset-block.
• Cambiar la dirección con CSS. Para un idioma de derecha a izquierda usa dir="rtl" en el HTML, no direction: rtl.
• Confundir el orden de las esquinas. En border-start-end-radius, primero va el eje block y luego el inline: es la esquina de arriba a la derecha en español.
• Mezclar físicas y lógicas en el mismo elemento. Si pones margin-left y margin-inline-start, gana la última declarada, porque en español apuntan al mismo lado. En árabe apuntan a lados distintos y se aplican las dos.
• Reflejar todos los iconos en RTL. Solo los que indican dirección (flechas, “atrás”, “siguiente”). Un icono de búsqueda o una marca comercial se quedan igual.
• Girar texto con rotate en lugar de writing-mode. La caja no cambia de tamaño y se solapa con lo que hay alrededor.

Resumen

Concepto	Qué significa	Ejemplo
Eje inline	Dirección en que avanza el texto	En español, horizontal
Eje block	Dirección en que se apilan los bloques	En español, vertical
start / end	Inicio y final de cada eje	margin-inline-start
inline-size / block-size	Ancho y alto lógicos	max-inline-size: 60ch
margin-inline, padding-block	Dos lados de un eje a la vez	margin-inline: auto
inset-inline, inset-block	Posiciones lógicas	inset-inline-end: 8px
inset	Atajo físico de los cuatro lados	inset: 0
dir="rtl"	Texto de derecha a izquierda (en HTML)	<html lang="ar" dir="rtl">
:dir(rtl)	Seleccionar según la dirección	Reflejar flechas
writing-mode	Líneas horizontales o verticales	vertical-rl

Con las propiedades lógicas tienes todas las piezas. Ahora vas a combinarlas en los diseños de página más habituales: sigue con maquetaciones típicas.