Testo verticale coi Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Grazie ai CSS abbiamo la possibilità di scrivere testo in verticale semplicemente applicando due righe di codice all'elemento testuale a cui vogliamo applicare detto stile.

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.

L'effetto testo verticale, come lo vogliamo intendere in questo articolo, è da associare ad un report con molte colonne, per il quale servirebbe molto più spazio di quello a disposizione all'interno del layout in cui il report stesso dovrà comparire.

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;

filter: flipv fliph;

<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>