Testo in verticale con i CSS

Grazie ai CSS abbiamo la possibilità di scrivere testo in verticale semplicemente applicando una semplice stilizzazione all’elemento testuale a cui vogliamo applicare detto effetto.

L’utilità di un simile espediente è da considerarsi più funzionale che stilistica: volendo creare un elemento ad effetto col testo in verticale, conviene sempre avvalersi di un’immagine… tuttavia non mi si fraintenda! L’effetto testo verticale mediante i CSS in determinate circostanze è molto utile. L’effetto in questione, ad esempio, è particolarmente utile nella creazione di report a colonna dove è possibile risparmiare parecchio spazio ed ottenere risultati visivamente più chiari ed immediati.

A tal fine utilizzeremo la proprietà writing-mode che, purtroppo, è disponibile dalla versione CSS3 dei fogli di stile.

La proprietà CSS writing-mode dispone di due valori:

• tb-rl – scrive il testo “sotto-sopra”;
• lr-tb – scrive il testo in verticale.

Vediamo un esempio di quel che intendiamo ottenere: Quanto spazio guadagnato!

Alla proprietà writing-mode va associato anche un filter:

filter: flipv fliph;

Vediamo un esempio di codice completo:

<style type="text/css">
td
{
    text-align: center;
    font-size: 11px;
    font-family: verdana;
}
td.verticale
{
    writing-mode: tb-rl;
    filter: flipv fliph;
}
</style>

<table border="1">
<tr>
<td class="verticale"><b>Valore 1</b></td>
<td class="verticale"><b>Valore 2</b></td>
<td class="verticale"><b>Valore 3</b></td>
<td class="verticale"><b>Valore 4</b></td>
<td class="verticale"><b>Valore 5</b></td>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>4</td>
</tr>
</table>

Associamo la classe “verticale” alle sole celle che devono avere tale effetto.