Questa è la presentazione generale dell’opera <span class="titololibro">Tetrapiloctomia applicata, in cui si parlerà con cura delle tecniche migliori per sezionare un capello in quattro parti.

a 416tk

e assegnare loro queste impostazioni, invece di creare una classe specifica per i titoli e poi attribuirla a tutte le occorrenze di un tag da 6d1r5r

a 416tk

all’interno nel nostro libro. La sintassi non è molto diversa da quella che abbiamo già visto per i selettori precedenti: basta elencare i nomi dei vari tag (o delle varie classi), separandoli con una virgola. Ad esempio, h1, h2, h3 { color: red; } è una regola che assegna il colore rosso al testo contenuto nei tag 3r3i16

, 6a5f6a

e 4b1k22

, nonché agli eventuali discendenti , ossia quei tag che potrebbero trovarsi al loro interno. Le classi si comportano allo stesso modo. La regola .copyright, .titolo { color: red; } ad esempio, assegna il colore rosso a tutti gli elementi che possiedono una classe copyright, oppure una classe titolo (e tutti i loro discendenti, ovviamente). Nulla ci vieta di mischiare tag e classi, scrivendo ad esempio h1, h2, .titolo, h3 { color: red; } Questa regola assegnerà il colore rosso a tutti gli elementi racchiusi in un tag y1g2e

, 6a5f6a

o 33s4w

