Testo verticale coi Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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;
Vediamo un esempio di quel che intendiamo ottenere:


Quanto spazio guadagnato!

Alla proprietà writing-mode va associato anche il comando (e rispettivo valore):
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 una classe alle sole celle che devono avere l'effetto testo in verticale.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.994)

:: Referenze dei fogli di stile Css (41.901)

:: Menu ad effetto mouseover con i Css (39.301)

:: Effetti sui link con i Css (30.313)

:: Angoli smussati in un box coi Css (18.983)

:: Box con effetto ombra con i CSS3 (16.393)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.294)

:: Stilizzare i form Html con i Css (16.120)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.900)

:: Colorare le barre di scorrimento del browser con i Css (14.402)

IN EVIDENZA
DOWNLOAD