Proprietà writing-mode

La proprietà writing-mode imposta la direzione verticale o orizzontale del testo sulla pagina. I valori possono essere horizontal-tb (orizzontalmente da sinistra a destra e dall'alto verso il basso), vertical-rl (verticalmente dall'alto verso il basso e da destra a sinistra), vertical-lr (verticalmente dall'alto verso il basso e da sinistra a destra).

Sintassi

selettore {
	writing-mode: horizontal-tb o vertical-rl o vertical-lr;
}

Esempio

Impostiamo la direzione del nostro testo orizzontalmente da sinistra a destra e dall'alto verso il basso:

<p>
	Testo
</p>

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

Esempio

Ora cambiamo la direzione verticalmente dall'alto verso il basso e da destra a sinistra:

<p>
	Testo
</p>

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

Esempio

Impostiamo la direzione del nostro testo verticalmente dall'alto verso il basso e da sinistra a destra:

<p>
	Testo
</p>

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

Vedi anche

la proprietà font-kerning,
che imposta il kerning al font
la proprietà text-orientation,
che imposta l'orientamento dei caratteri nel testo verticale