Gestione del testo: proprietà di base La gestione del testo e della tipografia è un aspetto essenziale dei CSS. Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di suddividere l argomento in due lezioni. Iniziamo quindi dalle proprietà di base. Sono quelle che definiscono i seguenti aspetti: il font da usare; la sua dimensione; la sua consistenza l interlinea tra le righe; l allineamento del testo: la sua decorazione (sottolineature, etc.). La proprietà font-family La proprietà font-family serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata. Gli uomini del W3C hanno creato un meccanismo che consente all autore di impostare nei CSS non un unico font, ma un elenco di caratteri alternativi. Il meccanismo funziona così: p {font-family: Arial, Verdana, sans-serif; Quando la pagina viene caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile sul dispositivo dell utente userà il secondo. In mancanza anche di questo, verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. La spiegazione di tutto ciò è semplice: ovviare al problema dei diversi font presenti sulle varie piattaforme. Dunque: quando si imposta la proprietà font-family si possono usare tutti i font che desideriamo, valutando la loro presenza sui vari sistemi e non dimenticando mai di inserire alla fine l indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows): serif (Times New Roman); sans-serif (Arial); cursive (Comic Sans); fantasy (Allegro BT); monospace (Courier). I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette. selettore {font-family: <font 1>, <font2>,...,<famiglia generica>; Ed ecco un semplice esempio di codice: div {font-family: Georgia, "Times New Roman", serif; La proprietà font-size Insieme a font-family è la proprietà considerata essenziale nella definizione dell aspetto del testo, di cui definisce le dimensioni. È applicabile a tutti gli elementi ed ereditata. Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 1
selettore {font-size: valore; I valori delle dimensioni del testo possono essere espressi in vari modi. I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell elemento parente. Sono valori assoluti: le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large (è Sono valori relativi: sconsigliato, però, farne uso poichè al momento i browser non interpretano allo stesso modo le dimensioni ma, ognuno ne definisce dimensioni personalizzate); quelli espressi con le seguenti unità di misura: pixel (px), punti (pt). Si consiglia di usare la seconda solo per CSS destinati alla stampa. le parole chiave smaller e larger; quelli espressi in em; quelli espressi in percentuale. Nelle pratiche più comuni, la scelta del dimensionamento dei font viene fatta tra pixel, em e percentuale. p {font-size: 12px; div {font-size: 50%; h2 {font-size: 1.2em; La proprietà font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata. selettore {font-weight: valore; Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave: p {font-weight: 900; div {font-weight: bold; valori numerici: 100 200 300 400 500 600 700 800 900 ordinati in senso crescente (dal più leggero al più pesante); normal: valore di default, è l aspetto normale del font ed equivale al valore 400; bold: il carattere acquista l aspetto che definiamo in genere grassetto ; equivale a 700; bolder: misura relativa; serve a specificare che una determinata porzione di testo dovrà apparire più pesante a livello visuale rispetto al testo dell elemento parente; lighter: misura relativa; il testo sarà più leggero di quello dell elemento parente. Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 2
La proprietà font-style Imposta le caratteristiche del testo in base ad uno di questi tre valori: normal: il testo mantiene il suo aspetto normale; italic: formatta il testo in corsivo; oblique: praticamente simile a italic. La proprietà si applica a tutti gli elementi ed è ereditata. selettore {font-style: valore; p {font-style: italic; La proprietà line-height Grazie a line-height è possibile usare nelle nostre pagine un sistema di interlinea paragonabile a quello dei word-processor. La proprietà, in realtà, serve a definire l altezza di una riga di testo all interno di un elemento blocco. Ma l effetto ottenuto è appunto quello di impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata. selettore {line-height: valore; I valori che è possibile utilizzare sono: normal: il browser separerà le righe con uno spazio ritenuto "ragionevole"; dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2; un valore numerico: usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore; un valore numerico con unità di misura: l altezza della riga sarà uguale alla dimensione specificata; percentuale: l altezza della riga viene calcolata come una percentuale della dimensione del font. Il consiglio è di non usare mai la percentuale, di valutare attentamente l utilizzo di unità esplicite e di affidarsi senza problemi al valore numerico. p {line-height: 1.5; body {line-height: 15px; La proprietà font La proprietà font è una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo. Le proprietà definibili in forma abbreviata con font sono: font-family; font-size; line-height; font-weight; font-style; font-variant; font di sistema. Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 3
selettore {font: valori; Alcune indicazioni sull uso. I valori relativi alle singole proprietà non vanno separati da virgole. Virgola che deve invece separare i valori definiti per la font-family. Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette. Per quanto riguarda l ordine, la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family. Il valore della proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di fontsize e separando i due con una slash: font-size/line-height Nel codice che segue definiamo nell ordine: font-weight, dimensione/interlinea, font-family. p {font: bold 12px/1.5 Georgia, "Times New Roman", serif; Allineare il testo: la proprietà text-align La proprietà serve a impostare l allineamento del testo. È ereditata e si applica a tutti gli elementi. selettore {text-align: valore; I valori possono essere rappresentati da una delle seguenti keyword: left: allinea il testo a sinistra; right: allinea il testo a destra; center: centra il testo; justify: giustifica il testo. p {text-align: center; div {text-align: justify; La proprietà text-decoration Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi. selettore {text-decoration: valore o valori; I valori che è possibile usare sono: none: il testo non avrà alcuna decorazione particolare; underline: il testo sarà sottolineato; overline: il testo avrà una linea superiore; line-through: il testo sarà attraversato da una linea orizzontale al centro; blink: testo lampeggiante. p {text-decoration: none; a { text-decoration: underline; Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 4
Unità di misura per il testo l metodo più semplice e veloce per assegnare una dimensione al testo è sicuramente utilizzare come unità di misura il pixel. La regola più utilizzata, quindi, è la seguente: p { font-size: 12px; Esistono però altre unità di misura sicuramente meno usate ma allo stesso tempo utilissime per settare la dimensione del testo. Le unità di misura disponibili sono le seguenti: Points (pt) Pixels (px) Ems (em) Percentuale (%) Analizziamo ora nel dettaglio ogni unità di misura. Points Questa unità di misura proviene dalla tipografia ed è utilizzata per la stampa. È sconsigliato l utilizzo per documenti destinati allo schermo in quanto non garantisce uniformità di dimensioni al variare delle piattaforme. Pixel Come anticipato all inizio della lezione, il pixel è sicuramente l unità di misura più popolare. Progettare pagine utilizzando i pixel garantisce un dimensionamento preciso del testo su ogni browser e piattaforma, garantendo quindi un uniformità generale del progetto. Per contro, però, questa unità di misura presenta un difetto non del tutto trascurabile in fatto di accessibilità. Unità di misure fisse, infatti, non permettono all utente di aumentare o diminuire le dimensioni del testo utilizzando lo zoom presente in ormai quasi tutti i browser. p { font-size: 12px; Em L em è un unità di misura relativa molto comoda da usare. Il suo nome proviene dalla tipografia, in cui, viene utilizzata per identificare la dimensione della lettera maiuscola M di un carattere. Tale unità di misura calcola la dimensione del testo in base ad una misura fissa (e quindi non relativa) di base. 1em, quindi, corrisponde alla dimensione di base assegnata al documento o all elemento. Vediamo un semplice esempio per comprendere meglio. body { font-size: 10px; h1 { font-size: 1.4em; h2 { font-size: 1.2em; p { font-size: 1em; Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 5
Nel precedente codice abbiamo assegnato un valore di 10 pixel al documento. Gli elementi successivi (h1, h2 e p) definiscono la loro dimensione utilizzando un unità di misura relativa all oggetto che li contiene. Questo vuol dire che per calcolare la dimensione finale degli oggetti è sufficiente moltiplicare il valore assegnato all oggetto per il valore fisso del suo contenitore. Nel nostro caso le dimensioni finali saranno: h1 = 10 x 1.4 = 14px h2 = 10 x 1.2 = 12px p = 10 x 1 = 10px È fortemente consigliato impostare un unità di misura base nel body della pagina e poi assegnare le dimensioni del carattere a tutti gli elementi della pagina utilizzando l em. Ereditarietà dell em Bisogna fare molto attenzione quando si utilizzano unità di misure relative. Se assegniamo un valore in em ad un elemento, bisogna stare attenti a definire correttamente il valore degli elementi contenuti in esso poichè la dimensione finale viene calcolata in base alla dimensione effettiva dell oggetto che li contiene. Anche in questo caso vediamo un esempio per chiarire meglio il concetto. body { font-size: 10px; h1 { font-size: 1.4em; div { font-size: 1.2em; p { font-size: 1.2em; <div> <p>lorem ipsum dolor sit amet.</p> </div> Nell esempio precedente la dimensione finale del paragrafo non sarà di 12 pixel come potremmo aspettarci. Vediamo insieme perché. Innanzitutto calcoliamo la dimensione del testo all interno del div: div = 10 x 1.2 = 12px Il testo all interno del div, quindi, avrà dimensione finale 12pixel. Anche il paragrafo ha la dimensione del testo in un unità di misura relativa, quindi, la sua dimensione finale sarà calcolata sulla base del div che lo contiene. Quindi: p = 12 x 1.2 = 14.4px Il valore finale del testo sarà di 14.4 pixel e non di 12 pixel come ci saremmo potuti aspettare. Questo succede per via dell ereditarietà che contraddistingue le unità di misura relative. Percentuale L ultima unità di misura che abbiamo a disposizione per settare la dimensione del testo è la percentuale. Anche questa unità è relativa e, proprio come succede per gli em, calcola la dimensione finale del testo in base alla dimensione base assegnata. Vediamo qualche semplicissimo esempio per comprendere il rapporto tra em e percentuale. body { font-size: 10px; h1 { font-size: 1.4em; Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 6
h2 { font-size: 140%; h3 { font-size: 1.2em; h4 { font-size: 120%; Nell esempio appena visto possiamo notare che le coppie h1-h2 e h3-h4 avranno la stessa dimensione finale. A dimostrazione di ciò vediamo il calcolo necessario per stabilire la dimensione finale: h1 = 10 x 1.4 = 14px h2 = 10 x 140% = 10 x (140/100) = 14px h3 = 10 x 1.2 = 12px h4 = 10 x 120% = 10 x (120/100) = 12px Impostare la dimensione base del testo Uno dei problemi più importanti quando si realizza il layout di una pagina web è impostare la giusta dimensione del testo. Sono anni ormai che utilizzare dimensioni fisse non è una tecnica consigliata, soprattutto per i problemi di scalabilità nei vari browser. È sempre consigliabile utilizzare unità di misura relative come percentuale o em che meglio si adattano ai vari browser e, soprattutto, consentono una maggiore leggibilità anche zoomando la pagina. Volendo utilizzare unità di misura relative come l em bisogna prima definire correttamente la dimensione del font di base in base al quale vengono calcolate. Generalmente il font di base è definito per il body così da sfruttare l ereditarietà delle regole CSS. Di default, nella maggior parte dei browser la dimensione del testo è settata a 16px. Di conseguenza: 1em = 100% = 16px 1.125em = 112.5% = 18px 1.25em = 125% = 20px 1.375em = 137.5% = 22px 1.5em = 150% = 24px 2em = 200% = 32px... 0.875em = 87.5% = 14px 0.75em = 75% = 12px Utilizzare la dimensione di default (16px) può risultare piuttosto scomodo. Si ha la necessità di effettuare calcoli con la calcolatrice per definire la grandezza del testo degli elementi della pagina con conseguenti perdite di tempo. Bisogna poi tener conto di browser come Internet Explorer 7 e precedenti che non ridimensionano correttamente il testo rendendolo illeggibile in alcuni casi. Una soluzione comoda con cui si riesce a semplificare i calcoli relativi alle dimensioni del testo e, allo stesso tempo, garantisce una uniformità di dimensioni su tutti i browser consiste nell impostare il body in percentuale. In questo caso le tecniche e le misure utilizzate sono tante: 62,5% 72,5% 75% 80% 100,1% Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 7
e tante altre. La scelta dipende per lo più dalle esigenze del designer e non c è una regola prestabilita. Tra le misure elencate, però, la più consigliata è la prima, 62,5%, vediamo perchè. Il 62,5% di 16px corrisponde precisamente a 10px. Assegnare una misura del genere al body significa semplificare in maniera drastica i calcoli per le dimensioni degli elementi. Infatti utilizzando una regola CSS come la seguente: body { font-size: 62,5%; /* = 10px = 0.625em */ consente di utilizzare, per gli elementi della pagina, in maniera semplicissima e molto più intuitiva le seguente misure: 1em = 100% = 10px 1.2em = 120% = 12px 1.4em = 140% = 14px 1.5em = 150% = 15px 2em = 200% = 20px 4em = 400% = 40px... 0.9em = 90% = 9px 0.8em = 80% = 8px Capire e usare il line-height Una delle proprietà più semplici e allo stesso tempo potenti dei CSS è la proprietà line-height: il Web è soprattutto testo, e il line-height giusto può fare la differenza in quanto a leggibilità. In questo breve articolo vedremo come specificare questa proprietà, dimensionarla e usarla al meglio. Il line-height specifica l altezza di linea del testo, definendo così implicitamente l interlinea: la spaziatura tra due linee di testo successivo. La proprietà line-height accetta valori specificati in tutte le unità di misura, ma i modi più diffusi per specificarlo sono sostanzialmente px, %, em e numeri puri. Nel corso dell articolo vedremo una possibile strategia per poterla dimensionare al meglio. Procediamo ora con vedere un semplice esempio. La seguente regola specifica un line-height di 18 pixel per tutti i paragrafi: p { line-height: 18px Line-height nella forma contratta Utilissimo il fatto che la proprietà line-height può essere inclusa nello shorthand font. Dopo il fontsize, basterà riportare una slash (/) e il line-height. Vediamo un esempio: p { font:12px/150% Arial, sans-serif In questo caso quindi viene definito un font-size di 12 pixel e un line-height del 150% del font-size, che risulterà quindi 18 pixel. Gestione del Testo: proprietà di base, unità di misura - Ultima revisione 24/04/2017 Pag. 8