Direções de Bloco e Inline

A direção do bloco é a direção em que as caixas de nível de bloco são empilhadas. Nos sistemas de escrita horizontais (LTR/RTL), a direção do bloco é de cima para baixo. Nos modos de escrita verticais, ela muda para da esquerda para a direita ou da direita para a esquerda.

A direção em linha é a direção em que o texto flui dentro de uma linha. Nos idiomas LTR, a direção em linha é da esquerda para a direita. Em RTL, é da direita para a esquerda. Nos modos de escrita verticais, ela se torna de cima para baixo.

writing-mode define a orientação fundamental do fluxo de texto:

• horizontal-tb — texto horizontal, de cima para baixo (padrão)
• vertical-rl — texto vertical, colunas da direita para a esquerda
• vertical-lr — texto vertical, colunas da esquerda para a direita

Em writing-mode: horizontal-tb (padrão):

• Direção do bloco = vertical (de cima → para baixo)
• Direção em linha = horizontal (da esquerda → para a direita em LTR, da direita → para a esquerda em RTL)
• Block-start = top, block-end = bottom
• Inline-start = left (LTR) ou right (RTL)

Em writing-mode: vertical-rl:

• Direção do bloco = horizontal (da direita → para a esquerda)
• Direção em linha = vertical (de cima → para baixo)
• Block-start = right, block-end = left
• Inline-start = top, inline-end = bottom

Pense nisso como um sistema de coordenadas que gira com o modo de escrita. As propriedades lógicas descrevem posições relativas a esse sistema rotacionável, não à tela fixa.

Nos modos de escrita verticais, text-orientation controla a orientação de cada caractere:

• mixed: gira os caracteres latinos; mantém os caracteres CJK na vertical
• upright: mantém todos os caracteres na vertical (para CJK vertical)
• sideways: gira todos os caracteres para o lado

Um uso prático: rótulos girados em barras laterais ou rótulos de eixos de gráficos em contextos de escrita horizontal:

Um contêiner pode ter um modo de escrita, enquanto elementos em linha individuais têm outro. Isso é usado para combinar texto latino e CJK no mesmo parágrafo.

Equivalentes lógicos de largura e altura:

• inline-size = largura em horizontal-tb (a dimensão em linha)
• block-size = altura em horizontal-tb (a dimensão de bloco)

Para texto vertical que inclui números ou abreviações, text-combine-upright (tcy) mantém sequências curtas de caracteres na vertical e comprimidas dentro de uma única célula de texto vertical.

Em writing-mode: horizontal-tb com um idioma LTR, qual eixo é o eixo de “bloco”?

O eixo de bloco é a direção de empilhamento das caixas de bloco; o eixo em linha é a direção do fluxo de texto. Nos sistemas de escrita horizontais, bloco = vertical e em linha = horizontal. Na escrita vertical, eles se invertem. writing-mode controla a orientação fundamental dos eixos. As propriedades lógicas se adaptam aos eixos que estiverem definidos como bloco e em linha.