Pillole CSS: come modificare la resa visiva del testo con la proprietà white-space?

Uno degli aspetti meno conosciuti dei CSS è quello relativo alla gestione degli spazi bianchi all’interno di un testo. Spesso infatti si ha la necessità di avere un controllo sulla formattazione del testo maggiore rispetto a quella predefinita effettuata dal browser: un esempio potrebbe essere quello di dover riportare una poesia, rispettando gli eventuali spazi e le interruzioni di riga previsti dall’autore della stessa.

In questa pillola scoprirai come utilizzare l’interessante proprietà white-space, 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, è stata 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 è l’effetto di questa proprietà sul nostro testo?

Comportamento di default: il valore ‘normal’

Traducendo dalle specifiche del W3C si legge:

“Questa proprietà dichiara come viene gestito lo spazio bianco all’interno dell’elemento.”

Quando noi scriviamo il markup delle nostre pagine web, gli spazi bianchi e le righe di testo (gli “a capo”) vengono ignorati. Così i tre paragrafi seguenti:

<p>Questo è un paragrafo di prova.</p>

<p>Questo è un
paragrafo
di
prova.</p>

<p>Questo       è      un    paragrafo     di prova.</p>

vengono visualizzati allo stesso modo dal browser, ossia su una sola riga, senza gli spazi interni. Questo perché il comportamento di default non mostra le righe di testo presenti nel codice sorgente HTML e sopprime 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:

p {
    white-space:normal;
}

Tener conto degli spazi: il valore ‘pre’

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:

<p style="white-space:pre">La parola che segue è    l   e   n   t  i   s   s    i   m   a.
Metto
molti
a capo,
senza utilizzare elementi &lt;br&gt;
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
</p>

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, da un punto di vista prettamente semantico, poichè tale elemento rappresenta un blocco generico non formattato, mentre la nostra volontà potrebbe essere quella di rappresentare un titolo formattato in modo inusuale.

Eliminare tutti gli spazi: il valore ‘nowrap’

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ì di far apparire la barra di scroll orizzontale.

Per avere il comportamento opposto e rimuovere completamente tutti gli spazi all’interno del testo, impedendo cosi 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, come in questo esempio.

p {
    white-space:nowrap;
}

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.

Combinare gli effetti: i valore ‘pre-wrap’ e ‘pre-line’

L’elemento ‘pre-wrap’ è 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, tutti gli spazi verranno visualizzati anche nel browser, così come le interruzioni di riga.

Utilizzando invece il valore pre-line, chiediamo al 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.

Conclusioni

Quando si rende necessario l’uso della proprietà white-space? Ogni volta che lavorare sulla formattazione del testo è essenziale per il lavoro che stai eseguendo, le varie modalità di questa proprietà possono tornarti utili. Ad esempio, per realizzare la pagina di esempio di questo articolo, ho impostato il valore ‘pre-wrap’ per white-space al tag <pre>: in questo modo ho ottenuto la resa fedele del codice d’esempio, senza permetterne la fuoriuscita dal bordo del blocco.

Tag: ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

10 commenti

Trackback e pingback

  1. Tweets that mention Pillole CSS: come modificare la resa visiva del testo con la proprietà white-space? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Your Inspiration Web, Giustino Borzacchiel. Giustino Borzacchiel said: Pillole CSS: come modificare…