16 Testo

Sommario

Le proprietà definite nelle seguenti sezioni influenzano la presentazione visuale dei caratteri, degli spazi, delle parole e dei paragrafi.

16.1 Rientri: la proprietà 'text-indent'

'text-indent'
Valore:  <length> | <percentage> | inherit
Iniziale:  0
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Questa proprietà specifica il rientro della prima riga di testo in un blocco. Più precisamente, essa specifica il rientro del primo riquadrato che fluisce nel primo riquadrato di riga del blocco. Il riquadrato è rientrato rispetto al limite sinistro (o destro, per l'impaginazione da destra a sinistra) del riquadrato di riga. I programmi utente dovrebbero rendere questo rientro come uno spazio vuoto.

I valori hanno i seguenti significati:

<length>
Il rientro è una lunghezza fissa.
<percentage>
Il rientro è una percentuale della larghezza del blocco contenitore.

Il valore di 'text-indent' può essere negativo, ma possono esservi limiti nell'implementazione specifica.

Esempi(o):

Il seguente esempio provoca un rientro del testo di '3em'.

  P { text-indent: 3em }

16.2 Allineamento: la proprietà 'text-align'

'text-align'
Valore:  left | right | center | justify | <string> | inherit
Iniziale:  dipende dal programma utente e dalla direzione di scrittura
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà descrive il modo in cui il contenuto in riga di un blocco viene allineato. I valori hanno i seguenti significati:

left, right, center, e justify
Rispettivamente: giustificazione a sinistra, a destra, al centro e doppia giustificazione.
<string>
Specifica una stringa su cui si allineeranno le celle in una colonna di tabella (si veda la sezione sull' allineamento orizzontale in una colonna per dettagli ed un esempio). Questo valore si applica solo alle celle di tabella. Se viene impostato su altri elementi, verrà trattato come 'left' o 'right', a seconda se la 'direction' è rispettivamente 'ltr', o 'rtl'.

Un blocco di testo è uno strato di riquadrati di riga. Nel caso di 'left', 'right' e 'center', questa proprietà specifica come i riquadrati in riga all'interno di ciascun riquadrato di riga si allineeranno rispetto ai lati sinistro e destro del riquadrato di riga; l'allineamento non è rispetto alla finestra di visualizzazione. Nel caso di 'justify', il programma utente può allungare i riquadrati in riga in aggiunta per aggiustare le loro posizioni. (Si vedano anche 'letter-spacing' e 'word-spacing'.)

Esempi(o):

In questo esempio, si noti che, poichè 'text-align' è ereditato, tutti gli elementi a livello di blocco all'interno dell'elemento DIV con 'class=center' avranno il loro contenuto in riga centrato.

DIV.center { text-align: center }

Nota. L'algoritmo di giustificazione effettiva usato dipende dal programma utente e dalla lingua del testo scritto.

I programmi utente conformi possono interpretare il valore 'justify' come 'left' o 'right', a seconda se la direzione di scrittura predefinita dell'elemento è, rispettivamente, da sinistra a destra o da destra a sinistra.

16.3 Decorazione

16.3.1 Sottolineare, tirare una linea sopra, depennare, far lampeggiare: la proprietà 'text-decoration'

'text-decoration'
Valore:  none | [ underline || overline || line-through || blink ] | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no (si veda il testo)
Percentuali:  N/A
Media:  visuale

Questa proprietà descrive le decorazioni aggiunte al testo di un elemento. Se la proprietà è specificata per un elemento a livello di blocco, influenza tutti i discendenti a livello di riga dell'elemento. Se è specificata per (o influenza) un elemento a livello di riga, influenza tutti i riquadrati generati dall'elemento. Se l'elemento non ha contenuto o nessun contenuto testuale (per esempio l'elemento IMG in HTML), i programmi utente devono ignorare questa proprietà.

I valori hanno i seguenti significati:

none
Non produce alcuna decorazione al testo.
underline
Ogni riga di testo è sottolineata.
overline
Ogni riga di testo ha una linea sopra di essa.
line-through
Ogni riga di testo ha una linea che l'attraversa a metà.
blink
Il testo lampeggia (alternanza fra visibile ed invisibile). Non si richiede che i programmi utente conformi supportino questo valore.

Il colore richiesto per la decorazione testuale dovrebbe essere derivato dal valore della proprietà 'color'.

Questa proprietà non è ereditata, ma i riquadrati discendenti di un riquadrato a blocco dovrebbero essere formattati con la stessa decorazione (per esempio dovrebbero essere tutti sottolineati). Il colore delle decorazioni dovrebbe rimanere lo stesso anche se gli elementi discendenti hanno differenti valori 'color'.

Esempi(o):

Nel seguente esempio per l'HTML, il contenuto testuale di tutti gli elementi A che si comportano da ipercollegamenti sarà sottolineato:

A[href] { text-decoration: underline }

16.3.2 Testo ombreggiato: la proprietà 'text-shadow'

'text-shadow'
Valore:  none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no (si veda il testo)
Percentuali:  N/A
Media:  visuale

Questa proprietà accetta un elenco separato da virgola di effetti di ombreggiatura da applicare al testo dell'elemento. Gli effetti di ombreggiatura si applicano nell'ordine specificato e possono così coprirsi l'uno con l'altro, ma non copriranno mai il testo stesso. Gli effetti di ombreggiatura non alterano le dimensioni di un riquadrato, ma possono estendersi oltre i suoi confini. Il livello di strato degli effetti di ombreggiatura è il medesimo di quello dell'elemento stesso.

Ogni effetto di ombreggiatura deve specificare uno spostamento dell'ombreggiatura e può, facoltativamente, specificare un raggio della zona d'ombra e un colore dell'ombreggiatura.

Uno spostamento dell'ombreggiatura è specificato con due valori <length> che indicano la distanza dell'ombra dal testo. Il primo valore di lunghezza specifica la distanza orizzontale alla destra del testo. Un valore di lunghezza orizzontale negativo posiziona l'ombra alla sinistra del testo. Il secondo valore di lunghezza specifica la distanza verticale sotto il testo. Un valore di lunghezza verticale negativo posiziona l'ombra sopra il testo.

Un raggio della sfocatura può facoltativamente essere specificato dopo lo spostamento dell'ombreggiatura. Il raggio della sfocatura è un valore di lunghezza che indica i confini dell'effetto di sfocatura. L'algoritmo esatto per calcolare l'effetto di sfocatura non è specificato.

Un valore di colore può facoltativamente essere specificato prima o dopo i valori di lunghezza dell'effetto d'ombra. Il valore di colore sarà usato come base per l'effetto d'ombra. Se non viene specificato nessun colore, si userà invece il valore della proprietà 'color'.

Le ombreggiature del testo possono essere usate con gli pseudo-elementi :first-letter :first-line.

Esempi(o):

L'esempio di sotto imposterà un'ombreggiatura del testo alla destra e sotto il testo dell'elemento. Poichè non è stato specificato alcun colore, l'ombra avrà lo stesso colore dell'elemento stesso, e poichè non è stato specificato un raggio di sfocatura, l'ombreggiatura del testo non sarà sfocata:

H1 { text-shadow: 0.2em 0.2em }

Il prossimo esempio posizionerà un'ombreggiatura alla destra e sotto il testo dell'elemento. L'ombra avrà un raggio di sfocatura di 5px e sarà rossa.

H2 { text-shadow: 3px 3px 5px red }

Il prossimo esempio specifica un elenco di effetti di ombreggiatura. La prima ombra sarà alla destra e sotto il testo dell'elemento e sarà rossa senza sfocatura. La seconda ombra coprirà il primo effetto di ombreggiatura e sarà gialla, sfocata, e posizionata alla sinistra e sotto il testo. Il terzo effetto di ombreggiatura sarà posizionato alla destra e sopra il testo. Poichè non viene specificato alcun colore d'ombra per il terzo effetto di ombreggiatura, verrà usato il valore della proprietà 'color' dell'elemento:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Esempi(o):

Si consideri questo esempio:

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

Qui le proprietà 'background' e 'color' hanno lo stesso valore e la proprietà 'text-shadow' è usata per creare un effetto "eclissi solare":

Effetto eclissi solare   [D]

Nota. Questa proprietà non è definita nei CSS1. Alcuni effetti di ombreggiatura (come quello dell'ultimo esempio) possono rendere il testo invisibile nei programmi utente che supportano solo i CSS1.

16.4 Spaziatura tra le lettere e tra le parole: le proprietà 'letter-spacing' e 'word-spacing'

'letter-spacing'
Valore:  normal | <length> | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica il comportamento della spaziatura fra i caratteri del testo. I valori hanno i seguenti significati:

normal
La spaziatura è quella normale per il font corrente. Questo valore permette al programma utente di alterare lo spazio tra i caratteri per giustificare il testo.
<length>
Questo valore indica uno spazio fra caratteri in aggiunta allo spazio predefinito tra i caratteri. I valori spossono essere negativi, ma possono esservi limiti nell'implementazione specifica. I programmi utente non possono aumentare o diminuire ulteriormente lo spazio tra caratteri per giustificare il testo.

Gli algoritmi di spaziatura dei caratteri dipendono dal programma utente. La spaziatura dei caratteri può anche esere influenzata dalla giustificazione (si veda la proprietà 'text-align').

Esempi(o):

In questo esempio, lo spazio tra caratteri negli elementi BLOCKQUOTE è aumentato di '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

Nel seguente esempio, non si permette al programma utente di alterare lo spazio tra caratteri:

BLOCKQUOTE { letter-spacing: 0cm }   /* Same as '0' */

Quando lo spazio risultante tra due caratteri non è lo stesso dello spazio predefinito, i programmi utenti non dovrebbero usare legature.

I programmi utente conformi possono considerare il valore della proprietà 'letter-spacing' come 'normal'.

'word-spacing'
Valore:  normal | <length> | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica il comportamento della spaziatura tra parole. I valori hanno i seguenti significati:

normal
Il normale spazio tra parole, come definito dal font corrente e/o dal programma utente.
<length>
Questo valore indica lo spazio tra parole in aggiunta a quello predefinito tra le parole. I valori possono essere negativi, ma possono esservi limiti nell'implementazione specifica.

Gli algoritmi di spaziatura delle parole sono dipendenti dal programma utente. La spaziatura tra le parole è anche influenzata dalla giustificazione (si veda la proprietà 'text-align').

Esempio(o):

In questo esempio, la spaziatura tra parole negli elementi H1 è aumentata di '1em'.

H1 { word-spacing: 1em }

I programmi utente conformi possono considerare il valore della proprietà 'word-spacing' come 'normal'.

16.5 Uso delle maiuscole: la proprietà 'text-transform'

'text-transform'
Valore:  capitalize | uppercase | lowercase | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà controlla gli effetti dell'uso delle maiuscole del testo di un elemento. I valori hanno i seguenti significati:

capitalize
Imposta in maiuscolo il primo carattere di ciascuna parola.
uppercase
Imposta in maiuscolo tutti i caratteri di ciascuna parola.
lowercase
Imposta in minuscolo tutti i caratteri di ciascuna parola.
none
Nessun effetto.

La trasformazione effettiva in ciascun caso dipende dalla lingua scritta. Si veda RFC 2070 ([RFC2070]) per i modi di individuare la lingua di un elemento.

I programmi utente conformi possono considerare il valore di 'text-transform' come 'none' per i caratteri che non provengono dal repertorio Latin-1 e per gli elementi scritti in lingue per le quali la trasformazione è differente da quella specificata nelle tabelle di conversione dei casi di ISO 10646 ([ISO10646]).

Esempi(o):

In questo esempio, tutto il testo nell'elemento H1 è trasformato in testo maiuscolo.

H1 { text-transform: uppercase }

16.6 Spazio bianco: la proprietà 'white-space'

'white-space'
Valore:  normal | pre | nowrap | inherit
Iniziale:  normal
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà dichiara come viene gestito lo spazio bianco all'interno dell'elemento. I valori hanno i seguenti significati:

normal
Questo valore istruisce i programmi utente a far collassare le sequenze di spazio bianco, e ad interrompere le righe quando necessario per riempire i riquadrati di riga. Interruzioni di riga aggiuntive possono essere create con ricorrenze di "\A" nei contenuti generati (per esempio per l'elemento BR in HTML).
pre
Questo valore impedisce ai programmi utente di far collassare le sequenze di spazio bianco. Le righe sono interrotte solo dalle nuove righe nel sorgente del documento, o dalla ricorrenze di "\A" nei contenuti generati.
nowrap
Questo valore fa collassare lo spazio bianco come per 'normal', ma elimina le interruzioni di riga all'interno del testo tranne per quelle create da "\A" nei contenuti generati (per esempio per l'elemento BR in HTML).

Esempi(o):

I seguenti esempi mostrano quale comportamento per lo spazio bianco ci si aspetta dagli elementi PRE e P, e dall'attributo "nowrap" in HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

I programmi utente conformi possono ignorare la proprietà 'white-space' nei fogli di stile dell'autore e dell'utente, ma ne devono specificare il valore nel foglio di stile predefinito.