Testo verticale e testo ruotato con CSS

Gli argomenti di questa pagina

  • Scrivere testo in verticale in una cella di una tabella
  • Un semplice testo verticale a sinistra della pagina
  • Testo Ruotato nella pagina
  • Un Box complesso con testo ruotato
  • Testo ruotato in un box ed in una cella di una tabella

In questa pagina vedremo come ottenere del testo visualizzato in verticale o ruotato per gradi.

Scrivere testo in verticale in una cella di una tabella

Il modo più semplice e più costruttivo per usare testo in verticale è quello di usarlo in celle di una tabella ove alcune intestazioni possono rivelarsi più larghe dei contenuti.

Qui di seguito il CSS per ottenere il testo scritto verticalmente.

.vertical {
    color: #F00;
    display: block;
    width: 1.1em;
    margin: 0 10px;
    letter-spacing: 1.1em;
    background: #C7CFB6;
    word-break: break-all;
}
.clear {
    clear: both;
}

Questo che segue è L'HTML per stampare una semplice tabella che usa il testo verticale come intestazione di colonna.

<table class="tabella_it">
<tr>
  <th><span class="vertical">colonna 1</span></th>
  <th><span class="vertical">Colonna 2</span></th>
  <th><span class="vertical">Colonna 3</span></th>
  <th><span class="vertical">Colonna 4</span></th>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</table>

La tabella si mostrerà in questo modo

colonna 1 Colonna 2 Colonna 3 Colonna 4
1 2 3 4
       
       
       
       

Un semplice testo verticale a sinistra della pagina

Ora vediamo un altro esempio a cui è possibile applicare questo stile. Porre del semplice testo in verticale a sinistra della pagina.

E' possibile usare del testo verticale se desideriamo aggiungere un effetto decoratico alle nostre pagine o se vogliamo visualizzare a fianco di un contenuto una qualche didascalia.
Il CSS è lo stesso di quello appena mostrato, mentre questo che segue è un esempio di possibile HTML.

<p class="vertical" style="float:left">Dida 1.</p>

<p>Questo altro testo dovrebbe essere a destra del testo verticale e se eccessivamente lungo continuare nella pagina.</p>

<p>Phasellus tincidunt ut nulla et laoreet. Suspendisse interdum metus vel nisl auctor tempus. Suspendisse potenti. 
Phasellus feugiat ligula eu odio condimentum, nec consequat purus sollicitudin. In turpis est, blandit auctor ex et, porttitor consequat ex. 
Vivamus vehicula dolor id convallis mollis. Pellentesque id rutrum massa, non suscipit lacus. 
Nullam ex diam, sodales vitae hendrerit vel, lobortis et risus. Etiam sit amet nisl facilisis, pellentesque est vitae, efficitur enim. 
Praesent non magna purus. Pellentesque vitae leo feugiat, consectetur velit sit amet, viverra est. Mauris lacinia aliquet imperdiet. 
Phasellus varius lobortis lectus, sed blandit massa dignissim id. Praesent a maximus risus, a accumsan elit. 
Praesent eget elementum metus. Donec porta sapien eget purus consequat, at dignissim lectus condimentum.</p>

<p class="clear">Altro testo nella pagina eseguendo un &quot;clear: both&quot;</p>

<p class="vertical" style="float:left">Dida 2.</p>

<p>Questo altro testo dovrebbe essere a destra del testo verticale e se eccessivamente lungo continuare nella pagina.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. 
Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. 
Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. 
Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. 
Morbi aliquam orci ac libero commodo porta.</p>

<p class="clear">Altro testo nella pagina eseguendo un &quot;clear: both&quot;</p>

E questo è il risultato ottenuto

Dida 1.

Questo altro testo dovrebbe essere a destra del testo verticale e se eccessivamente lungo continuare nella pagina.

