Oltre a quelle citate nella lezione precedente della nostra Guida CSS esistono diverse altre proprietà per la stilizzazione del testo attraverso le quali è possibile definirne, in modo estremamente preciso, la disposizione di lettere e parole. Queste proprietà di CSS sono:
- letter-spacing
- word-spacing
- white-space
- line-height
Anche queste proprietà, come tutte le altre relative alla stilizzazione dei blocchi di testo, sono ereditate. Vediamole nel dettaglio.
letter-spacing e word-spacing
Queste due proprietà consentono di gestire la spaziatura (o, come spesso si dice, il "respiro") all’interno di un testo. In pratica è possibile definire lo spazio, rispettivamente, tra le singole lettere di una parola e tra le diverse parole di un testo. Entrambe possono avere come valore "normal" oppure un numero accompagnato da un’unità di misura (normalmente "px"). Vediamo un esempio:
h1
{
letter-spacing: 3px;
word-spacing: 9px;
}white-space
Questa proprietà consente di definire il comportamento del testo in presenza di spazi bianchi. Come sappiamo, in HTML, una molteplicità di spazi bianchi nel codice vengono rappresentati a video come un solo spazio bianco. Ciò accade sempre salvo che tali spazi non siano rappresentati all’interno dei tag <pre> e <code> dove, viceversa, ogni spazio mantiene la sua consistenza. Attraverso la proprietà white-space possiamo, appunto, simulare questi due tag coi CSS.
I valori possibili sono:
- none – (default) multipli spazi bianchi sono ridotti ad uno;
- pre – si comporta come il tag <pre>;
- nowrap – multipli spazi bianchi sono ridotti e il ritorno a capo è disabilitato.
line-height
Si tratta di una proprietà molto importante in quanto grazie ad essa è possibile definire una sorta di interlinea (un po’ come facciamo quando scriviamo un documento su MS Word). In realtà, attraverso line-height, viene definito non lo spazio tra le linee ma l’altezza delle linee stesse: il risultato, di fatto, è il medesimo.
Questa proprietà ammette i seguenti valori:
- normal – (default) il browser calcola in automatico l’altezza della linea;
- valore numerico con unità di misura – la linea sarà alta esattamente quanto specificato dal designer;
- valore numerico senza unità di misura – si tratta di un moltiplicatore rispetto all’altezza del font (se, ad esempio, si indica solo il valore numerico 2 la linea sarà alta il doppio del font);
- percentuale – l’altezza della linea sarà calcolata in percentuale rispetto all’altezza del font (se, ad esepio, si indica come valore 150% la linea sarà alta una volta e mezzo l’altezza del font).
Vediamo un esempio:
body
{
line-height: 150%;
}