Propriedade writing-mode

A propriedade writing-mode define a direção vertical ou horizontal do texto na página. Os valores podem ser horizontal-tb (horizontal da esquerda para a direita e de cima para baixo), vertical-rl (vertical de cima para baixo e da direita para a esquerda), vertical-lr (vertical de cima para baixo e da esquerda para a direita).

Sintaxe

seletor {
	writing-mode: horizontal-tb ou vertical-rl ou vertical-lr;
}

Exemplo

Vamos definir a direção do nosso texto como horizontal da esquerda para a direita e de cima para baixo:

<p>
	Texto
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: horizontal-tb;
	font-size: 2em;
	margin-top: 0;
}

Exemplo

Agora vamos mudar a direção para vertical de cima para baixo e da direita para a esquerda:

<p>
	Texto
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: vertical-rl;
	font-size: 2em;
	margin-top: 0;
}

Exemplo

Vamos definir a direção do nosso texto como vertical de cima para baixo e da esquerda para a direita:

<p>
	Texto
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: vertical-lr;
	font-size: 2em;
	margin-top: 0;
}

Veja também

a propriedade font-kerning,
que define o kerning da fonte
a propriedade text-orientation,
que define a orientação dos caracteres no texto vertical