Rotazione dei testi in CSS

Ruotare il testo sul web sembra un’operazione banale, ma nasconde una distinzione fondamentale tra rendering grafico e flusso tipografico. A seconda del metodo scelto, possiamo decidere se trattare una stringa come un oggetto visivo libero o come parte integrante della geometria del layout.

Rotazione grafica

.text-rotated {
	transform: rotate(-90deg);
	/* oppure */
	rotate: -90deg;
}

La rotazione visiva, attraverso trasformazioni grafiche, come transform o rotate, ruotano l’elemento come se fosse un’immagine. Il comportamento dell’elemento in questo caso è quello di occupare sempre lo stesso spazio orizzontale originale, effettuando soltanto una rotazione grafica, causando anche sovrapposizioni con elementi adiacenti.

Questo approccio è indispensabile quando serve un’angolazione arbitraria (come 15°). L’uso tipico di questo tipo di rotazione è quello di causare effetti particolari, ad esempio per dei badge o elementi decorativi slegati dal flusso del documento.

Rotazione verticale

Per ruotare verticalmente un testo si può usare un metodo che non si occupi soltanto ruotare l’elemento graficamente, ma anche lo spazio occupato è quello verticale.

.vertical-text {
	writing-mode: vertical-rl;
}

In questo modo il browser ricalcola le dimensioni effettive dell’elemento per determinare lo spazio occupato. Il testo occupa verticalmente lo spazio necessario, spingendo in maniera fluida tutti i blocchi circostanti senza causare sovrapposizioni.

Mantenere leggibili le singole lettere

Il writing-mode: vertical-rl ruota effettivamente il testo di 90°, su un piano verticale, per leggerlo bisogna piegare la testa. Per mantenere il testo verticale e avere ogni singola lettera sempre leggibile e orizzontale, possiamo usare il text-orientation.

.vertical-stack {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

In questo caso le lettere non vengono ruotate, rimangono dritte e si impilano verticalmente.