Le proprietà CSS che controllano il testo regolano l'interlinea, l'allineamento verticale, l'indentazione della prima riga dei blocchi e la gestione dello spazio bianco. In questo articolo tratteremo in dettaglio queste proprietà.
La proprietà 'line-height'
| Valore: | normal | <number> | <length> | <percentage> | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | in riferimento alla dimensione del font dell'elemento stesso |
| Media: | visuale |
| Valore calcolato: | per <length> e <percentage> il valore assoluto; altrimenti come specificato |
In un elemento di blocco, cella di tabella, didascalia di tabella o inline-block, il cui contenuto è composto di elementi inline, 'line-height' specifica l'altezza minima dei box di riga all'interno dell'elemento. In un elemento inline, 'line-height' specifica l'altezza usata nel calcolo dell'altezza del box di riga (tranne per gli elementi inline rimpiazzati).
Poichè il valore di 'line-height' può essere diverso dall'altezza dell'area di contenuto, può esserci dello spazio sopra e sotto i caratteri. La differenza tra l'altezza del contenuto e il valore in uso di 'line-height' viene detto interlinea. La metà dell'interlinea viene detta semi-interlinea.
I browser centrano i caratteri verticalmente in un box inline aggiungendo la semi-interlinea sopra e sotto i caratteri. Per esempio, se una parte di testo è alta 12px ('font-size') e la 'line-height' è 14px, si aggiungono 2px di spazio, 1px sopra e 1px sotto i caratteri. Dunque avremo:
interlinea = 'line-height' - 'font-size'
I valori sono:
- normal
- I browser usano un valore "ragionevole" basato sul font dell'elemento. Il valore ha lo stesso significato di <number>. Viene raccomandato un valore in uso compreso tra 1.0 e 1.2. Il valore calcolato è 'normal'.
- <length>
- La lunghezza specificata viene usata nel calcolo dell'altezza del box di riga. I valori negativi non sono ammessi.
- <number>
- Il valore in uso di 'line-height' è un numero moltiplicato per la dimensione del font dell'elemento. I valori negativi non sono ammessi. Il valore calcolato coincide con quello specificato.
- <percentage>
- Il valore calcolato di 'line-height' è la percentuale moltiplicata per la dimensione calcolata del font dell'elemnto. I valori negativi non sono ammessi.
Gli esempi che seguono hanno tutti la stessa 'line-height':
p {line-height: 1.2; font-size: 12px} /* numero */
p {line-height: 1.2em; font-size: 12px} /* lunghezza */
p {line-height: 120%; font-size: 12px} /* percentuale */
La proprietà 'vertical-align'
| Valore: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
|---|---|
| Iniziale: | baseline |
| Si applica a: | elementi inline e 'table-cell' |
| Ereditata: | no |
| Percentuali: | in riferimento alla 'line-height' dell'elemento stesso |
| Media: | visuale |
| Valore calcolato: | per <length> e <percentage> la lunghezza assoluta; altrimenti come specificato |
Questa proprietà influenza il posizionamento verticale, all'interno di un box di riga, dei box generati dagli elementi inline. I valori sono:
- baseline
- Allinea la linea di base del box con la linea di base del box genitore. Se il box non ha una linea di base, allinea il limite del margine inferiore con la linea di base del genitore.
- middle
- Allinea il punto intermedio del box con la linea di base del box genitore, più la metà della x-height del genitore.
- sub
- Abbassa la linea di base del box fino alla giusta posizione per i pedici del box genitore (questo valore non ha effetto sulla dimensione del font).
- super
- Innalza la linea di base del box fino alla giusta posizione per gli apici del box genitore (questo valore non ha effetto sulla dimensione del font).
- text-top
- Allinea la parte superiore del box con la parte superiore dell'area di contenuto del genitore.
- text-bottom
- Allinea la parte inferiore del box con la parte inferiore dell'area di contenuto del genitore.
- <percentage>
- Innalza (valore positivo) a abbassa (valore negativo) il box di una percentuale relativa al valore di 'line-height'. '0%' è lo stesso che 'baseline'.
- <length>
- Innalza (valore positivo) o abbassa (valore negativo) il box della distanza specificata. '0px' è lo stesso che 'baseline'.
I valori che seguono allineano l'elemento relativamente al box di riga. Poichè l'elemento può avere dei figli allineati relativamente ad esso, e questi a loro volta possono avere dei discendenti allineati in relazione ad essi, questi valori usano i confini del sottoalbero allineato.
- top
- Allinea la parte superiore del sottoalbero allineato con la parte superiore del box di riga.
- bottom
- Allinea la parte inferiore del sottoalbero allineato con la parte inferiore del box di riga.
Esempi:
sub {vertical-align: sub}
sup {vertical-align: super}
span {vertical-align: 50%}
em {vertical-align: -3px}
La proprietà 'text-indent'
| Valore: | <length> | <percentage> | inherit |
|---|---|
| Iniziale: | 0 |
| Si applica a: | elementi di blocco, celle di tabella e inline-block |
| Ereditata: | si |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
| Valore calcolato: | la percentuale specificata o la lunghezza assoluta |
Questa proprietà specifica l'indentazione della prima riga di testo in un blocco (l'indentazione del primo box che fluisce nel primo box di riga del blocco). I browser rendono l'indentazione con uno spazio vuoto. I valori sono:
- <length>
- L'indentazione è una lunghezza fissa.
- <percentage>
- L'indentazione è una percentuale della larghezza del blocco contenitore.
I valori possono essere negativi, anche se ci sono limiti nell'implementazione dei browser (vedi Internet Explorer Windows versione 6 e 7). Se un valore è negativo o supera la larghezza del blocco, il primo box fuoriesce dal blocco. Esempi:
h2 {text-indent: -1em}
h2 + p {text-indent: 1em}
Vedi test.
4. La proprietà 'text-align'
| Valore: | left | right | center | justify | inherit |
|---|---|
| Iniziale: | 'left' se 'direction' è 'ltr', altrimenti 'right' |
| Si applica a: | elementi di blocco, celle di tabella e inline-block |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica l'allineamento del testo in un blocco. Il testo può essere allineato a sinistra ('left'), a destra ('right'), al centro ('center') o giustificato ('justify'). Nel caso del testo giustificato, il browser può allungare i box inline oltre ad aggiustare le loro posizioni. Esempio:
p {text-align: justify}
La proprietà 'text-decoration'
| Valore: | none | [underline || overline || line-through || blink] | inherit |
|---|---|
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | no (vedi sotto) |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà descrive le decorazioni aggiunte al testo di un elemento usando il colore dell'elemento. Se specificata su un elemento inline, influenza tutti i box generati dall'elemento; per gli altri elementi, la decorazione si propaga ad un box inline anonimo che contiene tutti i discendenti inline dell'elemento, e ad ogni discendente di blocco dell'elemento. Non si propaga ai discendenti flottati o posizionati in modo assoluto, né ai discendenti 'inline-block' o 'inline-table'. I valori sono:
- none
- Non produce alcuna decorazione.
- underline
- Ogni riga di testo viene sottolineata.
- overline
- Ogni riga di testo ha una riga sopra di essa.
- line-through
- Ogni riga di testo ha una riga che la attraversa nel mezzo.
- blink
- Il testo lampeggia. Scarsissimo il supporto dei browser, in quanto il testo lampeggiante è sconsigliato nelle pratiche di accessibilità dei contenuti web.
Esempi:
a:link, a:visited {text-decoration: none}
a:hover {text-decoration: underline overline}
del {text-decoration: line-through}
La proprietà 'letter-spacing'
| Valore: | normal | <length> | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | 'normal' o lunghezza assoluta |
Questa proprietà specifica la spaziatura tra i caratteri del testo. I valori sono:
- normal
- La spaziatura è quella normale per il font in uso. Questo valore consente ai browser di alterare lo spazio tra i caratteri per giustificare il testo.
- <length>
- Questo valore specifica lo spazio tra i caratteri in aggiunta allo spazio predefinito. I valori possono essere negativi. I browser non possono alterare lo spazio per giustificare il testo.
Esempi:
h1 {letter-spacing: -0.1em}
p {text-align: justify; letter-spacing: 0.1em}
La proprietà 'word-spacing'
| Valore: | normal | <length> | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | per 'normal' il valore '0'; altrimenti la lunghezza assoluta |
Questa proprietà specifica la spaziatura tra le parole. I valori sono:
- normal
- La spaziatura normale tra parole, definita dal font in uso e/o dal browser.
- <length>
- Questo valore indica una spaziatura tra le parole in aggiunta allo spazio normale. I valori possono essere negativi.
Esempio:
h1 {word-spacing: 0.5em}
La proprietà 'text-transform'
| Valore: | capitalize | uppercase | lowercase | none | inherit |
|---|---|
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà controlla le maiuscole e le minuscole del testo di un elemento. I valori sono:
- capitalize
- Trasforma il primo carattere di ciascuna parola in maiuscolo.
- uppercase
- Trasforma tutti i caratteri di ciascuna parola in maiuscolo.
- lowercase
- Trasforma tutti i caratteri di ciascuna parola in minuscolo.
- none
- Nessuna trasformazione.
Esempi:
acronym, abbr {text-transform: lowercase; font-variant: small-caps}
h1 {text-transform: capitalize}
La proprietà 'white-space'
| Valore: | normal | pre | nowrap | pre-wrap | pre-line | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica il trattamento dello spazio bianco all'interno di un elemento. I valori sono:
- normal
- Questo valore dice al browser di far collassare le sequenze di spazio bianco e di spezzare le righe per riempire i box inline.
- pre
- Questo valore impedisce al browser di far collassare le sequenze di spazio bianco. Le righe sono interrotte solo da
nuove righe nel sorgente (create con un invio a capo) o da "\A" nel contenuto generato. Si veda l'elemento
pre. - nowrap
- Questo valore funziona come 'normal', ma sopprime le interruzioni di riga all'interno del testo.
- pre-wrap
- Valore CSS 2.1, non supportato da IE7 e inferiori.
- pre-line
- Valore CSS 2.1, non supportato da IE7 e inferiori.
Esempi:
pre {white-space: pre}
a {white-space: nowrap}
p:before {content: "Lorem'\A' ipsum"; white-space: pre}