Direcciones de bloque y de línea

La dirección de bloque es la dirección en la que se apilan las cajas de nivel de bloque. En los sistemas de escritura horizontales (LTR/RTL), la dirección de bloque es de arriba abajo. En los modos de escritura verticales, cambia de izquierda a derecha o de derecha a izquierda.

La dirección en línea es la dirección en la que fluye el texto dentro de una línea. En los idiomas LTR, la dirección en línea es de izquierda a derecha. En RTL, es de derecha a izquierda. En los modos de escritura verticales, pasa a ser de arriba abajo.

writing-mode establece la orientación fundamental del flujo de texto:

• horizontal-tb — texto horizontal, de arriba abajo (predeterminado)
• vertical-rl — texto vertical, con columnas de derecha a izquierda
• vertical-lr — texto vertical, con columnas de izquierda a derecha

En writing-mode: horizontal-tb (predeterminado):

• Dirección de bloque = vertical (de arriba → abajo)
• Dirección en línea = horizontal (de izquierda → derecha en LTR, de derecha → izquierda en RTL)
• block-start = arriba, block-end = abajo
• inline-start = izquierda (LTR) o derecha (RTL)

En writing-mode: vertical-rl:

• Dirección de bloque = horizontal (de derecha → izquierda)
• Dirección en línea = vertical (de arriba → abajo)
• block-start = derecha, block-end = izquierda
• inline-start = arriba, inline-end = abajo

Considérelo como un sistema de coordenadas que gira con el modo de escritura. Las propiedades lógicas describen posiciones relativas a este sistema giratorio, no a la pantalla fija.

En los modos de escritura verticales, text-orientation controla la orientación de cada carácter:

• mixed: gira los caracteres latinos y mantiene los CJK en posición vertical
• upright: mantiene todos los caracteres en posición vertical (para CJK vertical)
• sideways: gira todos los caracteres lateralmente

Un uso práctico: etiquetas giradas en barras laterales o etiquetas de ejes de gráficos en contextos de escritura horizontal:

Un contenedor puede tener un modo de escritura, mientras que los elementos en línea individuales tienen otro. Esto se utiliza para mezclar texto latino y CJK en el mismo párrafo.

Equivalentes lógicos de width y height:

• inline-size = width en horizontal-tb (la dimensión en línea)
• block-size = height en horizontal-tb (la dimensión de bloque)

Para texto vertical que incluye números o abreviaturas, text-combine-upright (tcy) mantiene secuencias cortas de caracteres en posición vertical y comprimidas dentro de una única celda de texto vertical.

En writing-mode: horizontal-tb con un idioma LTR, ¿qué eje es el eje de «bloque»?

El eje de bloque es la dirección de apilamiento de las cajas de bloque; el eje en línea es la dirección del flujo del texto. En los sistemas de escritura horizontales, bloque = vertical y en línea = horizontal. En la escritura vertical, estos ejes se invierten. writing-mode controla la orientación fundamental de los ejes. Las propiedades lógicas se adaptan a los ejes que sean actualmente de bloque y en línea.