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%;
}