, ma anche a tutti gli elementi che possiedono una classe titolo. Infine, esiste un selettore speciale, ossia *, che vi permette di selezionare tutti i tag presenti nella pagina (o nelle pagine) che utilizzano quel foglio di stile. È improbabile che avrete mai bisogno di utilizzarlo, ma è bene sapere che è possibile scrivere una regola quale * { color: red; } e colorare di rosso tutto il testo presente nelle pagine. Un modo molto più chiaro e razionale per ottenere lo stesso risultato è selezionare il tag e assegnargli le caratteristiche base per le nostre pagina, ma nessuno vi vieta di ricorrere all’asterisco, se proprio lo volete. L’ordine in cui inserite i vari elementi da selezionare non farà alcuna differenza, per cui potete elencare prima i tag e poi le classi, oppure prima le classi e poi i tag, o anche mischiarli come preferite. La sola cosa a cui dovete sempre prestare la massima attenzione è inserire una virgola tra ogni elemento: se dimenticate la virgola, la regola sarà ugualmente valida, ma funzionerà in un modo alquanto diverso e, a meno di sorprendenti e improbabili coincidenze, il risultato non sarà quello che volevate voi. 3-4 Selettori discendenti Cosa succede se dimentichiamo la virgola tra i tag? Otterremo un selettore discendente. Invece di selezionare tutti i tag (o le classi) su un piano paritario, omettendo la virgola selezioneremo soltanto i tag contenuti direttamente nei tag che li precedono. Ad esempio p, a { //proprietà varie } seleziona tutti i tag h6d1x

(cioè tutti i paragrafi) e tutti i tag (cioè tutti i link, e attribuisce loro varie proprietà, elencate tra le parentesi graffe. Se togliamo la virgola, la regola p a { //proprietà varie } selezionerà tutti i tag (cioè i link) che si trovano all’interno di un tag

, ossia tutti i link all’interno dei vari paragrafi in cui è racchiusa la nostra pagina. Ricordate ciò che dicevo nel primo capitolo, parlando della struttura ad albero genealogico delle pagine? La troviamo applicata qui. La regola usata come

esempio si applicherà a tutti i tag che discendono da un tag

: possono essere i suoi figli, oppure i figli dei suoi figli, e così via. Il solo fattore importante è che, tra gli antenati, abbiano un tag

. Esiste poi un selettore molto simile, ma più specifico: il selettore dei figli. A differenza del selettore dei discendenti, che abbiamo appena visto, il selettore dei figli seleziona soltanto i tag che sono figli diretti del primo tag, ed è scritto con un > tra i due tag presi in esame. Di conseguenza, la regola p > a { //proprietà varie } si applicherà soltanto ai tag che sono figli diretti di un tag

. Ad esempio, il tag sarà selezionato, se abbiamo una struttura come questa

Questo è un link rutilante.

. Tutto ciò che abbiamo visto per i tag, naturalmente, si applica anche con le classi. Un selettore del tipo .primo a { //proprietà varie } selezionerà tutti i tag , che discendono da un qualsiasi tag dotato di una classe “primo”, mentre un selettore del tipo .primo > a {

//proprietà varie } selezionerà tutti i tag , che siano figli diretti di un qualsiasi tag dotato di una classe “primo”. Tag e classi sono quasi sempre intercambiabili, quando assembliamo una regola del CSS, per cui non ci sono limiti alle combinazioni, a parte quelli dettati dalla nostra sanità mentale. Se tutto questo vi sembra complicato, infatti, sappiate che potete renderlo ancora più complicato, se proprio volete. Sia il selettore dei discendenti, che il selettore dei figli, non sono limitati a due tag, ma possono essere estesi a volontà. Possiamo dunque scrivere p strong a { //proprietà varie } , che selezionerà per noi tutti i tag , che discendono da un tag <strong>, che a propria volta discende da un tag

. Allo stesso modo, scrivendo p > strong > a { //proprietà varie } , possiamo selezionare tutti i tag , che sono figli diretti di un tag <strong>, che a propria volta è figlio diretto di un tag

. Indipendentemente da quanto intricata sarà la relazione, resterà sempre un valido esempio di CSS e, di conseguenza, sarà interpretato e applicato dal dispositivo di lettura, quando si tratterà di rendere la pagina sullo schermo. D’altro canto, il fatto che una cosa sia possibile non implica necessariamente che sia anche bene farla. A meno che non ne vada della vostra esistenza, evitate di scrivere selettori di discendenti che vadano oltre il semplice “A è discendente di B”: vi risparmierete numerose complicazioni e, molto probabilmente, tempo sprecato a studiare le catene di parentele, per capire come mai quel maledetto tag

appaia di un colore, anziché di un altro. A trafficare troppo con selettori di questo tipo, vi potreste ritrovare, un giorno, a riempire fogli e fogli con la scritta “il mattino ha l’oro in bocca”, per poi inseguire vostra moglie (o vostro marito) impugnando un’accetta: siete avvisati.

3-5 Pseudoclassi e pseudoelementi

Accanto alle classi, che abbiamo già visto, esistono anche le pseudoclassi e gli pseudoelementi, ultimo argomento che tratterò in questo capitolo. A differenza di una classe, una pseudoclasse (o uno pseudoelemento) non è creata da noi e non può essere assegnata a un particolare tag: pseudoclassi e pseudoelementi sono categorie già definite nel CSS e messe a nostra disposizione, per selezionare parti molto specifiche di una pagina e applicarvi uno stile. Ad esempio, possiamo utilizzarle per selezionare la prima lettera di un paragrafo, oppure la prima linea di un paragrafo, o anche per assegnare colori diversi ai link, a seconda che siano stati già visitati o meno. Questo ultimo caso, probabilmente, non ci interesserà molto, ma poter decorare la prima lettera di un capitolo ci tornerà utile molto spesso, lavorando alla impaginazione di un libro. Per questo motivo, spenderà un poco di tempo a parlare di quelli che potrebbero servire in uno e-book. Le pseudoclassi che potreste voler utilizzare sono due ed entrambe sono abbinate al tag , in quanto descrivono lo stato dei link: sono :link e :visited. a:link Questo selettore funziona per tutti i link che non sono ancora stati visitati. Se volete utilizzarlo, scriverete una regola del tipo a:link { //proprietà varie }

, per modificare l’aspetto dei link, che i vostri lettori non hanno ancora visitato: tipica applicazione, in uno e-book, sarà per colorare in modo diverso le note e le voci dell’indice, a seconda che siano state viste o meno. Abbinato al precedente, troviamo il selettore a:visited , che invece seleziona tutti i link già visitati. In pratica, è l’opposto del precedente: a:link seleziona i link non ancora visitati, a:visited seleziona quelli già visitati. Per il resto, il funzionamento è lo stesso. Due pseudoelementi, che in un libro saranno usati spesso, sono :first-letter e :first-line. :first-letter Seleziona la prima lettera dell’elemento a cui è abbinato: solitamente un paragrafo, ma può essere qualsiasi altro elemento. Il suo uso più tipico, in uno ebook, è per assegnare alla prima lettera di un capitolo un aspetto diverso, rendendola più grande, di un altro colore e così via. In questo caso, noi creeremo una classe apposita per il primo paragrafo (per esempio, la classe “primo”) e, nel foglio di stile, scriveremo .primo:first-letter { //proprietà della prima lettera del primo paragrafo. } Lo pseudoelemento si attacca direttamente al nome del tag, oppure al nome della classe, a cui è abbinato. Il CSS3, ossia lo standard più recente del CSS, stabilisce che si debbano utilizzare due “due punti”, per unire uno pseudoelemento al tag/classe a cui si riferisce: in altri termini, al posto di .primo:first-letter dovremo scrivere .primo::first-letter

Siccome però non tutti i dispositivi di lettura ano il CSS3, vi consiglio di partire utilizzando la prima versione, che offre maggiori probabilità di funzionare anche su dispositivi più vecchi. Un secondo pseudoelemento, simile al precedente, è :first-line , che seleziona la prima riga dell’elemento a cui è stato abbinato. Il suo funzionamento è identico al precedente, in tutti gli aspetti. Se vogliamo che la prima riga di tutti i nostri paragrafi sia in grassetto, ad esempio, scriveremo p:first-line { font-weight: bold; } , oppure p::first-line { font-weight: bold; } , se vogliamo seguire le direttive del CSS3 e rischiare che i dispositivi più vecchi non lo riconoscano. Con ogni probabilità, tra pseudoclassi e pseudoelementi, il solo che vi troverete a utilizzare con una certa frequenza in un libro sarà :firstletter, per decorare la prima lettera di ogni vostro capitolo. Oltre a tutto ciò che abbiamo già visto, esistono anche altri tipi di selettori, ma non li affronterò in questa guida: dopotutto, sto parlando del CSS che è comunemente usato negli e-book, non del CSS in generale, e le probabilità che abbiate bisogno di altri selettori, mentre state impaginando un libro, sono estremamente basse. Se mai dovesse capitare, un manuale generalista di CSS dovrebbe potervi dare la risposta di cui avete bisogno.

4 Ereditarietà e stili a cascata

Come ho detto in precedenza, ogni pagina è strutturata come un albero genealogico, dove ogni tag rappresenta un componente della famiglia (o della dinastia, a seconda di quanto sia ramificata). Al vertice di tutto, come capostipite, si trova il tag , al cui interno è contenuta la pagina intera; il tag ha a propria volta due figli, ossia il tag e il tag . Il tag ci interessa poco, perché non ci offre nulla da impaginare; il tag , invece, è il contenitore di tutta la nostra pagina e possiederà un grande numero di discendenti. Il nostro lavoro di impaginazione si concentrerà quasi esclusivamente su e la sua allegra stirpe.

4-1 Ereditare uno stile

È importante avere sempre una buona idea della struttura delle nostre pagine, per un motivo molto semplice: quasi tutte le proprietà che assegniamo a un elemento saranno ereditate anche dai suoi discendenti. Quando assegniamo una proprietà al tag , tutti i tag contenuti in (cioè tutto ciò che vediamo sullo schermo) la erediteranno. Quando assegniamo una proprietà a un tag

, tutti i tag contenuti in

la erediteranno. E così via. Allo stesso modo, quando assegniamo una proprietà a una classe di stile, tutti gli elementi contenuti in un tag, che utilizza quella classe, erediteranno la proprietà della classe. Un uso accorto della ereditarietà può farci risparmiare tempo e fatica. Per assicurarci che tutta la pagina utilizzi un determinato stile (ad esempio, lo stesso tipo di font), basta assegnare quella proprietà al tag e ogni elemento al suo interno la erediterà. Se poi decidiamo che un certo elemento dovrà presentare uno stile diverso, basterà assegnare uno stile specifico a quell’elemento. In breve, l’ereditarietà si applica in questo modo:

se un elemento possiede uno stile specifico, usa quello stile; se un elemento non possiede uno stile specifico, usa lo stile del suo genitore.

Ovviamente, la regola è ricorsiva. Per decidere come visualizzare un elemento, un dispositivo di lettura cercherà prima di tutto uno stile specifico per quell’elemento. Se lo trova, lo utilizza e tutto si conclude così. Se non lo trova, cercherà lo stile specifico per il genitore dell’elemento. Se anche il genitore non possiede uno stile specifico, cercherà lo stile del genitore del genitore. E così via, fino a che non sarà trovato uno stile da applicare. Se nessuno stile esiste, sarà applicato lo stile di default, che può variare a seconda del dispositivo di lettura. Un esempio di questo meccanismo è il tipo di font da utilizzare, per visualizzare un testo. Se il testo possiede una proprietà font, il lettore utilizzerà quella proprietà. Se non la possiede, cercherà la proprietà font del suo genitore. Se neppure il genitore possiede un proprietà font, si cercherà la proprietà del genitore del genitore. Alla fine, se nessuna proprietà font è stata trovata, il lettore à il tipo di font che è stato impostato come base per quel dispositivo. Considerato questo meccanismo, una strategia razionale per impaginare il nostro libro è:

assegniamo a un elemento tutte le proprietà più generali e generiche, che tutto il nostro e-book dovrà possedere; per ogni elemento, specifichiamo le eventuali proprietà che dovrà possedere, se sono diverse dalle proprietà generali; partiamo sempre dagli elementi più grandi e scendiamo via via verso gli elementi più piccoli e specifici: definiamo prima lo stile di una pagina, poi lo stile di un paragrafo, quindi lo stile delle singole parti di un paragrafo, se dovranno essere diverse dallo stile generale.

Ovviamente, potranno esserci casi in cui questa strategia generale non sarà applicabile, o almeno non sarà applicabile per intero, ma resta comunque un buon punto di partenza, quando dovete decidere come organizzare il vostro lavoro. L’esperienza, poi, vi insegnerà eventuali sistemi per migliorarla, a seconda delle vostre abitudini e delle vostre preferenze.

4-2 Stile a cascata

Come spiegato in precedenza, lo stile discende per via ereditaria, dagli elementi più in alto (gli antenati) verso gli elementi più in basso (i discendenti). In una struttura di questo tipo, è possibile che, di tanto in tanto, si verifichino conflitti fra più stili e si debba determinare quale sia lo stile più forte, che sarà dunque applicato a un certo elemento. Situazioni di conflitto si possono tipicamente verificare in due casi:

quando gli antenati di un elemento assegnano valori differenti a un dato attributo; quando due o più regole diverse sono applicate a uno stesso elemento.

Per risolvere questi conflitti, il CSS dispone di un semplice “codice della strada”, in cui sono indicate le norme di precedenza tra le regole di stile. Questo codice della strada è chiamato “cascata” o, se preferite il termine inglese, “cascade” (cambiano solo le ultime due lettere e il significato è identico). Queste norme di precedenza sono molto semplici e, di fatto, le abbiamo già viste: le riassumerò in breve.

una regola attribuita a un elemento ha la precedenza su qualsiasi regola possa aver ereditato dai suoi antenati;

il più vicino antenato ha la precedenza sugli antenati più lontani.

Fin qui, sono le norme di cui abbiamo discusso, parlando della ereditarietà. Ci sono però anche altri casi da considerare, che non rientrano in queste norme. Che fare, ad esempio, quando un elemento possiede sia una regola impostata per il suo tipo di tag, sia una regola impostata per la sua classe? Ad esempio, se abbiamo un tag

e nel nostro foglio di stile abbiamo definito sia una regola per il tag

p { color: blue; } sia una regola per la classe “nota” .nota { color: red; } , di che colore sarà il testo delimitato da quel tag? à la regola del tag, assumendo quindi il colore blu, oppure la regola della classe, assumendo quindi il colore rosso? In casi come questo, dovremo ricorrere a un poco di aritmetica, per determinare lo stile vincente. Il CSS definisce alcuni punteggi, che sono assegnati alle varie regole, a seconda di come siano applicate: per il nostro lavoro sugli e-books, ci interessano soltanto due di questi punteggi, ossia

un selettore per tag vale 1 punto;

un selettore per classe vale 10 punti.

Gli pseudoelementi hanno lo stesso valore dei selettori per tag, mentre le pseudoclassi hanno lo stesso valore dei selettori per classe. Nel nostro esempio, abbiamo un selettore per tag (la regola assegnata al tag

) e un selettore per classe (la regola assegnata alla classe “nota”). Il selettore per tag vale 1, il selettore per classe vale 10; siccome 10 è superiore a 1, vince il selettore per classe e il testo sarà colorato di rosso. Questa norma di precedenza si applica soltanto quando le regole sono in conflitto, ossia quando le regole assegnano valori diversi a uno stesso attributo; se le regole operano su attributi diversi, non ci sono conflitti e tutte le regole saranno applicate, secondo la normale ereditarietà. Di conseguenza, se abbiamo sempre il nostro tag

e nel nostro foglio di stile abbiamo definito sia una regola per il tag

p { color: blue; } sia una regola per la classe “nota” .nota { font-size: 10px; } , le due regole non sono in conflitto, perché agiscono su attributi diversi: la prima sul colore, la seconda sulla dimensione dei caratteri. Dato che non c’è conflitto, le due regole possono coesistere pacificamente ed entrambe saranno applicate per intero al testo: avremo così un testo di colore blu e di 10 pixel di dimensione. Se utilizziamo selettori dei discendenti, oppure selettori dei figli, dovremo sommare i vari punteggi, per determinare quale regola abbia più valore e, dunque, la precedenza sulle altre.

Infine, resta un ultimo caso da esaminare: cosa succede, se due o più regole hanno uno stesso punteggio? In caso di pareggio, vince la regola che si trova più in basso nel foglio di stile. Ad esempio, osserviamo un paragrafo di questo tipo:

Per ulteriori informazioni in proposito, cercate pure su Google.

, che possiedono una classe “nota”; la seconda regola si applica a tutti i tag , che possiedono una classe “esterno”. Nel paragrafo in esame, entrambe le regole si dovrebbero applicare. Di che colore sarà la parola “Google”? Entrambe le regole totalizzano uno stesso punteggio, ossia 11: 1 punto dato dal selettore per tag, più 10 punti dati dal selettore per classe. Dobbiamo dunque guardare nel foglio di stile, per scoprire quale regola sia stata inserita per ultima. Nel nostro caso, l’ultima regola è quella che prevede il colore rosso, per il testo: la parola “Google” sarà pertanto colorata di rosso. Se nel foglio di stile invertiamo l’ordine di queste regole, ottenendo dunque a.esterno { color: red; }

p.nota { color: blue; } , la parola “Google” sarà colorata di blu, perché l’ultima regola prevede che il colore per il testo sia blu. Come si può capire, è fondamentale inserire le regole nel corretto ordine, se non vogliamo brutte sorprese: partiamo sempre dalle regole più generali e scendiamo via via verso le più specifiche.

5 Impostare i margini

Nei capitoli precedenti abbiamo visto in generale come costruire una regola CSS: la struttura di una regola, i selettori per “pescare” le porzioni di testo da modificare, e così via. A partire da questo capitolo, vedremo invece come riempire una regola, ossia cosa scrivere tra le parentesi graffe. Il contenuto di una regola è costituito da una serie di proprietà, ossia di coppie attributo+valore: un attributo identifica quale aspetto di un elemento vogliamo modificare (colore, dimensioni, posizione, eccetera), mentre il valore è, molto semplicemente, il modo in cui vogliamo modificare quel dato aspetto. Argomento di questo capitolo saranno gli attributi tramite cui possiamo decidere la gestione dello spazio, per un dato elemento. In altri termini, parleremo di margini, bordi e così via, tutto ciò che costituisce il cosiddetto “modello a scatola” (o a box, se volete suonare più anglofili).

5-1 Il modello a scatola

Quando pensiamo a un tag, molto spesso tendiamo a identificarlo col suo contenuto tradizionale. Un tag

è un paragrafo di testo, un tag è un link a qualche altra pagina, ossia una o più parole sottolineate e cliccabili, un tag è una immagine, e così via. Dal punto di vista di un browser, o di qualsiasi altro dispositivo di lettura, un tag è una piccola scatola: un mattoncino LEGO, se ci è più chiaro in questi termini. All’interno di questa scatola-tag possono trovarsi cose di ogni tipo: testo, immagini, video, o altro, ma tutto ciò è secondario. L’importante è che il tag occupa spazio, nella pagina, ed è un rettangolo (o un mattone) che il browser inserirà in un determinato posto, per costruire ciò che noi vedremo sullo schermo. Comporre una pagina, per un dispositivo di lettura, è come costruire un puzzle, i cui pezzi possono variare di dimensione in ogni momento. I pezzi del puzzle sono i tag: il tag è un rettangolo grande quanto la pagina intera, il tag

è grande quanto il paragrafo che contiene, il tag

sarà grande invece quando la riga di titolo corrispondente, e così via. Quando la dimensione di un pezzo cambia, tutta la struttura del puzzle si modificherà di conseguenza, scorrendo per risistemare tutto quanto in una posizione grande a sufficienza da contenerlo. Disegnare il layout di un sito Web significa giocare con questo puzzle e può essere alquanto dispendioso in termini di tempo, se dobbiamo mettere d’accordo pezzi di dimensioni molto diverse tra loro. Per uno e-book, in genere, le cose sono molto più semplici (a meno che non vogliate complicarvi la vita con impaginazioni strane o futuristiche, ma in questo caso la scelta è vostra), ma è comunque necessaria una certa attenzione alla disposizione spaziale degli elementi. Ogni scatola-tag è composta da quattro attributi fondamentali, che ne determinano la dimensione e la struttura e che noi possiamo spesso modificare a nostro piacimento: border è il più semplice di tutti: è il perimetro del rettangolo e rappresenta una “cornice” attorno a un elemento; padding è lo spazio vuoto tra il bordo di un elemento e il suo contenuto: se abbiamo deciso di racchiudere un paragrafo in una cornice, ad esempio, padding ci dirà quanto spazio bianco vedremo tra la cornice e il testo del paragrafo; margin è lo spazio che separa il bordo di un tag dal bordo dei tag che lo circondano: è lo spazio che fa da cuscinetto tra un tag e l’altro, separandoli; background-color, infine, è il colore con cui ci apparirà lo spazio all’interno del border ed è, di fatto, lo sfondo di quel tag. Se si opta per usare una immagine, anziché un colore, al suo posto emo un attributo background-image. Questi attributi costituiscono il modello a scatola per ogni tag e li possiamo modificare, per renderli di nostro gradimento. Margin, padding e border, inoltre, possono essere impostati individualmente per ognuna delle quattro direzioni (su, giù, destra e sinistra), oppure possono essere impostati in un colpo solo, per tutte e quattro le direzioni. Nel resto del capitolo vedremo come funzionino questi attributi. 5-2 Border Possiamo utilizzare l’attributo border, per disegnare una cornice attorno a un determinato elemento: attorno all’intero elemento, oppure attorno a uno o più dei quattro possibili lati della nostra scatola. La versione di base di questo attributo è border: , che imposta la cornice per tutti e quattro i lati nello stesso momento. Se invece vogliamo inserire una cornice soltanto lungo una parte del tag, possiamo usare uno o più di questi attributi: border-top, border-right, border-bottom, border-left. Come si può intuire dal nome, questi attributi disegneranno rispettivamente una cornice lungo il lato superiore, destro, inferiore e sinistro del tag. Per ognuno di questi attributi dobbiamo indicare tre valori: lo spessore, lo stile e il colore. Non ha importanza in che ordine li indichiamo, purché compaiano tutti e tre; solitamente, però, sono usati nell’ordine che ho indicato: per primo lo spessore, poi lo stile, infine il colore. Per esempio, border: 1px solid black; disegnerà una cornice dallo spessore di 1 pixel attorno al nostro elemento; la linea sarà continua (solid) e il suo colore sarà nero (black). Come vedete, gli attributi non devono essere separati da una virgola, ma da uno spazio bianco. Scrivendo invece border-bottom: 2px dotted red; , otterremo una linea punteggiata (dotted) sotto al nostro elemento, con uno spessore di 2 pixel e di colore rosso. Lo spessore di border è solitamente indicato in pixel, ossia la più comune unità di misura nel magico mondo della grafica al computer. Questo valore è espresso da un numero, seguito dalle lettere px, che indicano appunto la unità di misura utilizzata: fra il numero e px non va lasciato spazio. Scriveremo dunque 1px, per avere uno spessore di 1 pixel, 3px per uno spessore di 3 pixel, e così via. Potete anche utilizzare altre unità di misura, ma è meglio mantenere le cose semplici, almeno all’inizio. Lo stile indica il modo in cui sarà disegnato il bordo: linea continua, linea tratteggiata, puntini e così via. Per esprimerlo, abbiamo a nostra disposizione 10 valori: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden. None e hidden danno lo stesso risultato, ossia il bordo non sarà disegnato; gli altri otto stili, invece, producono effetti grafici più semplici da vedere applicati, che da descrivere a parole. I più normali, e dunque quelli usati più spesso in uno e-book, sono i primi quattro: solid è una normale linea chiusa, dotted è una linea punteggiata, dashed è una linea tratteggiata e double è una linea doppia. Il colore, infine, indica ovviamente il colore con cui il bordo sarà disegnato. Il colore, nel CSS, può essere indicato in almeno tre modi: per i colori base è di solito disponibile un nome (in inglese); per colori particolari, per le sfumature, o per essere sicuri che il colore sia compreso da ogni dispositivo, possiamo utilizzare il suo valore esadecimale, oppure indicare la combinazione di rosso, verde e blu che lo producono. E qui le cose possono farsi complicate. Nei casi più semplici, possiamo esprimere questo valore col nome inglese del colore che ci interessa: black, white, blue, red, green, yellow, magenta, e così via. Se non ci accontentiamo e vogliamo usare sfumature particolari, dovremo esprimere il colore attraverso un numero: un numero esadecimale, che rappresenta quel colore, oppure indicando la quantità di rosso, verde e blu da mescolare, per ottenere quel colore. Ne parlerò in modo approfondito in un’altra sezione di questo capitolo, descrivendo l’attributo background-color. 5-3 Padding Lo spazio che si trova tra il bordo di un elemento e il suo contenuto è determinato dall’attributo padding: se non abbiamo impostato il padding, o se il padding è pari a zero, il contenuto sarà appiccicato al bordo; se il padding ha un valore superiore a zero, avremo uno spazio vuoto di dimensione corrispondente tra il bordo del nostro elemento e il suo contenuto. Se abbiamo deciso di utilizzare l’attributo border, per disegnare una cornice attorno a una sezione del nostro e-book, è molto probabile che vorremo anche impostare l’attributo padding, per evitare che il testo della sezione sia appiccicato al bordo. L’attributo padding è disponibile in quattro gusti, a seconda di dove vogliamo inserire questo margine interno: padding-top, padding-right, padding-bottom e padding-left. Come è facile da intuire anche in questo caso, padding-top inserirà un margine interno tra il bordo superiore del nostro elemento e la parte alta del suo contenuto, padding-right lo inserirà tra il bordo destro del nostro elemento e il lato destro del suo contenuto, padding-bottom tra il bordo inferiore e la parte bassa del contenuto, padding-left fra il bordo sinistro e il lato sinistro del contenuto. Il valore da assegnare a questi attributi è un semplice numero, che indicherà la quantità di spazio da inserire. Di conseguenza, padding-left: 5px; inserirà un margine interno di 5 pixel tra il bordo sinistro e l’inizio del contenuto, mentre padding-bottom: 10px; inserirà un margine interno di 10 pixel tra il bordo inferiore e la fine del contenuto. Il valore sarà sempre numerico, ma non siamo limitati al pixel come unità di misura, anche se è la più comune. Un’altra unità di misura, usata abbastanza spesso in un e-book, sarà lo em. Lo em è una unità di misura più esoterica e meno chiara, rispetto a un pixel; inoltre, è molto variabile. Uno em corrisponde infatti al corpo del carattere che utilizziamo: se stiamo utilizzando un carattere di 16px, uno em corrisponderà a 16px; se ingrandiamo il carattere, anche lo em si ingrandirà di conseguenza. Per il resto, funziona come il pixel: scriviamo un numero e vi appiccichiamo la sigla em, senza lasciare spazi nel mezzo. Di conseguenza, padding-top: 2em; significa che dovrà esserci un margine interno pari a 2 caratteri tra il bordo alto dell’elemento e la parte superiore del contenuto. Per azzerare il padding, invece, basterà assegnare un valore di 0, senza bisogno di specificare l’unità di misura (lo 0 è sempre 0, che siano pixel, em o quant’altro). Se vogliamo impostare il padding su più lati, possiamo elencare uno dopo l’altro i vari lati. Se in una regola scriviamo padding-top: 10px; padding-left: 5px; , imposteremo un margine interno superiore pari a 10 pixel e un margine interno sinistro pari a 5 pixel. In alternativa, possiamo utilizzare una scorciatoia e impostare tutte e quattro le direzioni in una volta sola. padding: 5px; imposterà un margine interno di 5 pixel su tutti e quattro i lati. Se invece scriviamo padding: 10px 5px; imposteremo un margine interno superiore e inferiore pari a 10 pixel e un margine interno destro e sinistro pari a 5 pixel. Se invece scriviamo padding: 10px 5px 7px; imposteremo un margine interno superiore pari a 10 pixel, un margine interno destro e sinistro pari a 5 pixel e un margine interno inferiore pari a 7 pixel. Infine, se scriviamo padding: 10px 5px 5px 10px; otterremo un margine interno superiore pari a 10 pixel, un margine interno destro pari a 5 pixel, un margine interno inferiore pari a 5 pixel e un margine interno sinistro pari a 10 pixel. Riassumendo, abbiamo dunque quattro modi per utilizzare la proprietà abbreviata padding:, per impostare i margini interni di un elemento: assegnando un solo valore, quel valore sarà utilizzato su tutti e quattro i lati; con due valori, il primo sarà utilizzato per i margini sopra e sotto, il secondo per destra e sinistra; con tre valori, il primo sarà utilizzato per il margine superiore, il secondo per destra e sinistra, il terzo per il margine inferiore; con quattro valori, questi saranno utilizzati, nell’ordine, per i margini superiore, destro, inferiore e sinistro. Ovviamente, uno o più di questi valori possono essere impostati a 0, se non vogliamo un margine interno su quel lato. 5-4 Margin Tutto ciò che abbiamo appena detto per l’attributo padding vale anche per l’attributo margin. Se padding imposta il margine interno di un elemento, ossia lo spazio tra il suo bordo (il suo perimetro, se così ci è più chiaro) e l’inizio del suo contenuto, margin imposta invece il margine esterno di un elemento, ossia lo spazio tra il suo bordo e il bordo (o il margine) degli elementi confinanti. Un tipico caso in cui vorremo utilizzare l’attributo margin è per separare due elementi, attorno a cui abbiamo deciso di disegnare una cornice usando l’attributo border: se il margine esterno dei due elementi è pari a zero, le loro cornici saranno appiccicate e il risultato estetico potrebbe non essere molto bello. Inoltre, il tag possiede già un valore di margin superiore a zero, su qualsiasi browser o dispositivo di lettura: è per questo motivo che noi vediamo uno spazio vuoto di una riga, tra un paragrafo e il successivo. Se vogliamo eliminare questo spazio vuoto, e avere i paragrafi tutti attaccati come in un normale libro cartaceo, una delle prime regole nel nostro foglio di stile dovrà essere p { margin: 0; } In questo modo, il margine “naturale” posseduto da ogni tagsarà azzerato e potremo poi procedere assegnandovi lo stile che preferiamo, senza doverci preoccupare di interferenze del dispositivo di lettura. Anche l’attributo margin si presenta in quattro gusti di base, più una forma abbreviata. I quattro attributi di base sono margin-top, margin-right, marginbottom e margin-left e funzionano proprio come ci aspettiamo: margin-top imposta il margine esterno superiore, margin-right imposta il margine esterno destro, margin-bottom imposta il margine esterno inferiore e margin-left imposta il margine esterno sinistro. Come abbiamo già visto per padding, anche per margin il valore è un numero, accompagnato da una unità di misura: pixel (px) ed em sono le più usate. Anche il margine esterno può essere impostato con una formula abbreviata e le regole sono le stesse che abbiamo già visto per il padding. In altri termini, margin: 5px; imposterà un margine esterno di 5 pixel su tutti e quattro i lati. Se invece scriviamo margin: 10px 5px; imposteremo un margine esterno superiore e inferiore pari a 10 pixel e un margine esterno destro e sinistro pari a 5 pixel. Se invece scriviamo margin: 10px 5px 7px; imposteremo un margine esterno superiore pari a 10 pixel, un margine esterno destro e sinistro pari a 5 pixel e un margine esterno inferiore pari a 7 pixel. Infine, se scriviamo margin: 10px 5px 5px 10px; otterremo un margine esterno superiore pari a 10 pixel, un margine esterno destro pari a 5 pixel, un margine esterno inferiore pari a 5 pixel e un margine esterno sinistro pari a 10 pixel. Niente di nuovo sul fronte occidentale, insomma. Quando lavorate sui margini esterni, però, c’è un caveat a cui prestare molta attenzione. Quando i margini esterni di due elementi si toccano (ad esempio, se un elemento possiede un margin-bottom e l’elemento sottostante possiede un margin-top), i due margini non si sommano, come ci potremmo ingenuamente aspettare (e come accade con border), ma sarà utilizzato un margine solo: il più grande tra i due. Di conseguenza, se un paragrafo del nostro capitolo possiede una proprietà margin-bottom: 15px; e il paragrafo successivo possiede una proprietà margin-top: 10px; il margine effettivo tra i due paragrafi, disegnato sullo schermo, sarà di 15 pixel, cioè sarà uguale al valore più alto tra i due margini confinanti. Perché funziona così? Chiedetelo a chi progetta e realizza i browser. Siccome questo problema si verifica soltanto quando ci sono due margini esterni confinanti, possiamo risolverlo in modo molto semplice: per uno dei due elementi confinanti emo un attributo margin e per l’altro emo un attributo padding. Nell’esempio dei nostri due paragrafi in conflitto, possiamo assegnare al primo paragrafo una proprietà margin-bottom: 15px; e al secondo paragrafo una proprietà padding-top: 10px; In questo modo, lo spazio tra i due paragrafi sarà pari a 25 pixel (15 + 10), anziché essere 15 pixel, come accadrebbe usando l’attributo margin per entrambi. 5-5 Elementi a blocco e in linea Prima di poter concludere il discorso su margini e affini, c’è una ultima nota: gli attributi border, margin e padding possono essere utilizzati su qualsiasi tipo di tag, ma non sempre otterremo il risultato che ci aspettavamo. Lo HTML distingue infatti tra due tipi di elementi, ossia tra quelli che creano un blocco separato all’interno della pagina e quelli che coabitano su una stessa linea con altri elementi. I tage sono esempi tipici di tag che creano blocchi (servono proprio a dividere la pagina in sezioni logiche) e sono spesso accompagnati da una separazione grafica sullo schermo; i tag , <span> e sono esempi tipici di tag che coabitano su una stessa linea, senza dividere la pagina in blocchi. In caso di tag “in linea”, assegnare margini in alto e in basso non funzionerà come previsto, mentre i margini laterali non daranno problemi: non possiamo insomma usare padding-top o margin-bottom per aumentare lo spazio tra le linee (vedremo in un altro capitolo come fare, se vogliamo cambiare i valori di interlinea). O almeno, non normalmente. Esiste infatti un attributo particolare, che ci permette di decidere se un tag dovrà comportarsi come un blocco, oppure come un tag “in linea”: è l’attributo display. Se a un tag assegniamo la proprietà display: inline; , quel tag coabiterà pacificamente sulla stessa linea con altri tag, a prescindere da quale sia il suo tipo; se invece gli assegniamo la proprietà display: block; , quel tag creerà un blocco indipendente all’interno della pagina, proprio come il tag , e potremo controllare i suoi margini su tutti e quattro i lati. A titolo puramente informativo, è possibile anche assegnare un valore none a questo attributo, nascondendo così l’elemento a cui è applicato, ma è improbabile che ne avremo bisogno in un normale e-book, dato che il ricorso a display: none; è di solito accompagnato da una funzione in JavaScript, per modificarne il valore e mostrare o nascondere il contenuto. Nulla ci vieta di farlo, in teoria, ma argomento di questa guida è il CSS e un discorso sul JavaScript mi porterebbe alquanto fuori tema. 5-6 Background-color Dei quattro attributi fondamentali che abbiamo elencato all’inizio, parlando del modello a scatola, l’ultimo che mi resta da esaminare è background-color. Come il nome stesso suggerisce, questo attributo ci permette di impostare un colore come sfondo per un determinato elemento: più precisamente, il colore assegnato a background-color sarà utilizzato per tutto lo spazio all’interno del bordo di un elemento. Curiosamente, il colore sarà applicato anche sotto al bordo: se infatti assegniamo a border un valore di stile che non sia continuo, come ad esempio dotted (bordo a puntini) o dashed (bordo a trattini), anche lo spazio tra un segmento e l’altro del bordo sarà colorato in questo modo. A ogni modo, un utilizzo tipico di background-color è questo: body { background-color: yellow; } Questa regola colorerà tutte le nostre pagine di giallo, essendo assegnata direttamente al tag , ed è certo il sistema più veloce per assicurarci che tutto il nostro libro sia “stampato” su una carta virtuale dello stesso colore. È comunque importante ricordare che il colore non sarà applicato agli eventuali spazi impostati da margin, in quanto quelli si troveranno al di fuori del nostro elemento. Il valore da assegnare all’attributo background-color è sempre e solo un colore. Come avevo accennato già in precedenza, parlando dell’attributo border, il colore nel CSS può essere espresso in tre modi fondamentali: attraverso una parola inglese; attraverso un numero esadecimale; attraverso una combinazione delle dosi di rosso, verde e blu necessarie, per ottenere quel colore. Il primo caso è il più semplice. Molti colori possono essere indicati tramite il rispettivo nome inglese: tutti i colori fondamentali, più diversi altri. Per quanto semplice (basta un comune dizionario italiano-inglese), però, non è un metodo dal funzionamento garantito, soprattutto quando si tratta di dispositivo di lettura per e-book: colori come green e blue sono compresi pressoché ovunque, ma colori come burlywood o chartreuse potrebbero risultare indigesti a diversi lettori. A ogni modo, potrete trovare una lista completa dei nomi disponibili a questa pagina, ma non è garantito che tutti i dispositivi di lettura li capiranno: developer.mozilla.org/en-US/docs/CSS/color_value Il numero esadecimale è la forma più antica, utilizzata fin dai primordi del Web per impostare un colore in un documento HTML; non è però la più semplice, per un comune essere umano. Il numero esadecimale, utilizzato per esprimere un colore, è composto da sei cifre (o lettere), precedute da un #. Le cifre/lettere vanno da 0 a F, come per ogni altro numero in base 16 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) e sono raggruppate idealmente a due a due: la prima coppia indica la quantità di rosso che compone il colore, la seconda coppia la quantità di verde, la terza la quantità di blu. Ad esempio, #FF0000 indica il colore rosso, in quanto contiene la dose massima di rosso (FF) e zero dosi di verde e blu. Un modo semplice per scoprire il codice esadecimale corrispondente a un determinato colore, senza bisogno di perdere ore a procedere per esperimenti, è affidarsi a un programma di grafica come Photoshop o GIMP, che potrà facilmente indicarvi il valore esadecimale (spesso abbreviato in HEX) del colore che avete scelto in una tavolozza. Il terzo sistema per indicare i colori è, di fatto, quasi uguale al codice esadecimale, ma espresso in una forma solo blandamente più chiara. Utilizziamo come base la struttura rgb() e all’interno delle parentesi tonde, separate da una virgola, scriveremo tre cifre, comprese tra 0 e 255, dove 0 indica assenza di quella tinta e 255 indica il grado massimo di quella tinta: la prima cifra corrisponde alla quantità di rosso necessaria, per ottenere il colore che ci interessa, la seconda alla quantità di verde, la terza alla quantità di blu. Di conseguenza, rgb(255, 0, 0) corrisponde al colore rosso, proprio come il codice esadecimale che abbiamo visto in precedenza. In alternativa a un numero da 0 a 255, possiamo anche usare una percentuale: in questo caso, il colore rosso corrisponderà a rgb(100%, 0, 0) come era facile da indovinare. Se poi siamo profondamente masochisti e amiamo complicarci la vita, possiamo espandere questa struttura e aggiungere una quarta cifra, che esprimerà il livello di opacità del colore. In questo caso, la struttura di base sarà rgba() e al suo interno inseriremo quattro cifre: le prime tre saranno comprese tra 0 e 255, come prima, mentre la quarta sarà compresa tra 0 e 1 (ricordate di usare il punto, al posto della virgola, per i decimali). Per la opacità, il numero 1 significa completa opacità, il numero 0 significa completa trasparenza (il colore sarà invisibile, insomma), mentre i livelli intermedi indicano una corrispondente gradazione. Di conseguenza, rgba(255, 0, 0, 0.5) produrrà un colore rosso, che è parzialmente trasparente (al 50%, per la precisione). Se indichiamo un decimale, possiamo anche rimuovere lo 0 iniziale e scrivere .5, al posto dello 0.5 che ho inserito nel mio esempio. Oltre a questi, ci sarebbero anche altri sistemi, per selezionare un colore, ma per lavorare su uno e-book non c’è bisogno di procedere ulteriormente lungo la strada della follia e possiamo accontentarci di questi, che sono sufficienti per coprire la quasi totalità delle nostre esigenze in fatto di colori e sfumature. Se vogliamo colorare di verde lo sfondo di un elemento, abbiamo dunque le seguenti possibilità: background-color: green; background-color: #00FF00; background-color: rgb(0, 255, 0); background-color: rgb(0, 100%, 0); background-color: rgba(0, 255, 0, 1); Il risultato sarà sempre lo stesso, ossia uno sfondo di colore verde. A voi scegliere la soluzione che più vi soddisfa. Ovviamente, ciò che ho detto qui per background-color vale anche per ogni altro caso in cui dobbiamo indicare un colore in CSS, per cui è bene leggerlo con cura e ricordarlo. 5-7 Background-image Se non vogliamo utilizzare un colore, ma una immagine, come sfondo per la nostra pagina o un suo elemento, allora l’attributo da impostare sarà backgroundimage. Il suo funzionamento di base è molto semplice: basta assegnare a background-image il valore url(), con la posizione della immagine inserita tra le parentesi. Se la nostra immagine si trova nella cartella Images, dunque, la proprietà sarà background-image: url(../Images/Immagine.jpg); , secondo le normali regole dello HTML. Se vogliamo, possiamo racchiudere l’indirizzo tra due virgolette, ma non è strettamente necessario. Utilizzare una immagine come sfondo, però, può diventare piuttosto complesso, se vogliamo utilizzarla bene. Indicare la posizione della immagine da collocare nello sfondo è solo l’inizio del nostro lavoro. Dove vogliamo che sia l’immagine? Al centro dell’elemento? Spostata sulla destra? Vogliamo che sia ripetuta, fino a riempire tutto lo spazio? Dovrà apparire una volta sola? Di domande ce ne sono parecchie. Il primo caso da controllare è la ripetizione della immagine. Se abbiamo creato una piccola immagine, che simula la superficie della carta, e vogliamo usarla come sfondo per le nostre pagine, allora è probabile che vorremo ripeterla di continuo. La proprietà che ci interessa è dunque background-repeat, a cui possiamo assegnare quattro valori: repeat, no-repeat, repeat-x, repeat-y. repeat, ripeterà l’immagine fino a riempire tutto lo spazio; no-repeat non ripeterà l’immagine, che sarà dunque usata solo una volta (in questo caso, è opportuno che la nostra immagine sia grande esattamente quanto l’elemento di cui dovrà essere lo sfondo); repeat-x la ripeterà soltanto in orizzontale, ossia lungo l’asse delle x; repeat-y la ripeterà soltanto in verticale, ossia lungo l’asse delle y. Infine, dopo aver deciso quale immagine usare e se e come ripeterla, dovremo decidere la posizione in cui sistemarla: se l’immagine non sarà ripetuta, quella sarà la posizione in cui la vedremo; se sarà ripetuta, quello sarà il punto da cui le ripetizioni partiranno. L’attributo da impostare è background-position. Per indicare la posizione, abbiamo due modi fondamentali: usare parole chiave, oppure usare una posizione precisa in pixel. Le parole chiave sono sei e sono da utilizzare in coppia: left, center e right per la disposizione in orizzontale, top, center e bottom per la disposizione in verticale. Se voglio dunque che la mia immagine sia posizionata in alto a destra, dovrò scrivere: background-position: right top; Utilizzare una posizione precisa in pixel funziona più o meno allo stesso modo: al posto delle parole chiave, dovremo utilizzare un numero, accompagnato dalla solita unità di misura px. Ad esempio, background-position: 50px 15px; sistemerà la nostra immagine a 50 pixel dal margine sinistro dell’elemento di cui è sfondo e a 15 pixel dal margine alto. Riassumendo, la regola per aggiungere una immagine come sfondo agli elementi che implementano una classe “pagina” potrebbe apparire così: .pagina { background-image: url(../Images/carta.jpg); background-repeat: repeat; background-position: left top; } In questo esempio, utilizziamo come sfondo una immagine di nome “carta.jpg”, collocata nella cartella Images; specifichiamo che dovrà essere ripetuta e che il punto di partenza della ripetizione deve essere il punto in alto a sinistra dell’elemento. Utilizzare immagini come sfondo, in uno e-book, può risultare piuttosto problematico, dato che bisognerà prendere in considerazione le dimensioni degli schermi dei vari dispositivi di lettura su cui potrebbe essere riprodotto: se volete lanciarvi in questa impresa, procedete per tentativi e verificatene ogni volta il risultato su un dispositivo a vostra scelta (sarebbe meglio testarlo su più dispositivi, ma ci possiamo accontentare). 5-8 Gradienti di colore Un altro modo in cui possiamo utilizzare un attributo background-image è con un gradiente di colore: molto più semplice che utilizzarlo con una immagine, ma il o dei vari dispositivi di lettura è tutto da verificare, dato che anche tra i browsers il o ha latitato a lungo ed è ancora oggi alquanto scadente, dato che necessita spesso di appoggiarsi a prefissi specifici per le famiglie di browsers. Usando un gradiente di colore, lo sfondo di un elemento non sarà composto da una immagine, né da un colore uniforme, ma da un colore che sfumerà gradualmente in un altro colore. Anche in questo caso, non so quanto possa essere utilizzabile in un libro, a meno che non sia rivolto a bambini, ma questo è un altro discorso. Per utilizzare un gradiente di colore, dovremo assegnare a background-image un valore linear-gradient(), inserendo fra le parentesi alcuni valori supplementari: il minimo indispensabile è tre, ossia la direzione in cui il colore digraderà, il colore di partenza e il colore di arrivo. Ad esempio, background-image: linear-gradient(right, blue, red); imposterà per il nostro elemento uno sfondo che, a destra, sarà di colore blu e digraderà a poco a poco verso il colore rosso, che raggiungerà sul lato sinistro dell’elemento. Allo stesso modo, background-image: linear-gradient(top, green, white); partirà col colore verde nella parte alta dell’elemento e a poco a poco si cambierà in bianco, scendendo verso il basso. Possiamo anche muoverci in diagonale, con una proprietà del tipo background-image: linear-gradient(top left, blue, red); che partirà nell’angolo in alto a sinistra col colore blu e lo trasformerà gradualmente in rosso, scendendo verso l’angolo in basso a destra. Se proprio vogliamo, non siamo limitati a due colori, ma possiamo utilizzarne anche tre o più: in questo caso, primo e ultimo colore della lista corrisponderanno alla estremità iniziale e finale del processo, mentre gli altri colori saranno i punti intermedi. Anche in questo caso, non so quanto sia utilizzabile in un libro una simile arlecchinata, ma è tecnicamente possibile realizzarla: background-image: linear-gradient(left, red, blue, yellow); partirà da un colore rosso a sinistra, raggiungerà il blu verso la metà della pagina e poi digraderà verso il giallo, che sarà raggiunto sul margine destro. Per le direzioni, abbiamo a disposizione quattro parole chiave: top, bottom, right, left. Con una conoscenza minima della lingua inglese, non dovrebbe essere molto difficile capire cosa significhino e a quali posizioni corrispondano in italiano (alto, basso, destra, sinistra). Per i colori, invece, possiamo utilizzare i sistemi già visti, per esprimerli: nomi in inglese, codice esadecimale, quantità di rosso, verde e blu. I gradienti di colore possono essere utilizzati in molti altri modi, combinandoli con altre proprietà quali background-position, ma andremmo fuori argomento: considerato anche il o scarso di questa proprietà, tra i dispositivi di lettura, è prematuro dedicarle troppo spazio, ma è comunque utile conoscerne l’esistenza e la struttura di base. 5-9 Box-shadow Per chiudere con le scatole, prima di cominciare a romperle, vediamo un ultimo effetto che, per qualche motivo non necessariamente razionale, potreste voler utilizzare in una parte di un vostro e-book. Ogni elemento di una pagina, come si diceva all’inizio, è racchiuso in una scatola o, se ci risulta più semplice da visualizzare, è un rettangolo. Impostando l’attributo border, abbiamo visto come disegnare i contorno di questo rettangolo. Utilizzando un altro attributo, ossia box-shadow, possiamo anche simulare un’ombra, proiettata da questo rettangolo. A dire il vero, mi risulta piuttosto difficile immaginare un caso in cui potrei desiderare di vedere questo effetto in uno e-book, ma non si sa mai: alcuni potrebbero decidere che è un fantastico modo per evidenziare una sezione di capitolo. A ogni modo, guardiamone in breve il funzionamento. Nella sua struttura di base, che è anche la sola che affronterò in questa guida, l’attributo box-shadow richiede 4 valori: posizione orizzontale dell’ombra; posizione verticale dell’ombra; raggio dell’ombra; colore dell’ombra. Il primo valore, espresso da un numero (più l’unità di misura), ci indica quanto sporga di lato la nostra ombra: un numero negativo la farà sporgere a sinistra dell’elemento, un numero positivo la farà sporgere a destra. Il secondo valore, sempre espresso da un numero più la sua unità di misura, ci indica quanto sporga in alto o in basso la nostra ombra: un numero negativo la farà sporgere sopra all’elemento, un numero positivo la farà sporgere sotto all’elemento. Il terzo valore indica la dimensione della nostra ombra. Partendo dal bordo del nostro elemento, l’ombra sbiadirà sempre di più, fino a svanire: questo numero ci indica dopo quanto spazio l’ombra svanirà ed è espresso da un numero positivo. Il quarto valore è un colore, espresso secondo le regole che abbiamo visto poco fa, parlando appunto dei colori, e indica la tinta che la nostra ombra possiederà. Ad esempio, box-shadow: -4px 5px 5px #000000; produrrà un’ombra che si trova a sinistra di 4 pixel e in basso di 5 pixel, rispetto al nostro elemento, ha un colore nero e svanirà a una distanza massima di 5 pixel. Questo paragrafo, a titolo di esempio, ha volontariamente accettato di sopportare il disonore di una proprietà box-shadow, offrendosi in olocausto a tutti i dispositivi di lettura: se lo vedete accompagnato dalla propria ombra, in basso e a sinistra, allora significa che questa proprietà funziona sul dispositivo che state utilizzando. Congratulazioni (o condoglianze, a seconda dei casi e dei punti di vista)! Il o di questa proprietà non è molto ben diffuso, al momento, ed è dunque meglio non farvi troppo affidamento. In particolare, è garantito che non funzionerà sui modelli più vecchi di Android e iPhone, o almeno non così come è: dovrete aggiungere anche il prefisso -webkit- all’attributo. Di conseguenza, se vogliamo che il nostro e-book non perda le sue ombre su questi modelli di smartphone, dovremo scrivere due versioni di questa proprietà, ogni volta che la usiamo. Ad esempio, per applicare questa proprietà a una ipotetica classe “rilievo”, scriveremo: .rilievo { -webkit-box-shadow: -4px 5px 5px #000000; box-shadow: -4px 5px 5px #000000; } Lo smartphone più vecchio interpreterà e applicherà la prima forma, mentre tutti gli altri dispositivi applicheranno la seconda. Progettando a un sito Web, potremmo trovare almeno una decina di altri modi, per complicarci la vita lavorando su bordi, margini e altro: siccome qui ci occupiamo soltanto di e-book, possiamo limitarci a quanto visto nel capitolo e procedere coi prossimo argomenti. 6 Formattare il paragrafo Dopo esserci divertiti come pazzi, lavorando ai margini del nostro e-book, vediamo adesso in quali modi possiamo prendere un piccolo, povero, indifeso e inconsapevole paragrafo del nostro testo e brutalizzarlo al di là di ogni possibile riconoscimento. Come dicevo anche in precedenza, tutto ciò che descriverò in questo capitolo potrà essere utilizzato, per cambiare la faccia dei nostri paragrafi, ma non significa che queste proprietà dovranno essere applicate tutte assieme, su uno stesso paragrafo. Esiste anche una cosa chiamata buon gusto e ogni tanto può essere simpatico applicarla: un testo nasce prima di tutto per essere letto ed è dunque opportuno che rimanga leggibile, anche se questo potrebbe costringerci a frenare un poco le nostre aspirazioni di grandi artisti figurativi. Dopo questa premessa, mettiamoci al lavoro. Se si tratta di impostare o modificare lo stile di un paragrafo o di un intero capitolo, i tag che ci servono sono fondamentalmente due: il tage il tag . Il tag , come abbiamo già visto, racchiude un paragrafo di testo ed è, con ogni probabilità, il tag che appare più spesso in uno e-book. Di conseguenza, se vogliamo impostare uno stile di base che sia valido per ogni paragrafo del libro, selezioneremo il taged elencheremo tutte le proprietà che i nostri paragrafi devono possedere. Il tag ha un uso meno definito, ma non meno importante: in uno e-book, compare nella maggior parte dei casi come strumento, per racchiudere una parte più o meno grande del documento, a cui dovrà essere assegnato uno stile particolare. A titolo di esempio, un capitolo si potrebbe presentare così: Capitolo primo Primo paragrafo. Secondo paragrafo. Terzo paragrafo. Quarto paragrafo. Quinto paragrafo. In questo esempio ho utilizzato due tag : il primo per racchiudere il titolo del capitolo, il secondo per racchiudere il contenuto del capitolo. A entrambi i tag ho applicato una particolare classe, che ò nel foglio di stile per definire l’aspetto delle rispettive porzioni di testo. La classe “titolo” conterrà tutte le proprietà che dovranno essere comuni ai titoli dei vari capitoli (tipo di font, dimensione del carattere, colore, allineamento, margini, eccetera), mentre la classe “pagina” conterrà tutte le proprietà che dovranno essere comuni al testo dei vari capitoli (tipo di font, dimensione del carattere, margini, colore dello sfondo, eccetera). Inoltre, al primo paragrafo del capitolo ho assegnato una classe “primo”, che conterrà tutte quelle proprietà che dovranno contraddistinguere il primo paragrafo di un capitolo. Di conseguenza, il foglio di stile presenterà una struttura di questo tipo: .titolo{ //proprietà comuni a tutti i titoli di capitolo } .pagina { //proprietà comuni al testo di tutti i capitoli } p { //proprietà comuni a tutti i paragrafi } .primo { //proprietà del primo paragrafo di un capitolo } .primo:first-letter { //proprietà della prima lettera del primo paragrafo di un capitolo } Ovviamente, questo è solo un esempio di come si potrebbe impostare un capitolo: ognuno è poi libero di scegliere la struttura che preferisce, oppure la struttura più adatta al libro da impaginare. È comunque un utile riferimento, per capire meglio gli attributi di cui parlerò nelle prossime pagine. 6-1 Allineare il contenuto Una delle prime preoccupazioni che ci si pone, quando bisogna impaginare un capitolo, è il tipo di allineamento da assegnare al testo. Vogliamo che il contenuto sia allineato a sinistra, con un margine destro frastagliato? Vogliamo che il contenuto sia allineato a destra, con un margine sinistro frastagliato? Oppure vogliamo una giustificazione classica, da libro cartaceo, dove tutte le righe hanno la stessa lunghezza? Qualunque sia la risposta, l’attributo che ci interessa è text-align. Il funzionamento di text-align è identico a quello dei quattro famigerati pulsanti, che troviamo in ogni elaboratore di testi e che, premendoli, ci permettono di cambiare il modo in cui il testo è distribuito nella pagina. Come è facile da immaginare, i valori a disposizione sono quattro. text-align: left; il testo sarà allineato a sinistra: avremo dunque un margine sinistro bello preciso, mentre il margine destro avrà un aspetto frastagliato. text-align: right; l’esatto opposto del precedente: il margine destro sarà preciso, il margine sinistro sarà frastagliato. È improbabile che desidereremo utilizzare una proprietà di questo tipo, se stiamo scrivendo in un linguaggio che si legge da sinistra a destra (come il nostro), ma potremmo volerla scegliere se il nostro libro è scritto in un linguaggio che si legge da destra a sinistra (come l’arabo). text-align: center; il contenuto è allineato al centro della pagina, con entrambi i lati frastagliati. Una proprietà di questo tipo è comune per i titoli, ma decisamente non è comune per il contenuto di un paragrafo. text-align: justify; è il classico stile da carta stampata: tutte le righe hanno la stessa lunghezza, entrambi i margini sono precisi e squadrati. È lo stile che probabilmente sceglierete per un romanzo, oppure per un manuale, ma con un’avvertenza: browsers e dispositivi di lettura non possiedono facilitazioni per andare a capo, spezzando una parola. Di conseguenza, è possibile che il contenuto di una riga includa anche spazi vuoti piuttosto larghi, tra una parola e l’altra, per “riempire lo spazio”. 6-2 Altezza della linea Un’altra proprietà, che probabilmente desidereremo modificare in base ai nostri gusti, è l’altezza di una linea di testo. L’attributo line-height è il nostro migliore amico, in questo caso: il valore che gli assegneremo determinerà, di fatto, l’ampiezza dello spazio tra una linea e la successiva (la famosa interlinea, insomma). Il funzionamento di questo attributo è molto semplice: il valore che noi gli assegneremo corrisponde all’altezza che possiederanno le varie linee del testo. Fin qui, nessun problema. Il discorso si fa un poco più complicato, quando si a a esaminare i possibili valori di questo attributo, dato che le possibilità sono parecchie e non sempre chiare. La dimensione della interlinea può dunque essere espressa in percentuale: line-height: 150%; significa che ogni riga sarà alta il 150% della dimensione impostata per il carattere. La distanza effettiva tra una linea e l’altra sarà dunque pari alla metà dell’altezza del carattere. Se il nostro carattere ha una dimensione di 12 pixel, line-height: 150%; renderà la riga alta 18 pixel (il 150% di 12) e lo spazio tra le righe sarà pari a 6 pixel (altezza della riga meno altezza del carattere). A titolo indicativo, l’impostazione di base di browsers e dispositivi di lettura prevede un valore di 120% per questo attributo. La percentuale è il sistema consigliato, per esprimere il valore di questa proprietà: in questo modo, al variare della dimensione dei carattere, lo spazio tra le righe cambierà in proporzione. Nulla ci vieta, però, di utilizzare altre unità di misura: possiamo assegnare a line-height un valore in pixel, ad esempio, oppure in em (unità di misura, che corrisponde all’altezza del carattere in uso). Inoltre, è possibile indicare il valore con un semplice numero: line-height: 1.5; In questo caso, la dimensione del carattere sarà moltiplicata per il numero da noi indicato e il risultato sarà l’altezza della nostra linea. Di fatto, il risultato è quasi identico a quello ottenuto, se indichiamo il valore in percentuale, ma con una grossa differenza, che diventa visibile in caso di ereditarietà. La proprietà line-height è ereditabile: se assegniamo questa proprietà a un elemento, tutti i suoi discendenti la erediteranno e avranno la stessa interlinea. Se esprimiamo il valore in percentuale, ciò che sarà ereditato non è la percentuale, ma il risultato del calcolo: se in un elemento il carattere di 12 pixel e la linea è alta il 150%, i suoi discendenti erediteranno una linea alta 18 pixel (il risultato del calcolo). Se invece utilizziamo un numero semplice, come 1.5, tutti i discendenti erediteranno il numero e lo moltiplicheranno di volta in volta per le dimensioni del carattere che possiedono. Questa distinzione può apparire pignola e di scarsa importanza, ma diventa molto importante se il discendente utilizza un carattere di dimensioni maggiori, rispetto al suo antenato. Conducete pure qualche semplice esperimento, alternando i due valori, per verificarlo di persona. 6-3 Paragrafi con rientro Una caratteristica molto comune, almeno nelle opere stampate, è un leggero rientro nella prima riga di ogni paragrafo, escluso a volte il primo paragrafo del capitolo. Nei documenti in HTML, di solito, il rientro di paragrafo non è utilizzato, ma il aggio da un paragrafo al successivo è marcato da una tecnica affine: una riga vuota. Proprio per questo motivo, nelle impostazioni di base del tag è presente un margine, che lo separa dal blocco precedente e da quello successivo. Non siamo obbligati a seguire questo sistema. Se la riga vuota tra un paragrafo e l’altro non ci piace, e preferiamo che il nostro e-book utilizzi il rientro nella prima riga, c’è un apposito attributo, che ci permetterà di impostare quanto debba essere il rientro nella prima riga di un paragrafo: è l’attributo text-indent. Il valore da assegnare a questo attributo è un numero, che indica l’ammontare del rientro, ed è di solito espresso in pixel, oppure in em. Ad esempio, text-indent: 2em; dirà al nostro paragrafo che la prima riga deve presentare un rientro pari alla dimensione di due caratteri. Allo stesso modo, text-indent: 10px; dirà al nostro paragrafo che la prima riga deve presentare un rientro pari a 10 pixel. Di norma, lo si trova usato all’interno di una regola, applicata al tag, oppure a una classe che sarà abbinata a un tag. p { //varie proprietà text-indent: 10px; //altre proprietà } Ovviamente, una proprietà del tipo text-indent: 0; annullerà ogni eventuale rientro, che il nostro paragrafo potrebbe avere ereditato da un suo antenato. Se abbiamo impostato un rientro iniziale per tutti i paragrafi, ma vogliamo che il primo paragrafo di ogni capitolo non abbia alcun rientro, basterà assegnare una proprietà text-indent: 0; alla sua classe. Questo attributo text-indent imposta un rientro soltanto per la prima riga del paragrafo. Se vogliamo invece che tutto il paragrafo sia rientrato, rispetto al resto del testo, e vogliamo farlo mediante il CSS, allora la soluzione migliore è creare una classe, da assegnare a tutti i paragrafi che dovranno essere rientrati (oppure da assegnare a un tag , con cui racchiudere tutti i paragrafi da rientrare), e poi modificare gli attributi di margin-left e/o margin-right per quella classe. Per esempio, la regola .citazione { margin-left: 15px; } assegnerà a tutti i tag, che implementano una classe “citazione”, un margine sinistro pari a 15 pixel, che li farà apparire rientranti rispetto al resto della pagina. Allo stesso modo, impostando margin-top e margin-bottom, possiamo aumentare o diminuire lo stacco tra un paragrafo e il successivo, come ho già detto parlando dei margini nel capitolo precedente. 6-4 Prima lettera e prima riga Come visto in precedenza, esistono due pseudoelementi che ci permettono di isolare e modificare due porzioni di un paragrafo: :first-letter, che modifica la prima lettera, e :first-line, che modifica la prima riga. Non potendoli usare da soli, nel foglio di stile li dovremo appiccicare a un selettore, che tipicamente sarà il tag , se vogliamo che questa regola sia valida per tutti i paragrafi, oppure una particolare classe, se vogliamo che sia valida soltanto per alcuni paragrafi. Se abbiamo creato una classe “primo”, da assegnare al primo paragrafo di ogni capitolo, e vogliamo che la prima lettera del primo paragrafo abbia una decorazione particolare, magari per ricreare uno stile da codice miniato medievale, possiamo scrivere una regola di questo tipo: .primo:first-letter { //proprietà da assegnare alla prima lettera. } La regola così definita si applicherà alla prima lettera di tutti i paragrafi, che implementano una classe “primo”. Più avanti, nel corso della guida, vedremo anche cosa sia possibile fare a una singola lettera, utilizzando il CSS: cambiarne le dimensioni, lo stile, il colore, la posizione, lo sfondo, eccetera. Per il momento, accontentiamoci di sapere come selezionarla. A titolo di esempio, una regola del tipo .primo:first-letter{ display: block; float: left; font-weight: bold; font-size: 4.4em; line-height: 0.8em; color: rgb(40,40,40); } ingrandisce la prima lettera, la colora, la rende in grassetto e la allinea poi al resto del paragrafo. Non preoccupatevi, se non avete capito la maggior parte di queste proprietà: molte le dobbiamo ancora vedere, ma alcune le dovreste aver riconosciute, come color: e line-height:. Sempre a titolo informativo, questa regola è pensata per un paragrafo privo di rientro nella prima riga. Per lo pseudoelemento :first-line, il discorso è identico: non potendo essere utilizzato da solo, lo dovremo attaccare a un altro elemento, come il tago una classe di stile, per poter selezionare e modificare la prima riga di quella porzione di testo. Quanto sarà lunga, di preciso, la prima linea, è un dettaglio che non abbiamo bisogno di conoscere e, in fin dei conti, non ci deve neppure interessare: dipende in larga parte dalla dimensione dello schermo, su cui il nostro e-book è riprodotto. 6-5 Impaginazione “galleggiante” Per concludere il capitolo, parlerò di una strategia molto diffusa nei siti Web, ma di scarsa applicabilità in uno e-book; ha però i suoi possibili usi e per questo è opportuno dedicarle una sezione. La strategia a cui mi riferisco è l’uso dell’attributo float:, per posizionare liberamente un elemento all’interno di un altro elemento. Normalmente, gli elementi che compongono una pagina sono distribuiti sullo schermo nello stesso ordine in cui appaiono nel file HTML: dall’alto verso il basso e da sinistra verso destra, per riempire tutto lo spazio disponibile nello schermo. In pratica, se il corpo della pagina ha una struttura TitoloPrimo paragrafo.Secondo paragrafo.Terzo paragrafo.Quarto paragrafo. , il dispositivo di lettura inserirà prima di tutto l’elemento , poi il primo elemento , quindi il secondo elemento, l’immagine, andrà a capo con l’elemento e riprenderà con un altro elemento. Tutto quanto sarà impilato con ordine, come mattoni collocati l’uno sopra l’altro. Di solito è proprio ciò che vogliamo. A volte, però, potremmo desiderare un ordine differente. Ad esempi, potremmo volere che una immagine sia collocata accanto a un paragrafo, invece che sotto, e magari col testo del paragrafo che la avvolge. Oppure, come nell’esempio della sezione precedente, potremmo volere ingrandire la prima lettera del capitolo, distribuendola su più linee, come in una miniatura di un manoscritto medievale. La proprietà float può permetterci di ottenere questo risultato. La proprietà float stacca un elemento dalla sua posizione naturale, all’interno di una pagina, e lo porta a galleggiare verso uno dei due lati del blocco che lo contiene. Più precisamente, collocherò quell’elemento lungo il lato destro o il lat sinistro, nel blocco che lo contiene: se quell’elemento non è alla fine del blocco, ma in un’altra sua parte (all’inizio o al centro), tutto il resto del blocco si avvolgerà attorno a lui. Se l’elemento a cui la proprietà float è applicata non è contenuto in un altro elemento, allora sarà spostato a destra o a sinistra della pagina, dato che è comunque contenuto nell’elemento . Come ogni altra proprietà, è poi composta da due parti: l’attributo float: e il relativo valore, che indicherà la parte di pagina verso cui vogliamo far “galleggiare” quell’elemento. I valori che possiamo assegnare a float sono tre: left, per spostarlo a sinistra: right, per spostarlo a destra; none, per non spostarlo e annullare eventuali spostamenti ricevuti in eredità. Riprendendo l’esempio della sezione precedente, ossia .primo:first-letter{ display: block; float: left; font-weight: bold; font-size: 4.4em; line-height: 0.8em; color: rgb(40,40,40); } , possiamo vederne meglio il funzionamento. Prima di tutto, ho selezionato un elemento interno a un altro elemento, ossia la prima lettera di un paragrafo. Siccome una lettera, di per sé, non costituisce un blocco, le ho assegnato la proprietà display: block;, per farla agire come un blocco. Dopo questo, l’ho fatta galleggiare a sinistra (float: left;) rispetto al resto del testo e le ho assegnato le varie proprietà, che la prima lettera del testo deve possedere. In questo modo, la prima lettera ha formato un blocco, all’interno del blocco-paragrafo, e il resto del testo le si avvolge attorno. Possiamo eseguire una operazione analoga con una immagine, per posizionarla meglio nel nostro libro, ma con una differenza: siccome una immagine costituisce già un blocco, non avremo bisogno di assegnarle una proprietà display: block;, come invece ho dovuto fare con una singola lettera. Ad esempio, in un paragrafo del tipoImmaginate che questo paragrafo contenta testo molto interessante e non solo una serie di parole, disposte a casaccio a titolo di esempio. Ecco una foto che lo rappresenta al meglio. Tutto il testo successivo a questa immagine, cioè dalla parola “Tutto” in poi, si arrotolerà alla sinistra della immagine ed eventualmente al di sotto, se le abbiamo assegnato una proprietà float: right;, mentre farà la stessa cosa sul lato opposto, se la proprietà è float: left;. Provare per credere. , la prima parte del paragrafo comparirà normalmente, fino al punto in cui abbiamo inserito il tag . Da quel punto in poi, se abbiamo assegnato alla nostra immagine una proprietà float: left;, il testo si arrotolerà sulla destra della immagine, avvolgendola se necessario. Ne potete ammirare il risultato nel paragrafo seguente, che vale come esempio pratico. Immaginate che questo paragrafo contenta testo molto interessante e non solo una serie di parole, disposte a casaccio a titolo di esempio. Ecco una foto che lo rappresenta al meglio. Tutto il testo successivo a questa immagine, cioè dalla parola “Tutto” in poi, si arrotolerà alla sinistra della immagine ed eventualmente al di sotto, se le abbiamo assegnato una proprietà float: right;, mentre farà la stessa cosa sul lato opposto, se la proprietà è float: left;. In questo caso, è utile anche assegnare un certo valore di padding alla foto, così da evitare che il testo finisca spiaccicato contro il suo contorno. Se la foto è più alta rispetto al paragrafo che la contiene, o rispetto al generico elemento che la contiene, allora si prolungherà sul testo sottostante, con possibili effetti non desiderati sulla nostra impaginazione. Ovviamente, dopo aver assegnato la proprietà float, possiamo aggiungere qualsiasi altra proprietà, per rendere più bello l’elemento: un margine tra quell’elemento e il testo, ad esempio, oppure variarne le dimensioni o la grandezza della linea, eccetera. 7 Formattare il testo Dopo aver parlato di pagina e paragrafo, proseguirò questa guida alla impaginazione degli e-books col terzo argomento fondamentale: il testo. Ovviamente, mi riferisco all’aspetto del testo, non al suo contenuto: ciò che sarà scritto in uno e-book è a carico dello scrittore, io mi limiterò a descrivere i modi in cui impostare un determinato tipo di font, colorare il testo in un certo modo, deciderne le dimensioni di partenza e così via. Il contenuto di uno e-book resta sempre e comunque il suo elemento più importante, quello a cui dedicare la massima cura e attenzione, ma una buona presentazione grafica ne è il condimento, che rende il contenuto più (o meno) appetitoso. A titolo di premessa generale, specifico subito che utilizzerò la parola “font” al maschile. In un computer, e di conseguenza anche in un dispositivo di lettura per e-book, il font è un normale file (un, maschile), al cui interno sono rappresentati tutti i caratteri disponibili per quel determinato tipo: il font Arial, ad esempio, sarà composto da un file che contiene tutti i caratteri disponibili in stile normale, un altro file che contiene tutti i caratteri in corsivo, un altro che contiene tutti i caratteri in grassetto e così via, per tutti gli stili in cui un dato font è disponibile. Riprenderò questo discorso in dettaglio più avanti, parlando di come incorporare un font. In breve, un font digitale è un documento, per cui utilizzerò il genere maschile. Se avete studiato come grafici e siete stati addestrati a utilizzare sempre e solo il femminile, anche quando si parla di computer e non di valigette rétro, contenenti lettere in piombo, è possibile che vedere “font” al maschile vi causi sonno alterato, nausea, febbre, inappetenza, crisi di identità, senso di colpa o disturbi anche più gravi: in questo caso, siete liberi di modificare il testo e sostituire il genere maschile con il femminile, se proprio non resistete. 7-1 Impostare un font Qualunque tipo di modifica vogliate appioppare al vostro testo, il primo o sarà decidere e impostare il tipo di font, che il dispositivo di lettura dovrà utilizzare per rappresentare il nostro testo. Per farlo, dovremo assegnare un certo valore all’attributo font-family. Una regola del tipo p { font-family: "Times New Roman"; } , ad esempio, imposterà il font “Times New Roman” per tutti i paragrafi del libro. Il suo uso di base è dunque molto semplice: come valore di font-family dovremo scrivere il nome del font da utilizzare. Se il nome è composto da una sola parola, lo scriveremo senza virgolette, ad esempio font-family: Arial; Se invece il nome è composto da più parole, le dovremo racchiudere tra virgolette, come visto poco sopra col font “Times New Roman”. È importante scrivere il nome esatto del font, controllando anche le eventuali maiuscole, altrimenti il dispositivo di lettura non interpreterà correttamente la proprietà. Impostare un solo tipo di font è semplice, ma presenta un inconveniente: se il dispositivo di lettura non dispone di quel font, utilizzerà al suo posto il font di default, che è variabile per ogni dispositivo ma che, molto probabilmente, è parecchio diverso da ciò che volevate voi. Come prima soluzione al problema, possiamo specificare più tipi di font, uno dopo l’altro: al momento del caricamento, il dispositivo di lettura li proverà uno alla volta, fermandosi quando troverà un font in suo possesso. In altri termini, la regola p { font-family: Arial, Helvetica, sans-serif; } darà al dispositivo di lettura una istruzione di questo tipo: “Per il testo contenuto in un tag , usa il font Arial. Se non hai il font Arial, usa il font Helvetica. Se non hai neppure quello, usa un qualsiasi font di tipo sans-serif.” Per scrivere una proprietà, che i vari tipi di font, il procedimento è molto semplice: scegliamo una serie di font di nostro gradimento; assegniamoli in ordine di preferenza all’attributo font-family, separandoli con una virgola; per ordinarli, partiamo dal font che preferiamo e procediamo poi con le riserve, sempre in ordine di gradimento (da quella che ci piace di più a quella che ci piace di meno); come ultimo valore, inseriamo il tipo più generico possibile, ossia serif, sansserif o monospace. I termini serif, sans-serif e monospace rappresentano di fatto la nostra ultima spiaggia, in materia di font. Questi termini indicano le tre famiglie fondamentali di font e un rappresentante per ciascuna di esse è presente in ogni tipo di lettore (o almeno, dovrebbe essere presente): è un modo molto gentile per dire “se non hai proprio niente che mi piaccia, almeno scegline uno che sia vagamente simile”. Serif: font di questo tipo presentano piccoli “piedi” alla base dei caratteri e sono considerati più adatti per testi lunghi e continui (il contenuti di un capitolo, ad esempio). Il più celebre esponente è il Times New Roman. Sans-serif: font di questo tipo sono netti, squadrati e privi di appendici alla base dei caratteri. Li troviamo di solito usati per i titoli e il loro esponente più celebre è probabilmente lo Arial. Monospace: nei font di questo tipo, i caratteri occupano tutti la stessa larghezza, in uno stile che ricorda molto le vecchie macchine da scrivere. Il più celebre esponente è il Courier. Per dare una idea più precisa di come funzioni font-family, quando è usato con più font, elencherò di seguito alcune possibili combinazioni, a titolo di esempio: font-family: Georgia, "Times New Roman", Times, serif; font-family: Baskerville, "Palatino Linotype", Times, serif; font-family: "Hoefler Text", Garamond, Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Geneva, Arial, Helvetica, sans-serif; font-family: Tahoma, "Lucida Grande", Arial, sans-serif; font-family: "Courier New", Courier, monospace; font-family: "Lucida Console", Monaco, monospace; E si potrebbe continuare a volontà, ma non lo farò. Di solito, sono indicate tre o quattro alternative, tra cui il dispositivo di lettura può scegliere, ma possiamo anche indicarne di più o di meno, se proprio lo vogliamo. Se poi abbiamo deciso di utilizzare un font molto diffuso, come Times New Roman o Arial, allora possiamo anche limitarci a indicare quel font, più la famiglia a cui appartiene (serif o sans-serif), dato che questi due font sono presenti quasi ovunque. 7-2 Incorporare un font Se vogliamo utilizzare un tipo di font poco diffuso, oppure se abbiamo ragione di credere che il nostro font preferito non sia presente sui vari dispositivi, o anche se vogliamo solo essere sicuri che il nostro libro utilizzi un certo font, invece di limitarci a confidare nei font a disposizione di un certo dispositivo, allora possiamo incorporare quel determinato font nel nostro e-book. Detta in altri termini, possiamo aggiungere al nostro e-book i files, che contengono il font da noi scelto, proprio come aggiungeremmo una immagine o un file audio. Se avviamo il programma Sigil, possiamo vedere che, tra le cartelle generate per un EPUB, ce n’è anche una dal nome “Fonts”: come è facile da immaginare, quella cartella è destinata a contenere i font che vogliamo aggiungere al nostro ebook. Ripeto, non è necessario aggiungere un font: i più comuni sono disponibili su quasi tutti i dispositivi di lettura. Se però utilizzate un font poco diffuso, o se volete avere la certezza che il testo del vostro libro sarà riprodotto utilizzando quel font e non un altro, allora incorporarlo è la soluzione migliore. Per incorporare un font, la prima operazione da svolgere è aggiungere allo ebook il file (o i files) contenente il nostro font. Come dicevo in apertura, un font è costituito da uno o più files: in linea di massima, avremo un file per ogni stile in cui il font è disponibile (normale, corsivo, grassetto, corsivo + grassetto). Se quel font sarà utilizzato soltanto per testo normale, sarà sufficiente aggiungere il file di base; se lo emo anche per testo in corsivo, dovremo aggiungere il file per il corsivo, e così via. Per distinguere tra loro i vari tipi di files, in genere è sufficiente guardare il nome del file stesso, che sarà composto dal nome del font, più lo stile del font: avremo pertanto uno Arial Normale, uno Arial Corsivo, e così via. A volte, il nome sarà in inglese, nel qual caso avremo Regular, Bold, Italic e BoldItalic, come stili disponibili. Per incorporare un font in uno EPUB, apriamo dunque il nostro EPUB con Sigil. Clicchiamo col tasto destro sulla cartella Fonts, scegliamo “Aggiungi File Esistente” e cerchiamo nel nostro computer il file da aggiungere. Un file di font, almeno nei sistemi operativi Windows e Linux, è molto spesso un file con estensione TTF o OTF; di solito questi files sono raccolti in una cartella di nome Font, da qualche parte nel vostro disco fisso, ma la sua collocazione esatta dipende dal sistema operativo, dal modello e anche da come potreste aver deciso di modificarlo voi. A titolo di esempio, in un sistema operativo Windows la collocazione standard dei fonts è in una cartella di nome Fonts, dentro la cartella Windows del disco C. Dopo aver selezionato il file, o i files, da aggiungere, dovremo descrivere nel nostro foglio di stile il modo in cui trovarli e utilizzarli. Ipotizziamo dunque di voler incorporare nel nostro e-book un font, contenuto nel file “Esempio.otf” (OTF è una delle estensioni, che caratterizzano un file di font). Dopo aver aggiunto alla cartella Fonts il file “Esempio.otf”, all’inizio del nostro foglio di stile scriveremo la seguente regola: @font-face { font-family: Esempio; font-weight: normal; font-style: normal; src: url(../Fonts/Esempio.otf); } In questa regola compaiono alcuni attributi, che non abbiamo ancora esaminato, ma la possiamo interpretare e tradurre in italiano nel seguente modo. La direttiva @font-face serve a indicare al dispositivo di lettura sia il nome che assegneremo al font, sia le sue caratteristiche fondamentali, sia infine il luogo in cui trovarlo. Di conseguenza, con l’attributo “font-family” assegniamo un nome al font; questo nome ci servirà più avanti, quando indicheremo il font da utilizzare nel documento. L’attributo “src” serve a indicare il percorso per raggiungere il file: quei due puntini iniziali non sono lì per bellezza, ma fanno parte del percorso e devono essere aggiunti. Gli altri due attributi, font-weight e font-style, sono opzionali e servono nel caso dobbiamo specificare un carattere da utilizzare solo col grassetto, oppure solo col corsivo. Riassumendo, questa regola dice: crea un font di nome “Esempio”, che sarà utilizzati con testo normale, e che puoi trovare nel file “Esempio.otf” nella cartella “Fonts”. Dovremo ripetere questa operazione per ogni stile in cui il font incorporato dovrà essere utilizzato. In altri termini, avremo una serie di regole quasi uguali, del tipo @font-face { font-family: Esempio; font-weight: normal; font-style: normal; src: url(../Fonts/Esempio.otf); } @font-face { font-family: Esempio; font-weight: bold; font-style: normal; src: url(../Fonts/EsempioBold.otf); } @font-face { font-family: Esempio; font-weight: normal; font-style: italic; src: url(../Fonts/EsempioItalic.otf); } @font-face { font-family: Esempio; font-weight: bold; font-style: italic; src: url(../Fonts/EsempioBoldItalic.otf); } In questo modo, per il font “Esempio” avremo creato tutte e quattro le varianti fondamentali e le potremo utilizzare a nostro piacimento nel libro. Come potete vedere, nelle quattro regole il nome del font rimane sempre lo stesso, ossia Esempio, ma cambiano sia i valori di font-weight e font-style, sia l’indirizzo in cui si trova il file, dato che ogni stile di font è contenuto in un file diverso. Può essere una operazione poco divertente da svolgere, ma è necessaria, se vogliamo incorporare un font. A questo punto, il resto è molto semplice. Potremo usare il nostro font Esempio nello stesso modo in cui utilizziamo un qualsiasi altro font, ossia come valore di un attributo font-family. Ad esempio, se vogliamo che questo font sia utilizzato per il testo contenuto in un tag, scriveremo la regola p { font-family: Esempio, serif; } Il lavoro di preparazione può essere lungo e noioso, soprattutto se vogliamo incorporare parecchi font; una volta concluso, però, il nostro font incorporato funzionerà come qualsiasi altro tipo di font, con la sola differenza che, anziché cercare nella propria limitata scorta di font, il dispositivo di lettura lo pescherà direttamente dalla cartella in cui lo avremo inserito (la cartella Fonts del nostro e-book, di solito). Lavorando a un sito Web, avremmo a disposizione anche un altro sistema per incorporare un font, ossia ricorrere a un WebFont, ma è una soluzione che sconsiglio, quando si tratta di uno e-book. Un WebFont è un font che, anziché essere inserito nel sito, è collocato in un deposito da qualche altra parte nel Web: caricando il sito, il nostro browser pescherà quel font da suo deposito e lo à per rendere il testo. Soluzione ottima, per un sito, dato che dobbiamo comunque collegarci alla rete, per visitarlo, ma decisamente non buona per uno e-book, che in teoria dovremmo poter leggere anche in assenza di connessioni. A ogni modo, l’unica differenza concreta tra un font incorporato e un WebFont è che, nel caso del WebFont, il valore di url() sarà l’indirizzo web a cui è possibile trovare il font, invece che la posizione della cartella in cui il font è stato caricato. 7-3 Colorare il testo Ancora una volta tornerò a parlare della colorazione, applicata qui a un altro elemento: il testo. Le regole per indicare il colore non sono diverse da quelle che abbiamo già visto a proposito dello sfondo di un elemento, oppure dei bordi di un elemento: abbiamo sempre un attributo, in questo caso color:, a cui dovremo assegnare un valore, ossia un colore espresso in una delle solite forme. Per impostare il colore, con cui sarà riprodotto il testo dei paragrafi, emo una regola del tipo p { color: blue; } , che colorerà di blu tutto il testo di tutti i paragrafi. Come al solito, il colore può essere indicato con il rispettivo nome in inglese; con un codice esadecimale; con le dosi di rosso, verde e blu necessarie, per miscelare il nostro colore. Di conseguenza, a titolo di esempio questi sono i vari modi, in cui possiamo indicare il colore blu per il testo: color: blue; color: #0000FF; color: rgb(0, 0, 255); color: rgb(0, 0, 100%); color: rgba(0, 0, 100%, 1); Qualunque forma noi scegliamo, il risultato sarà sempre lo stesso: il testo a cui assegneremo questa proprietà sarà colorato di blu. Ovviamente, il fatto che noi indichiamo un certo colore non implica necessariamente che il dispositivo di lettura, poi, colorerà il testo nel modo da noi indicato: non tutti i colori saranno disponibili ovunque e non tutti i dispositivi di lettura accettano i colori. Dovremo semrpe testare il nostro e-book sul caompo, per poter conoscere il risultato effettivo di questa proprietà. 7-4 Cambiare dimensione al font Tornando a discutere dei nostri amati font, vediamo adesso come sia possibile impostarne o modificarne le dimensioni attraverso il CSS. Il carattere del testo ha già una dimensione di base, nei browsers e nella maggior parte dei dispositivi, e questa dimensione di base è pari a 16 pixel; allo stesso modo, la serie di tag daa , ha già impostate dimensioni variabili del carattere, per riflettere il livello di importanza di quel titolo. In ogni caso, tutte queste impostazioni possono essere modificate a nostro piacimento, nel foglio di stile. L’attributo che ci interessa, per stabilire la dimensione del font, è font-size, che abbiamo già visto in almeno un esempio in precedenza. Una regola del tipo p { font-size: 14px; } cambierà la dimensione del font in tutti i paragrafi, portandola a 14 pixel. Come per molte proprietà già viste, anche in questo caso le unità di misura che possiamo utilizzare per i valori sono tre: il pixel, la percentuale e lo em. Nel caso dei pixel, il numero che indichiamo è anche il numero che otteniamo: un testo di 16px sarà sempre di 16 pixel, mentre un testo di 30px sarà sempre di 30 pixel. Nel caso di percentuali ed em, invece, il discorso si fa più complesso. La percentuale funziona impostando le dimensioni del carattere, in proporzione alle dimensioni che il carattere possedeva in precedenza. Il che, detto così, potrebbe suonare piuttosto confuso. Vediamo dunque di spezzarlo in piccole regole, più facili da comprendere. In partenza, prima di applicare qualsiasi modifica col CSS, il testo ha una dimensione base di 16 pixel: una proprietà font-size: 100%; significa dunque che il carattere dovrà essere il 100% di questa dimensione base: in altri termini, rimarrà 16 pixel. Se noi decidiamo di modificare il testo di un elemento, con una proprietà font-size: 75%; , il testo di quell’elemento avrà una dimensione pari al 75% della dimensione precedente, ossia al 75% di 16 pixel, che corrisponde a 12 pixel. Se poi modifichiamo la dimensione del testo, per un elemento che si trova all’interno di quell’elemento, la nuova dimensione del testo sarà calcolata in percentuale, sulla base del valore che aveva nel secondo caso, ossia 12 pixel. E così via. In altri termini, all’inizio il testo è di 16 pixel. body { font-size: 90%; } La dimensione del testo è adesso pari al 90% di 16 pixel. p { font-size: 80%; } La dimensione del testo è adesso pari all’80% del 90% di 16 pixel. E così via. Usare le percentuali può diventare parecchio complicato, se il nostro foglio di stile si ramifica troppo. La stessa cosa accade quando utilizziamo gli em. Di base, 1em corrisponde alla dimensione del carattere usato nel testo (16 pixel, come è sempre il valore di partenza). Ogni volta che lo modifichiamo, però, il valore di 1em cambierà di conseguenza, proprio come abbiamo visto con le percentuali. Per farla breve, il pixel è l’unità di misura più semplice da utilizzare, perché è indipendente dal valore assegnato agli altri elementi. Percentuali ed em, invece, dipendono dal valore assegnato agli elementi che si trovano più in alto nell’albero genealogico della pagina. 7-5 Gli stili del font Procedendo con la nostra analisi, vediamo adesso come assegnare a un testo un determinato stile, che di fatto significa rendere il font in grassetto, in corsivo o entrambi. Sono possibili anche altri tipi di decorazioni, da un certo punto di vista, e li vedremo nel corso di questa sezione, anche se è molto probabile che le troverete deludenti: il concetto di decorazione, posseduto da chi ha redatto lo standard del CSS, potrebbe essere alquanto diverso da quello di una persona comune. Ma non divaghiamo. font-style L’attributo font-style ci permette di assegnare o rimuovere lo stile corsivo al testo. Di base, tutto il testo contenuto in un tag <em> o in un tag è reso in corsivo, ma possiamo modificare questo stato a nostro piacimento, sia rendendo corsivo il testo contenuto in altri tag, sia rendendo in forma piana il testo contenuto nei tag corsivi. Perché mai dovremmo desiderare di fare una cosa simile, ovviamente, è un altro discorso, ma lo possiamo fare. Una proprietà del tipo font-style: italic; , dunque, renderà il testo in corsivo, mentre una proprietà del tipo font-style: normal; annullerà il corsivo, rendendo il testo in forma piana. Questi sono gli unici due valori che possiamo assegnare all’attributo font-style. Come nota a margine, li abbiamo già visti quando parlavamo dei font incorporati, come strumento per indicare se un dato font fosse in stile corsivo, oppure normale. Tecnicamente, esiste anche un terzo valore che possiamo assegnare a questa proprietà, ossia oblique, ma non ricordo di averlo mai visto usato in vita mia, almeno non negli ultimi dieci anni. Se volete essere originali, però, nulla vi vieta di scrivere font-style: oblique; per impostare lo stile corsivo in una determinata porzione di testo. Il risultato sarà comunque identico a quello che otterreste usando il valore italic. font-weight L’attributo font-weight funziona come il precedente, ma in questo caso ci permette di assegnare o rimuovere la forma in grassetto. Di base, tutto il testo contenuto in un tag , <strong>, oppure in uno dei tag per i titoli (da a) è reso in grassetto, ma possiamo assegnare questa forma anche ad altro testo, oppure rimuovere il grassetto da uno di questi tag. Di conseguenza, scrivere font-weight: bold; renderà il testo in grassetto, mentre scrivere font-weight: normal; rimuoverà il grassetto, rendendo il testo in forma normale. Proprio come abbiamo visto per font-style, anche per font-weight questi sono gli unici due valori che abbia senso utilizzare: bold e normal. Sempre in teoria, è anche possibile esprimere il livello di grassetto mediante un valore numerico, compreso tra 100 e 900 (valgono solo le centinaia: possiamo usare 300 o 500, ma non 304 o 476), dove 900 corrisponde a un grassetto estremamente marcato, mentre 100 è un grassetto che si nota appena. In teoria, appunto. In pratica, questo funzionerà soltanto se abbiamo un font con 9 forme diverse di grassetto, il che è molto improbabile, a meno che non abbiate un font progettato su misura. Manteniamoci dunque sui valori bold e normal e non avremo problemi. text-transform Questa è un attributo che ci permette di modificare il testo di un elemento, rendendolo interamente maiuscolo, interamente minuscolo, oppure rendendo maiuscola soltanto la prima lettera di ogni parola. Di fatto, è improbabile che ci capiterà di utilizzarlo al di fuori di un titolo, anche se talvolta potremmo volerlo usare per la prima riga di un paragrafo, ma è sempre utile conoscerne l’esistenza. I valori possibili per questo attributo sono quattro: uppercase, lowercase, capitalize, none. Il loro significato dovrebbe essere abbastanza semplice da intuire, a ogni modo uppercase rende il testo in maiuscolo, lowercase lo rende in minuscolo, capitalize rende maiuscola soltanto la prima lettera di ogni parola e none annulla questa proprietà. Di conseguenza, le combinazioni possibili sono: text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; text-transform: none; In particolare, la proprietà text-transform: none; ci servirà soltanto quando (e se) vorremo annullare, per un tag discendente, una delle altre tre proprietà assegnate a un tag antenato. font-variant Questo è un attributo estremamente specifico, che di fatto serve solo a rendere un testo in maiuscoletto. Scrivendo font-variant: small-caps; otterremo un testo in lettere maiuscole, ma di piccole dimensioni: il maiuscoletto, per l’appunto, che può essere usato per aggiungere una certa enfasi ad alcune parole, ma soprattutto per le sigle. Questo è un esempio di maiuscoletto, a titolo informativo. Se siete la Morte del Mondo Disco, lo ete parecchio; in tutti gli altri casi, sarà molto raro trovarne un’applicazione pratica. Di fatto, un uso tipico di questo attributo sarà in combinazione con una classe, assegnata a un tag <span>, per racchiudere una o più parole che dovranno essere rese in maiuscoletto: sigle e poco altro. text-decoration Se vi aspettate che questo attributo aggiunga chissà quale effetto grafico al vostro testo, rendendolo affascinante al di là di ogni umana comprensione, allora preparatevi a una doccia fredda. Nonostante il nome, è un attributo che non possiede alcunché di decorativo, a meno che il vostro senso estetico non sia stato asportato chirurgicamente alla nascita, nel qual caso potreste anche trovarlo decorativo. Di fatto, l’attributo text-decoration aggiunge al testo alcuni elementi extra, più che altro linee in varie posizioni. Può anche essere utilizzato per riprodurre quel fastidiosissimo testo lampeggiante, che fa molto web anni ’90, ma è improbabile che un dispositivo di lettura per e-book ve lo farà are. Fortunatamente. È anche improbabile che avrete mai voglia di utilizzarlo in un libro normale, ma questo è un altro discorso. I valori possibili per questo attributo sono cinque: underline, overline, linethrough, blink, none. A parte none, per ovvie ragioni, gli altri valori possono essere combinati, se proprio lo vogliamo. Con underline sarà tracciata una linea orizzontale sotto al testo (sì, è così che sono tracciate le linee sotto ai link), overline traccerà una linea al di sopra del testo, line-through la traccerà attraverso il testo, blink renderà il testo lampeggiane e none annullerà ogni eventuale decorazione applicata a un testo. Se vogliamo che i link nel nostro e-book non siano sottolineati, come invece accade normalmente, dovremo impostare una regola del tipo a { text-decoration: none; } , che rimuoverà la sottolineatura da tutti i tag , ossia da tutti i link. Di fatto, questo è probabilmente l’unico caso in cui vi troverete a utilizzare questo attributo: per togliere la sottolineatura dai link, se deciderete così. Se desiderate utilizzarlo per aggiungere un sottolineatura (o una sopralineatura) al testo, considerate anche l’opzione di ricorrere a un attributo borded-top o borderbottom, per ottenere lo stesso risultato, ma con una maggiore versatilità: con border potrete scegliere sia lo stile della linea, sia il suo spessore, sia il suo colore. letter-spacing e word-spacing Questi due attributi ci permettono di impostare lo spazio tra le lettere (letterspacing) o tra le parole (word-spacing) in una porzione di testo: più precisamente, letter-spacing ci permette di aumentare o ridurre lo spazio tra una lettera e la successiva all’interno di una parola, senza variare però lo spazio tra una parola e l’altra, mentre word-spacing ci permette di aumentare o diminuire lo spazio tra una parola e la successiva, senza variare però lo spazio tra le lettere all’interno di una parola. Il valore che assegneremo a entrambi questi attributi sarà un numero, accompagnato da una unità di misura (le solite, px o em): un numero positivo aumenterà lo spazio del valore corrispondente, un numero negativo lo ridurrà. Di conseguenza, letter-spacing: 2px; aumenterà lo spazio tra le lettere di 2 pixel, mentre letter-spacing: -1px; ridurrà di 1 pixel lo spazio tra le lettere. word-spacing: 1em; aumenterà di 1 em lo spazio tra una parola e l’altra, mentre word-spacing: -.5em; ridurrà di mezzo em lo spazio tra una parola e l’altra. Se stiamo lavorando a una raccolta di poesie futuriste, è probabile che ci troveremo spesso a utilizzare questi attributi; in altri casi, invece, è probabile che ne avremo bisogno (ammesso che ne avremo bisogno) soltanto per rendere più o meno arieggiati i titoli. 7-6 Text-shadow Dopo questo excursus su attributi più o meno decorativi, chiuderò con qualcosa che può davvero essere considerato decorativo: l’attributo text-shadow. Questo attributo ha lo stesso funzionamento di box-shadow, che abbiamo già visto, ma con una differenza: box-shadow si applica a blocchi di testo, come interi paragrafi o intere pagine, mentre text-shadow si applica a parole o lettere. In altri termini, con questo attributo possiamo far proiettare un’ombra alle varie lettere delle parole che compongono un testo. Ammesso che il dispositivo di lettura lo i già, il che non è certo e va testato sul campo. Di base, questo attributo richiede quattro valori: allineamento orizzontale dell’ombra; allineamento verticale dell’ombra; sfocatura dell’ombra; colore dell’ombra. Il primo valore ci dice di quanto sarà spostata in orizzontale la nostra ombra, rispetto alla lettera che la proietta: un numero positivo la proietterà verso destra, un numero negativo verso sinistra. Il secondo valore ci dice di quanto sarà spostata in verticale la nostra ombra, rispetto alla lettera che la proietta: un numero positivo la proietterà verso il basso, un numero negativo verso l’alto. Il terzo valore ci dirà quanto debba essere sfocata l’ombra: un valore di 0 la renderà estremamente netta, un numero superiore la renderà proporzionalmente più sfocata. Infine, il quarto valore indicherà il colore da utilizzare per la nostra ombra, espresso secondo le solite regole dei colori. Ad esempio, la proprietà text-shadow: -4px 4px 3px #999999; disegnerà un’ombra spostata di 4 pixel a sinistra della parola, di 4 pixel verso il basso, un poco sfocata e di colore grigio scuro. Ogni lettera del testo avrà una propria ombra, che seguirà questa regola. Un fantastico esempio di testo ombreggiato: mai più senza. Se lo vedete senza ombra, significa che il vostro dispositivo di lettura non a questa proprietà. Se proprio vogliamo, possiamo anche assegnare due ombre a uno stesso testo: in questo caso, prima di tutto elencheremo i quattro valori per la prima ombra, poi inseriremo una virgola ed elencheremo i quattro valori per la seconda ombra. Ad esempio, text-shadow: -4px 4px 3px #666666, 1px -1px 2px #000000; proietterà due ombre: la prima è orientata verso sinistra e verso il basso, la seconda è orientata verso destra e verso l’alto. Se vogliamo assegnare tre ombre, il principio è lo stesso. In breve, possiamo assegnare tante ombre quante ne vogliamo, purché ogni set di quattro valori sia separato con una virgola dal set successivo. Non so in quali circostanze potreste desiderare di inserire una sfilza di ombre a un testo, in un normale libro, ma ancora non esistono leggi che vi vietino di farlo. 8 Liste e tabelle Concluderò il mio viaggio nel magico mondo della impaginazione degli e-books, parlando di un caso più specifico, ma non per questo meno utile: come modificare liste e tabelle. Se state lavorando a un normale testo di prosa, è molto probabile che questo capitolo non vi servirà mai; nel caso di guide, manuali o testi scientifici, invece, liste e tabelle saranno ospiti molto più frequenti nel vostro testo e potrebbe essere utile sapere come trattarle. In ogni caso, vedremo adesso come realizzare e modificare, a nostro piacimento, le liste e le tabelle in uno EPUB. 8-1 Modificare le liste Come probabilmente saprete (o almeno me lo auguro), esistono due tipi di lista, in HTML: la lista ordinata e la lista non ordinata. La lista ordinata è contenuta in un tag ed è una lista in cui ogni elemento è introdotto da un numero progressivo; la lista non ordinata è contenuta in un tag ed è una lista in cui ogni elemento è introdotto da un simbolo grafico (di solito un pallino). Gli elementi di una lista, invece, sono contenuti ciascuno in un tag . Di conseguenza, questo è un esempio di lista ordinata Primo elemento Secondo elemento Terzo elemento Quarto elemento , che darà il seguente risultato: Primo elemento Secondo elemento Terzo elemento Quarto elemento E questo è un esempio di lista non ordinata Primo elemento Secondo elemento Terzo elemento Quarto elemento , che darà invece il seguente risultato: Primo elemento Secondo elemento Terzo elemento Quarto elemento Praticamente uguali, a parte il tag che le contiene: cambia però il modo in cui saranno riprodotte sullo schermo. La quasi totalità dei dispositivi, come impostazione di base, precederà ogni voce di una lista ordinata con un numero e ogni voce di una lista non ordinata con un pallino. In alcuni casi, una soluzione di questo tipo può andarci bene; in altri casi, però, potremmo desiderare qualcosa di più bello per le nostre liste, qualcosa che colpisca maggiormente l’occhio del lettore. Vediamo dunque quali proprietà si possano modificare, usando il CSS. Il primo attributo che ci interessa è list-style-type. Per le liste non ordinate, ossia il tag , abbiamo tre possibili valori da assegnare a questo attributo: disc, che mostrerà uno normale pallino pieno; round, che mostrerà un pallino vuoto; square, che mostrerà un quadrato pieno. Per le liste ordinate, ossia il tag , abbiamo invece sei possibili valori di base: decimal, che corrisponde a una normale numerazione da 1 in poi; decimal-leading-zero, che corrisponde a una normale numerazione, ma con uno 0 che precede ogni numero (da 01 in poi, insomma); upper-alpha, che corrisponde a una numerazione alfabetica, a lettere maiuscole (da A in poi); lower-alpha, che corrisponde a una numerazione alfabetica, a lettere minuscole (da a in poi); upper-roman, che corrisponde a una numerazione in numeri romani maiuscoli (da I in poi); lower-roman, che corrisponde a una numerazione in numeri romani minuscoli (da i in poi). Esistono poi altre varianti locali, che permettono ad esempio di utilizzare le lettere dell’alfabeto greco o di alfabeti non latini: ne potete trovare una lista a questa pagina: developer.mozilla.org/en-US/docs/CSS/list-style-type Questa proprietà può essere assegnata sia all’intera lista, ossia ai tag e , sia a singole voci di una lista (cioè a singoli tag , mediante classi di stile). Inoltre, se vogliamo nascondere questi elementi grafici, possiamo utilizzare la proprietà list-style-type: none; , che nasconderà pallini, numeri e quanto altro. Un secondo attributo, che possiamo voler modificare, è list-style-position, che determina il collocamento della decorazione, rispetto alle varie voci della lista. Assegnando una particolare classe di stile al tag e modificando il valore di padding-left, possiamo variare la distanza tra il simbolo (pallino, numero o altro) e la voce della lista; list-style-position ci facilita almeno in parte il lavoro, permettendoci di stabilire se il simbolo dovrà essere esterno o interno alla voce della lista. I valori a nostra disposizione, per questo attributo, sono due: outside, che posiziona il simbolo all’esterno della voce, come se appartenessero a due colonne diverse (lo stile di base di ogni browser); inside, che posiziona il simbolo all’interno della voce, come se fossero su una stessa colonna. Probabilmente non sarà un grande aiuto, ma per aggiustamenti più precisi bisognerà utilizzare i valori di margin-left e padding-left, come in parte dicevo. Se volete, ad esempio, azzerare il rientro che ogni dispositivo pone accanto agli elementi di una lista, dovrete azzerare sia margin-left che padding-left per i tag e . Infine, la proprietà list-style-image ci permette di mandare al diavolo pallini, numeri o altro, per sostituirli con una immagine a nostra scelta. Il suo funzionamento è simile a quello di background-image, in quanto ci richiede di specificare, come attributo, la posizione in cui si trova l’immagine da utilizzare. Ad esempio, se vogliamo utilizzare l’immagine “Lista.jpg”, collocata nella cartella Images, dovremo scrivere list-style-image: url(../Images/Lista.jpg); e assegnare questa proprietà a un tag : in pratica, costruiremo una lista non ordinata, usando però i simbolo da noi scelti, invece di cerchi o quadrati. Questa proprietà, però, non ci permetterà di esercitare un grande controllo sulla posizione dei simboli, per cui dovremo procedere per tentativi, se la vogliamo utilizzare. 8-2 Modificare le tabelle Le tabelle hanno avuto una vita curiosamente complicata, nel mondo dello HTML. Nate come puro e semplice strumento per organizzare i dati, alla fine degli anni ’90 hanno conosciuto una diffusione abnorme, come strumento per impaginare i siti web: le pagine erano strutturate come tabelle, dove i vari elementi prendevano il posto dei dati, e non di rado trovavamo tabelle all’interno di tabelle, in un sistema a scatole cinesi che pareva progettato da Escher dopo una pesante sbronza. Oggi, grazie anche alla introduzione del CSS, come strumento principe per la impaginazione, le tabelle sono tornate al proprio ruolo naturale, ossia di spazio in cui ordinare i dati. È in questa forma che ne discuterò, nella presente sezione. In HTML, e in XHTML, una tabella è racchiusa dai tag e , che segnano l’inizio e la fine degli elementi da includere nella tabella: ciò che si trova nel mezzo, invece, è alquanto variegato e dipende da un discreto numero di altri tag, in parte obbligatori e in parte opzionali. Ad esempio, questa è la struttura di una tabella con tutti gli annessi e connessi: Esempio di tabella. Primo Secondo Terzo 1-1 1-2 1-3 2-1 2-2 2-3 Otterremo questo risultato, con un poco di CSS: Primo Secondo Terzo 1-1 1-2 1-3 2-1 2-2 2-3 Non tutti questi tag sono strettamente necessari: per una semplice tabella, senza tante pretese, possiamo accontentarci di utilizzare i tag , che delimitano le righe di una tabella, e i tag , che delimitano le celle all’interno di una riga. A ogni modo, diamo una rapida occhiata ai vari tag, giusto per farci una idea delle rispettive funzioni: per un’analisi più accurata, vi rimando a un qualsiasi manuale di HTML. racchiude una eventuale descrizione della tabella, che possiamo sistemare in alto o in basso rispetto alla tabella stessa. Per deciderne la posizione, assegneremo a questo tag una proprietà align: top; (se lo vogliamo al di sopra della tabella), oppure align: bottom; (se lo vogliamo al di sotto della tabella). è un tag che possiamo utilizzare, per assegnare a ogni colonna della tabella una classe di stile diversa, cosa che può tornare molto utile se, ad esempio, vogliamo assegnare a ogni colonna una larghezza su misura. In questo caso, all’interno del tag inseriremo tanti tag quante sono le colonne della tabella: a ogni tag , poi, assegneremo una classe di stile. è il tag che racchiude la testa della colonna, ossia quella riga in cui sono indicati i nomi delle varie colonne: spesso ma non necessariamente è in un colore diverso, rispetto al corpo della tabella, e di norma ci dice cosa siano i dati contenuti nelle rispettive colonne. è il tag che racchiude il corpo della tabella, ossia i dati veri e propri. è il tag che delimita una riga della colonna: di norma, ne troveremo uno all’interno del tag e un numero variabile all’interno del tag (un tag per ogni riga da cui la nostra tabella sarà composta). rappresenta i vari rettangoli, da cui una riga di tabella è composta (le celle): è usato solo nel tag . Se una tabella ha cinque colonne, nel tag troveremo 5 tag , all’interno di in un tag . rappresenta i vari rettangoli, da cui una riga di tabella è composta (di nuovo, le celle): è identico a , ma è usato nel tag . Se una tabella ha cinque colonne, nel tag troveremo 5 tag per ogni tag che abbiamo. Dopo questo breve esame dei tag che compongono una tabella, vediamo come sia possibile lavorare sulla tabella stessa, usando il CSS. In linea generale, non troveremo molte nuove proprietà, specifiche per le tabelle, ma vedremo come applicare a una tabella le proprietà discusse nei capitoli precedenti. Proprietà come il colore del testo, il tipo di font, eccetera, possono essere applicate normalmente e non necessitano di spiegazioni particolari; altre proprietà, come i margini o l’allineamento del testo, necessitano invece di qualche riga di spiegazione. Procediamo dunque col lavoro. Prima di tutto, il bordo. Possiamo circondare la nostra tabella con un bordo definito, proprio come lo possiamo fare per ogni altro elemento: in questo caso, assegneremo una proprietà border al tag , per rinchiudere la tabella intera, ma anche ai tag , e , per disegnare un bordo anche attorno ai vari pezzi di tabella. Aggiungere i bordi, però, potrebbe causare spiacevoli effetti collaterali, sul piano grafico: i bordi confinanti potrebbero sovrapporsi, oppure potrebbero rimanere buchi tra le varie celle di una tabella. Abbiamo due soluzioni a questo. La proprietà border-spacing permette di definire lo spazio da lasciare tra una cella e l’altra. Se non vogliamo che ci siano spazi, basterà assegnare un valore pari a zero border-spacing: 0; e gli spazi tra le celle saranno eliminati. Se invece vogliamo uno spazio tra le celle, al posto dello zero assegneremo un valore numerico, corrispondente alla dimensione dello spazio ed espresso in una delle solite unità di misura. Ad esempio, border-spacing: 3px; lascerà uno spazio di 3 pixel tra ogni cella della nostra tabella. La proprietà border-collapse è opposta a border-spacing: assegnandola a una tabella, i bordi di elementi confinanti collasseranno, trasformandosi in un bordo solo. Se assegniamo border-collapse, dunque, qualsiasi valore potremmo aver assegnato a border-spacing non avrà effetto. I possibili valori di border-collapse sono due: separate e collapse. Tra questi due valori, border-collapse: separate; è la norma per ogni tabella, per cui non è necessario specificarlo: i bordi saranno separati. Invece, impostare la proprietà border-collapse: collapse; ci permetterà di far collassare assieme i bordi, per gli elementi di una tabella a cui lo assegneremo. Di norma, tanto border-spacing quanto border-collapse sono assegnati al tag , ma si escludono a vicenda: o assegnate uno, oppure assegnate l’altro. Sempre al tag Related Documents Guida Al Css Per Ebook September 2021 0 Guida Per App Smartiptv.pdf December 2019 37 Satiro, Guida Al Mago December 2019 35 Guida Al Portale Produttori December 2019 18 Guida Al Twitter Marketing October 2021 0 Yoga - Piccola Guida Per Conoscerlo October 2021 0 More Documents from "Margarete Geddes" Bianca's Guide To Raising Twins: Pregnancy July 2020 0 Angelo Custode October 2021 0 September 2021 0 L'angelo E L'edera September 2021 0 In The Shadow Of Deimos: A Terraforming Mars Novel September 2021 0 The Cyclist September 2021 0 Our Company 2008 Columbia Road Wrangle Hill, DE 19720 +302-836-3880 [email protected] Quick Links About Help / FAQ Legal of Service Cookie Policy Disclaimer Follow Us Mobile Apps Copyright © 2025 IDOUB. possiamo assegnare una proprietà margin, se vogliamo controllare la distanza tra la tabella e il testo precedente o successivo: funziona come qualsiasi altro elemento, in questo senso. Più interessante, invece è il metodo per controllare l’ampiezza delle celle e la posizione dei dati contenuti nelle suddette celle. Per determinare la quantità di spazio vuoto tra il bordo di una cella e il suo contenuto, dovremo impostare la corrispondente proprietà padding per i tag e : il tag per il corpo della tabella e il tag per la sua intestazione. Ad esempio, la regola td { padding: 5px 10px; } assegnerà a tutti i tag un margine interno superiore e inferiore di 5 pixel, mentre il margine interno destro e sinistro sarà di 10 pixel: questi margini interni saranno posizionati tra il bordo della cella e il suo contenuto. Abbiamo già visto come funzioni questo attributo in un capitolo precedente, per cui non mi dilungherò qui. Per posizionare il contenuto di una cella, invece, le proprietà che ci interessano sono text-align e vertical-align: la prima la conosciamo già e ci permette di determinare se il contenuto delle celle sarà allineato a destra, a sinistra o al centro, mentre la seconda proprietà, vertical-align, ci è nuova e merita pertanto qualche parola in più. Normalmente, i dispositivi di lettura allineano il contenuto di una cella al suo centro, sul piano verticale, a prescindere da quanto spazio ci sia in alto o in basso. Se questa soluzione non ci va bene e vogliamo che il contenuto delle celle sia in una posizione diversa, ossia più vicina al bordo alto o al bordo basso, dovremo assegnare un altro valore all’attributo vertical-align. I valori a nostra disposizione, per l’attributo vertical-align, sono quattro: top, middle, bottom, baseline. Top spingerà il contenuto verso il margine alto della cella, bottom lo spingerà verso il margine basso, middle lo sistemerà al centro (impostazione base per ogni dispositivo), baseline porterà il contenuto della cella verso l’alto (quasi come top), ma allineandolo alla prima linea di testo nelle celle limitrofe. Di fatto, top e baseline producono raramente un risultato diverso e solo quando le celle contengono parecchio testo: se siete particolarmente perfezionisti, oppure se soffrite di un disturbo ossessivo compulsivo, allora potreste notare subito le differenze tra le due proprietà, ma sappiate che non tutti i vostri lettori se ne accorgeranno. Oltre a queste, possiamo assegnare a una tabella e al suo contenuto tutti o quasi i normali attributi, utilizzabili per il testo. In particolare, possiamo colorare lo sfondo delle celle, magari in modo alternato, così da renderne più semplice la fruizione ai lettori: alternare il colore dello sfondo è molto utile, se la tabella è piuttosto corposa o i dati sono parecchi. Per questo effetto alternato, possiamo ricorrere a uno pseudoelemento un poco particolare, ossia :nth-of-type(). Questo pseudoelemento ci permette di selezionare le celle in modo alternato, a seconda di cosa inseriamo tra le parentesi: :nth-of-type(odd) selezionerà tutte le celle dispari, mentre :nth-of-type(even) selezionerà tutte le celle pari. Ad esempio, tr:nth-of-type(odd) { background-color: yellow; } selezionerà tutte le righe (tag ) dispari della tabella e ne colorerà lo sfondo di giallo. In questo modo, le righe avranno un colore diverso tra loro: il normale colore dello sfondo per le righe pari, il giallo per le righe dispari. Se invece usiamo td:nth-of-type(even) { background-color: yellow; } , allora saranno le colonne a essere colorate in modo alternato, invece delle righe: abbiamo infatti assegnato lo pseudoelemento al tag , invece che a . Naturalmente, se ci interessa colorare in modo diverso le colonne, possiamo anche assegnare una classe per ogni colonna ai tag e poi impostare lo sfondo che vogliamo per quella classe, così da avere ogni colonna di un colore diverso. Non è detto che il risultato sarà particolarmente piacevole sul piano estetico, certo, ma è comunque una possibilità a vostra disposizione, che siete liberi di utilizzare. Avvertenza: il colore assegnato a una colonna apparirà al di sotto dello sfondo assegnato a una cella. Se dunque avete in programma di assegnare un colore specifico a una cella, sappiate che questo colore avrà il sopravvento sul colore assegnato alla colonna e quella cella apparirà col colore a essa assegnato, invece che col colore della colonna. Dovrebbe essere già ovvio, in base alla regole della ereditarietà, ma è sempre bene specificarlo. Se decidiamo di assegnare una classe a ogni colonna, qualunque sia il motivo, c’è infine un’altra proprietà che potrebbe interessarci ed è width: con questa possiamo impostare la larghezza di una colonna, esprimendo sempre la dimensione nelle solite unità di misura, che ormai dovrebbero esserci abbastanza familiari. Di conseguenza, se abbiamo creato una classe di stile “colonna”, potremo scrivere la regola .colonna { width: 200px; } e assegnare così una larghezza di 200 pixel a quella colonna. Naturalmente poi dovremo assicurarci che la larghezza sia sufficiente per il contenuto della colonna, ma questo è un altro discorso. Biografia Adriano Marchetti – Nato a Fidenza (PR) nel 1979, e quindi come ultimo rigurgito degli anni '70, si è dapprima diplomato presso il glorioso (…) Liceo Classico "G. D'Annunzio" di Fidenza (PR), come esponente dell'ultima annata che abbia usufruito della ormai estinta maturità col voto in sessantesimi (alla quale si presentò vestito come per una partita di basket al campetto dietro casa), per poi proseguire la sua carriera scolastica con una rutilante laurea in Lingue e Civiltà Orientali nel 2003 a Venezia, presso l'istituto Ca' Foscari, con indirizzo di studi filosofico-religioso e una imprescindibile tesi sul rapporto tra esistenza e tempo nel pensiero di Dôgen, monaco giapponese del XIII secolo. Qualcosa di tanto rivoluzionario e affascinante da aver risolto i problemi di insonnia dei suoi relatori. In occasione della laurea, tra l'altro, era vestito ancora peggio di quanto lo fosse per la maturità. Al momento, si occupa soprattutto di traduzioni dal giapponese e da altre lingue più normali, oltre a collaborare con alcuni siti internet e cercare di dedicarsi il più possibile a un (ig)nobile otium. Apionato di lettura e scrittura, ma anche di computer, escursioni, giochi di ruolo, sumo tra scarafaggi e svariate altre cose, non necessariamente reali, viaggia liberamente da Dante a Gibson, da Verga a Lovecraft e così via, con molte tappe intermedie e ogni tanto qualche sosta all'autogrill. Ha tentato più volte di asse la letteratura italiana e poi profanarne il cadavere, ma si è dovuto arrendere dopo un'accurata analisi dei contenuti delle librerie: lo avevano preceduto. Nonostante ciò, persevera nella sua attività scrittoria, con l'inflessibile pervicacia di un martello pneumatico, e a volte qualche suo racconto finisce addirittura per collaborare alla distruzione delle foreste, finendo per essere pubblicato su riviste (tra le vittime favorite, ricordiamo La Luna di Traverso, che ha la sfortuna di essere prodotta nella sua stessa provincia ed è stata infestata già da cinque o sei racconti) o su raccolte di Autori Vari (tipo Falsa testimonianza e altri racconti, MobyDick, 2009). Non ha mai ottenuto un primo posto in alcuni concorso letterario e questo lo onora, facendolo sentire un piccolo Raymond Poulidor letterario. Di solito non parla di sé in terza persona, ma ogni tanto lo fa, quando ad esempio deve presentarsi e non riesce a trovare idee migliori. Sito personale: www.adrianomarchetti.it window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144860406-1'); 4c6n2z