Phasellus tincidunt ut nulla et laoreet. Suspendisse interdum metus vel nisl auctor tempus. Suspendisse potenti. Phasellus feugiat ligula eu odio condimentum, nec consequat purus sollicitudin. In turpis est, blandit auctor ex et, porttitor consequat ex. Vivamus vehicula dolor id convallis mollis. Pellentesque id rutrum massa, non suscipit lacus. Nullam ex diam, sodales vitae hendrerit vel, lobortis et risus. Etiam sit amet nisl facilisis, pellentesque est vitae, efficitur enim. Praesent non magna purus. Pellentesque vitae leo feugiat, consectetur velit sit amet, viverra est. Mauris lacinia aliquet imperdiet. Phasellus varius lobortis lectus, sed blandit massa dignissim id. Praesent a maximus risus, a accumsan elit. Praesent eget elementum metus. Donec porta sapien eget purus consequat, at dignissim lectus condimentum.

Altro testo nella pagina eseguendo un "clear: both"

Dida 2.

Questo altro testo dovrebbe essere a destra del testo verticale e se eccessivamente lungo continuare nella pagina.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. Morbi aliquam orci ac libero commodo porta.

Altro testo nella pagina eseguendo un "clear: both"

Testo Ruotato nella pagina

La gestione del testo ruotato non è semplice come il testo verticale. Per questo motivo occorre adottare alcuni accorgimenti.
Qui di seguito vediamo come è scritto il CSS.
Per motivi di spazio in questo settore ho preparato tre diverse regole da applicare ad altrettanti porzioni di codice HTML.

