Introduzione ai CSS - Stile dello spazio vuoto
Friday 11 January 2008 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Perché anche il vuoto ha il suo peso.
Spazi vuoti
La proprietà white-space definisce come lo spazio vuoto presente nel codice HTML sarà trattato. I valori possibili sono:
normal- Le tabulazioni sono convertite in spazi, ogni spazio aggiuntivo e rimosso e le righe sono interrotte per adattarsi alle dimensioni del contenitore. E’ la modalità predefinita.
pre- Gli spazi vuoti aggiuntivi e le tabulazioni non sono rimossi e le righe sono interrotte solo in corrispondenza di nuove righe nel codice.
nowrap- Lo spazio vuoto e trattato come in
normalma le righe non sono interrotte. pre-wrap- Lo spazio vuoto è trattato come in
pre, ma le righe sono interrotte per adattarsi alla larghezza del contenitore. pre-line- Le tabulazioni sono convertite in spazi, ogni spazio aggiuntivo e rimosso (come in
normal), le righe sono interrotte in corrispondenza di nuove righe nel codice (come inpre), e per adattarsi alle dimensioni del contenitore ( come innormal).
Con Internet Explorer 6 il valore pre funziona solo in strict mode (vedremo in un successivo articolo il significato dei termini strict mode e quirks mode nell’implementazione di CSS). Al momento solo Opera sembra supportare il valore pre-wrap e nessun browser supporta il valore pre-line.
Interlinea
La proprietà line-height fornisce il controllo sullo spazio interlineare (lo spazio tra le righe del testo). I valori possibili sono:
normal- Al browser è lasciata la scelta. Nella specifica CSS 2.1 è consigliato un valore compreso tra 1.0 e 1.2.
- lunghezza
- Una lunghezza espressa in una delle unità di misura CSS, per esempio
1.5em. - numero
- Un numero moltiplicato per il valore della proprietà
font-size, per esempio1.5. - percentuale
- Un valore percentuale moltiplicato per il valore della proprietà
font-size.
Non sono ammessi valori negativi.
Quando un elemento contiene testo con uno o più caratteri differenti, il browser calcola l’interlinea in funzione del carattere più grande (”vince” il carattere con le dimensioni maggiori).
Interlinea tipografica e interlinea CSS
In tipografia tradizionale l’interlinea rappresenta lo spazio tra le righe del testo (leading). Essa è misurata da una linea di base (baseline) alla successiva. nell’interlinea CSS il browser calcola la differenza tra i valori delle proprietà line-height e font-size e aggiunge, o sottrae, il risultato al valore originale di font-size posizionandolo una metà sotto e una metà sopra (half leading).
Indentazione
La proprietà text-indent specifica l’indentazione della prima riga di testo in un blocco. La misura può essere espressa come lunghezza fissa o percentuale. Il valore può essere negativo.
p { text-indent: 3em; }
Spaziatura tra lettere e parole
Le proprietà letter-spacing e word-spacing consentono rispettivamente di modificare le dimensioni dello spazio vuoto tra le lettere e le parole. I valori, impostati con misure di lunghezze fisse, sono aggiunti o sottratti alle distanze standard determinate dal browser.
Direzione del testo
La proprietà direction specifica l’ordine di lettura del testo contenuto in un elemento. I valori possibili sono: ltr (left to right), rtl (right to left) e inherit.
Questa proprietà influenzerà la direzione di scrittura del testo, l’ordine in cui le colonne di una tabella sono esposte e la direzione dell’overflow orizzontale del contenuto di un elemento.
Essa determina anche la collocazione di una eventuale riga parziale alla fine di un elemento se l’allineamento del testo è impostato a justify.
Per approfondire le questioni relative alla direzione del testo consiglio la lettura delle indicazioni presenti nella specifica CSS.
