Uno degli aspetti meno conosciuti dei CSS è quello relativo alla gestione dello spazio bianco all'interno di un testo tramite l'utilizzo della proprietà "white-space". Spesso infatti si ha la necessità di avere un controllo maggiore sulla formattazione di default del testo: un esempio su tanti potrebbe essere quello di dover mostrare una poesia, rispettando a capo e spazi lasciati dall'autore.
In questo articolo scoprirai come utilizzare questa interessante proprietà, per dare un tocco di originalità ai tuoi lavori.
Il motivo per lo scarso utilizzo di questa proprietà è principalmente di ordine pratico: l'implementazione nei browser, fino agli ultimi anni, era manchevole, oppure caratterizzata da diversi bug. Ad esempio Internet Explorer ha offerto il supporto completo a partire dalla versione 8, mentre Firefox dalla versione 3.1. Ma qual è il l'effetto di questa proprietà sul nostro testo?
Traducendo dalle specifiche del W3C si legge: Questa proprietà dichiara come viene gestito lo spazio bianco all'interno dell'elemento
. Quando noi scriviamo l'HTML delle nostre pagine web gli spazi bianchi e le righe di testo (gli "a capo") vengono ignorati. Così i tre paragrafi seguenti:
Questo è un paragrafo di prova.
Questo è un paragrafo di prova.
Questo è un paragrafo di prova.
[/xml]vengono visualizzati allo stesso modo dal browser, ovvero su una sola riga, senza gli spazi interni. Questo perché il comportamento di default è quello di non mostrare le righe di testo presenti nel codice sorgente HTML e di sopprimere tutti gli spazi presenti (tranne uno): in questo modo inserendo cinque o cento spazi dopo una parola nel codice sorgente si avrà sempre un unico spazio visualizzato nel browser. Tale comportamento di default corrisponde all'uso (non necessario) nel foglio di stile del valore 'normal' per la proprietà white-space:
[css] p { white-space:normal; } [/css]Il comportamento opposto a quello predefinito si ottiene impostando la proprietà white-space al valore 'pre': tutti gli spazi bianchi e gli 'a capo' presenti nel codice sorgente vengono visualizzati nel browser, fedelmente. Il seguente paragrafo, ad esempio:
[xml]La parola che segue è l e n t i s s i m a. Metto molti a capo, senza utilizzare elementi <br> Nam posuere sem ligula. Sed et quam odio. Aenean imperdiet nibh id dolor dignissim ultrices. In hac habitasse platea dictumst. Morbi semper neque nec leo lacinia ac fringilla ipsum posuere. Pellentesque porta aliquet orci, quis adipiscing mauris mollis in. Aenean a turpis lacus. Maecenas adipiscing fermentum enim eget tristique
[/xml]viene visualizzato così come è stato scritto nel codice HTML. È interessante notare che, a meno di non inserire esplicitamente un'interruzione di riga nell'HTML, il browser visualizzerà tutto su un'unica riga.
.Per ottenere lo stesso risultato, si sarebbe potuto utilizzare il tag <pre>, ma non sempre potrebbe essere la scelta giusta, semanticamente parlando.
Normalmente quando un blocco di testo raggiunge il limite della pagina (o del blocco che lo contiene), il browser inserisce un'interruzione di riga, in modo che il testo continui a capo, evitando così far comparire la barra di scroll orizzontale, come in questo esempio.
[xml]L o rem ipsum dolor sit amet, http://www.ilmiolungomachedicolunghissimourlchecontienemoltialtriterminichenonstoquiacopiare.com consectetur adipiscing elit. Nam posuere sem ligula. Sed et quam odio. Aenean imperdiet nibh id dolor dignissim ultrices. In hac habitasse platea dictumst. Morbi semper neque nec leo lacinia ac fringilla ipsum posuere. Pellentesque porta aliquet orci, quis adipiscing mauris mollis in. Aenean a turpis lacus. Maecenas adipiscing fermentum enim eget tristique
[/xml]Per avere il comportamento opposto, e rimuovere completamente tutti gli spazi all'interno del testo, impedendo che il testo vada a capo anche dopo aver raggiunto il limite del suo contenitore, basta specificare il valore 'nowrap' per la proprietà white-space [css] p { white-space:nowrap; } [/css]
Utilizzando questo valore l'unico modo per inserire un'interruzione di riga all'interno del paragrafo è quello di utilizzare il tag <br>, mentre non è possibile inserire spazi aggiuntivi, in quanto questi verranno eliminati all'atto del rendering del browser
Questo è uno dei valori che è stato adottato dai browser in tempi più recenti: come suggerisce il nome, questo valore combina gli effetti del valore 'pre', conservando quindi gli spazi e le righe presenti nel codice sorgente, con la differenza però di aggiungere un 'a capo' automatico una volta raggiunto il limite del blocco contenitore. Considerando questo markup: [xml]
L o r e m ipsum dolor sit amet, http://www.ilmiolungomachedicolunghissimourlchecontienemoltialtriterminichenonstoquiacopiare.com consectetur adipiscing elit.Nam posuere sem ligula. Sed et quam odio. Aenean imperdiet nibh id dolor dignissim ultrices. In hac habitasse platea dictumst. Morbi semper neque nec leo lacinia ac fringilla ipsum posuere. Pellentesque porta alique.
[/xml] tutti gli spazi verranno visualizzati anche nel browser, così come le interruzioni di riga, come puoi vedere nell'esempio.Utilizzando invece il valore pre-line, informiamo il browser di ignorare gli eventuali spazi aggiuntivi presenti nel codice sorgente mantenendo, invece, tutte le interruzioni di riga. Utilizzando lo stesso markup dell'esempio precedente, otteniamo questo diverso risultato.