.divContenitore {
    background: #E4EEDB;
    padding-top: 0;
    width: 550px;
    padding: 5px;
    border: 2px solid #3D6429;
}
.ruota {
    width: 250px;
    font-size: 14px;
    margin-top: 75px;
    margin-bottom: 75px;
    background-color: #ccc;
    float: left;
    transform: rotate(33deg);
    -webkit-transform: rotate(33deg); /* Safari and Chrome */
    -o-transform: rotate(33deg); /* Opera */
    -moz-transform: rotate(33deg); /* Firefox */
    -ms-transform: rotate(33deg); /* IE 9 */

.ruota2 {
    width: 250px;
    font-size: 14px;
    margin-top: 75px;
    margin-bottom: 75px;
    background-color: #ccc;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -o-transform: rotate(-45deg); /* Opera */
    -moz-transform: rotate(-45deg); /* Firefox */
    -ms-transform: rotate(-45deg); /* IE 9 */

.ruota3 {
    width: 250px;
    font-size: 14px;
    margin-top: 120px;
    margin-bottom: 100px;
    background-color: #ccc;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */
    -o-transform: rotate(-90deg); /* Opera */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE 9 */

Per meglio mostrare gli effetti del testo ruotato, ciascun test è incapsulato in un DIV Contenitore.

<div class="divContenitore">
    <div class="ruota">Rotazione dell'intero DIV con FLOAT</div>
    <p>Testo a fianco del div<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. 
    Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. 
    Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. 
    Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. 
    Morbi aliquam orci ac libero commodo porta.</p>
    <div class="clear">FINE</div>
</div>
<br />
<div class="divContenitore">
    <p class="ruota">Rotazione del tag P con FLOAT</p>
    <p>Testo a fianco del paragrafo<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. 
    Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo.</p>
    <div class="clear">FINE</div>
</div>
<br />
<div class="divContenitore">
    <p>Siamo nel DIV contenitore</p>
    <p class="ruota2">Testo di prova (-45°)</p>
    <p>Altro testo che accompagna il testo ruotato</p>
</div>
<br />
<div class="divContenitore">
    <p>Siamo nel DIV contenitore</p>
    <p class="ruota3">Testo di prova (-90°)</p>
    <p>Altro testo che accompagna il testo ruotato</p>
</div>

Ecco come si presentano i test che ho effettuato. I primi 2 esempi fanno uso di float: left per permettere la scrittura del testo attorno al testo ruotato. Per tornare alla normale stampa di altri contenuti ed annullare il float: left si usa il clear: both.

Rotazione dell'intero DIV con FLOAT

Testo a fianco del div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. Morbi aliquam orci ac libero commodo porta.

FINE

Rotazione del tag P con FLOAT

Testo a fianco del paragrafo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo.

FINE

Siamo nel DIV contenitore

Testo di prova (-45°)

Altro testo che accompagna il testo ruotato


Siamo nel DIV contenitore

Testo di prova (-90°)

Altro testo che accompagna il testo ruotato

Un Box complesso con testo ruotato

In questo esempio viene creato un box complesso che deve contenere in altrettanti contenitori le tre parti della data. L'anno viene mostrato in verticale.
Questo che segue è un esempio di CSS che mette in atto questo progetto.

.RotazioneTesto {
    background: #2B532D;
    color: #DBE5D1;
    float: left;
    margin-left: 10px;
    margin-right: 15px;
    padding: 45px 5px 0;
    position: relative;
    min-width: 80px;
}
.RotazioneTesto .day {
    font-size: 45px;
    background: #447544;
    left: 5px;
    line-height: 45px;
    position: absolute;
    top: 0;
}
.RotazioneTesto .month {
    font-size: 25px;
    background: #5E985F;
    text-transform: uppercase;
}
.RotazioneTesto .year {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    font-weight: bold;
    color: #F2CA9D;
    background: #5EA35F;
    position: absolute;
    right: -5px;
    top: 15px;
}
.clear {
    clear: both;
}

Nel codice HTML (il PHP serve e genereare La data corrente) Vengono creati due box con differenti contenuti.
Il primo box mostra il nome del mese esteso.
Il secondo box mostra il nome del mese abbreviato.
Se nel primo box non c'è problema per la collocazione dei vari elementi perchè il mese è più lungo del giorno, nel secondo box, essendo il mese più breve del giorno si avrebbe qualche problema con l'anno che andrebbe a sovrapporsi al giorno.
Per questo motivo si rende necessario assegnare al contenitore principale un "min-width" appropriato.

<?php
$t_stamp 
time();
?>
<div class="RotazioneTesto">
    <span class="day"><?php echo date("d",$t_stamp); ?></span>
    <span class="month"><?php echo date("F",$t_stamp); ?></span>
    <span class="year"><?php echo date("Y",$t_stamp); ?></span>
</div>
<p>Questo testo va attorno al box.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. 
Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. 
Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. 
Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. 
Morbi aliquam orci ac libero commodo porta.</p>
<p class="clear">Ora si torna nella norma un &quot;clear: both&quot;</p>

<div class="RotazioneTesto">
    <span class="day"><?php echo date("d",$t_stamp); ?></span>
    <span class="month"><?php echo date("M",$t_stamp); ?></span>
    <span class="year"><?php echo date("Y",$t_stamp); ?></span>
</div>

<p>Pellentesque in urna mauris. In scelerisque magna non enim dapibus, sed gravida mauris lobortis. 
Nulla vitae tempus urna. Quisque commodo ligula et augue egestas mattis. 
Praesent dapibus, justo at pretium ultrices, leo elit gravida quam, commodo blandit mi eros eu nisl.</p>
<p class="clear">FINE</p>

Questo è quanto si ottiene

27 May 2020

Questo testo va attorno al box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non. Proin sagittis sed ipsum nec commodo. Sed eget gravida leo, quis condimentum eros. Vivamus eget orci ullamcorper, fringilla eros sit amet, tristique elit. Aenean congue leo nisl, vel placerat est sodales non. Fusce in ante ipsum. Nullam aliquet egestas semper. Morbi aliquam orci ac libero commodo porta.

Ora si torna nella norma un "clear: both"

27 May 2020

Pellentesque in urna mauris. In scelerisque magna non enim dapibus, sed gravida mauris lobortis. Nulla vitae tempus urna. Quisque commodo ligula et augue egestas mattis. Praesent dapibus, justo at pretium ultrices, leo elit gravida quam, commodo blandit mi eros eu nisl.

FINE

Testo ruotato in un box ed in una cella di una tabella

Per comodità i due esempi vengono riportati assieme ma facilmente riconoscibili dalla linea commentata nei due frammenti di codice CSS e HTML.

Nel primo esempio, come contenitore viene usato un DIV.
Gran parte dello spazio viene utilizzato per ospitare i contenuti principali, mentre l'angolo superiore destro viene usato per ospitare del testo ruotato di 45°.

Nel secondo esempio vengono usate delle celle di una tabella.
In queste celle vengono posizionati due DIV nidificati di cui, quello interno ruota il testo di -90° (direzione antioraria).

Questi sono i due gruppi di regole dichiarate nel CSS: il primo per usare un DIV come contenitore, il secondo per usare come contenitore una cella della tabella.

.testBlk {
    background: #ECF6E2;
    width: 550px;
    border: 1px solid #333;
    position: relative;
    padding: 10px 120px 40px 5px;
    margin-top: 10px;
    margin-left: 0;
    min-height: 55px;
}
.testBlk .corner {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-width: 100px 0 0 100px;
    border-style: solid; 
    border-color: rgba(218, 231, 201,0.81) transparent transparent transparent;
/*    border-color: #D9E8C9 transparent transparent transparent;*/
}
.testBlk .testo {
    position: absolute;
    top: -69.7px;
    right: -69.7px;
    width: 141.4px;
    height: 20px;
    line-height: 20px;
    padding: 118.4px 0 3px 0;
    text-align: center;
    background: none;
    color: #252F13;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
/*    ===============================    */
.testBlkTab {
    background: transparent;
    width: 46px;
    height: 120px; /*    border: 1px solid Fuchsia;*/
    position: relative; /*    margin: 100px auto;    */
    padding: 0;
    margin-top: 1px;
    margin-left: 0;
}
.testBlkTab .testoTB {
    position: absolute;
    top: 32px;
    right: -31px;
    width: 116px;
    height: 40px; /*    border: 1px solid #9DD59B;*/
    line-height: 20px;
    padding: 0;
    padding-top: 10px;
    text-align: center;
    background: transparent;
    color: #252F13;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

Questi che seguono sono i due frammenti di codice HTML usati per disegnare il DIV ed il contenuto delle celle della tabella.

<div class="testBlk">
    <img src="images/Downloads.png" alt="test" style="float:left" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. 
    Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non.<br />
    Pellentesque in urna mauris. In scelerisque magna non enim dapibus, sed gravida mauris lobortis. 
    Nulla vitae tempus urna. Quisque commodo ligula et augue egestas mattis. 
    Praesent dapibus, justo at pretium ultrices, leo elit gravida quam, commodo blandit mi eros eu nisl.</p>
    <div class="corner"></div>
    <div class="testo">Testo ruotato</div>
</div>
<p>&nbsp;</p>
<!--    =======================================================        -->
<div align="center">
<table class="tabella_it">
<tr>
<th>
<div class="testBlkTab">
    <div class="testoTB">Testo ruotato</div>
</div>
</th>
<th>
<div class="testBlkTab">
    <div class="testoTB">Testo ruotato</div>
</div>
</th>
<th>
<div class="testBlkTab">
    <div class="testoTB">Testo ruotato</div>
</div>
</th>
<th>
<div class="testBlkTab">
    <div class="testoTB">Testo ruotato</div>
</div>
</th>
</tr>
<tr>
<td>testo in colonna 1</td>
<td>colonna 2</td>
<td>colonna 3</td>
<td>colonna 4</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</table>
</div>

Questi che seguono sono i relativi esempi esplicativi.

test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus libero id lectus interdum varius. Phasellus hendrerit elementum mauris, eu auctor mi vestibulum non.
Pellentesque in urna mauris. In scelerisque magna non enim dapibus, sed gravida mauris lobortis. Nulla vitae tempus urna. Quisque commodo ligula et augue egestas mattis. Praesent dapibus, justo at pretium ultrices, leo elit gravida quam, commodo blandit mi eros eu nisl.

Testo ruotato

 

Testo ruotato
Testo ruotato
Testo ruotato
Testo ruotato
testo in colonna 1 colonna 2 colonna 3 colonna 4
       
       

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum