Modo de escritura y dirección

Dos cosas definen cómo fluye el texto. writing-mode elige si las líneas son horizontales o verticales, y hacia dónde se apilan. La dirección elige de qué lado empieza cada línea: izquierda a derecha (ltr) o derecha a izquierda (rtl).

1/* el valor inicial */
2.parrafo { writing-mode: horizontal-tb; }
3
4/* columnas que se apilan hacia la izquierda */
5.japones { writing-mode: vertical-rl; }
6
7/* columnas que se apilan hacia la derecha */
8.mongol { writing-mode: vertical-lr; }

La dirección va en el HTML, con el atributo dir, no en CSS. Es parte del contenido: un texto en árabe es de derecha a izquierda aunque no cargue la hoja de estilos. La propiedad direction existe, pero queda para casos raros. Para texto que escribe la gente (comentarios, nombres), dir="auto" deja que el navegador lo deduzca del primer carácter fuerte.

1<html lang="ar" dir="rtl">
2  …
3  <p dir="auto">{comentario del usuario}</p>
4</html>

Inline y block

Las propiedades lógicas no hablan de arriba ni de izquierda, sino de dos ejes. El eje inline es por donde corre una línea de texto. El eje block es hacia donde se apilan los párrafos. Cada eje tiene un comienzo (start) y un final (end).

1. EspañolltrInline va de izquierda a derecha y block de arriba hacia abajo: inline-start es la izquierda.
2. ÁrabertlInline va de derecha a izquierda: inline-start es la derecha.
3. Japonés verticalvertical-rlInline va de arriba hacia abajo y block de derecha a izquierda: inline-start es arriba y block-start es la derecha.

Abajo hay una cartela de museo escrita dos veces: con propiedades físicas y con lógicas. Pasá a físicas en árabe: el borde de color y el relleno quedan a la izquierda, del lado donde las líneas terminan, y el número de sala se pisa con el título. Con lógicas, todo cambia de lado solo. La franja naranja marca dónde cae el relleno.

dirección del texto

ltrrtlvertical-rl

la línea empieza: derecha · relleno: derecha

Cartela de museo con propiedades lógicas. Las líneas empiezan a la derecha; el relleno de 20px y el borde de color quedan a la derecha.

inlineblock

القاعة ٤

الموجة العظيمة قبالة كاناغاوا

كاتسوشيكا هوكوساي، نحو ١٨٣١

طباعة بالقوالب الخشبية. موجة عملاقة وجبل فوجي في الخلفية.

propiedades

lógicasfísicas

padding-inline-start20px

cartela.css

/* <figure class="cartela" dir="rtl" lang="ar"> */

.cartela {
  position: relative;
  inline-size: 13rem;
  padding-block: 16px;
  padding-inline-start: 20px;
  padding-inline-end: 16px;
  border-inline-start: 3px solid;
  border-start-end-radius: 12px;
  text-align: start;
}

.cartela-sala {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
}

.cartela-titulo {
  margin-inline-end: 56px;
}

.cartela-texto {
  margin-block-start: 12px;
}

cartela.html

<figure lang="ar" dir="rtl" class="relative inline-52 py-4 ps-5 pe-4 border-s-3 rounded-se-xl text-start">
  <span class="absolute inset-bs-3 end-3">القاعة ٤</span>
  <p class="me-14">الموجة العظيمة قبالة كاناغاوا</p>
  <p>كاتسوشيكا هوكوساي، نحو ١٨٣١</p>
  <p class="mbs-3">طباعة بالقوالب الخشبية. موجة عملاقة وجبل فوجي في الخلفية.</p>
</figure>

De físico a lógico

Cada propiedad física tiene su par lógico. En una página en español, horizontal y de izquierda a derecha, se comportan igual: cambiar una por la otra no mueve nada. La diferencia aparece cuando cambia el idioma.

Lo mismo con padding y border. Los atajos lógicos toman uno o dos valores, primero el comienzo y después el final. Ojo: los atajos de cuatro valores (margin, padding, inset) siguen siendo físicos.

1.nota {
2  margin-block: 24px;          /* arriba y abajo en horizontal */
3  padding-inline: 20px 16px;   /* 20px al comienzo, 16px al final */
4  border-inline-start: 3px solid;
5  inset-inline: 0;             /* left: 0 y right: 0 */
6}

Las propiedades lógicas son Baseline ampliamente disponible: Chrome 89, Firefox 66 y Safari 15 ya tienen todas, incluidos los radios como border-start-start-radius. Se pueden usar sin respaldo.

Layouts de derecha a izquierda

Con dir="rtl" en el <html>, flexbox y grid ya se dan vuelta: flex-direction: row empieza en el comienzo de la línea, que ahora es la derecha. Lo que no se da vuelta es lo físico: left, margin-right y las transformaciones (translate no tiene versión lógica).

Los íconos que señalan una dirección (una flecha de «siguiente», un chevrón) tienen que espejarse. El selector :dir(rtl) lee la dirección que hereda el elemento, sea cual sea el ancestro que la define. Es Baseline ampliamente disponible desde junio de 2026 (Chrome 120, Firefox 49, Safari 16.4).

1.icono-siguiente:dir(rtl) {
2  scale: -1 1; /* espejo horizontal */
3}
4
5/* en lugar de un margen fijo a la izquierda */
6.lista li { margin-inline-start: 1.5em; }

Texto vertical

En japonés o chino, vertical-rl es la forma normal de escribir. En un layout latino sirve para rótulos: el lomo de un libro, el encabezado de una columna angosta. Ahí las letras se acuestan; text-orientation: upright las para una debajo de otra, y text-combine-upright: all mete un número corto en un solo espacio.

1.lomo {
2  writing-mode: vertical-rl;
3  inline-size: 12rem;   /* ahora es el alto */
4  padding-block: 8px;   /* ahora son los costados */
5}
6
7.fecha-vertical { text-combine-upright: all; } /* «12» queda derecho */

Para un rótulo que se lea de abajo hacia arriba existe writing-mode: sideways-lr. Es Baseline recién disponible (desde marzo de 2025: Chrome 132, Firefox 43, Safari 18.4), así que en navegadores viejos el rótulo queda horizontal: ponelo solo si eso no rompe nada.

En Tailwind

En Tailwind v4 px-*, py-*, mx-* y my-* ya son lógicas: escriben padding-inline, padding-block, margin-inline y margin-block. Para un solo lado, las clases llevan s (start) y e (end). Esta lista es de Tailwind 4.3, la versión del curso.

1<aside dir="rtl"
2  class="ms-4 border-s-3 ps-5 pe-4 py-4 rounded-se-xl text-start">
3  …
4</aside>
5
6<svg class="size-4 rtl:-scale-x-100">…</svg>