Come usare fogli di stile CSS negli EPUB (2)

Esistono quattro sistemi, per indicare le dimensioni di qualcosa in un foglio di stile: si possono esprimere le dimensioni in pixel (px), in punti (pt), in proporzione ai caratteri (em) e in percentuale. Lo em è una unità di misura che corrisponde all’ampiezza di un carattere: se scriviamo nel foglio di stile di utilizzare un rientro di 2em, stiamo chiedendo un rientro pari a due caratteri, qualunque sia il tipo di carattere utilizzato. È un ottimo sistema per descrivere le proporzioni interne di una pagina, perché mantiene sempre le stesse proporzioni, qualunque sia la dimensione del carattere; allo stesso modo, la percentuale è un ottimo sistema per descrivere la struttura generale della pagina, perché si mantiene costante a prescindere dalla dimensione dello schermo su cui il libro è visualizzato. Pixel e punti, invece, sono dimensioni fisse ed è bene utilizzarle solo per elementi che non dovranno mai cambiare, come ad esempio le linee di contorno di una tabella.
L’elemento body determina la struttura generale di una pagina; gli elementi div sono usati per dividere la pagina in più componenti (di solito, titolo e testo) e utilizzano id diversi, per distinguere le varie parti; gli elementi p servono a suddividere il testo in paragrafi e possono utilizzare class diverse, se vogliamo che alcuni paragrafi abbiano un aspetto differente. Per ognuna di queste voci, il foglio di stile presenterà una struttura apposita: capita spesso, ad esempio, di voler utilizzare una classe diversa per il primo paragrafo di ogni capitolo, così da formattarlo in modo differente rispetto ai successivi.
Per modificare un tag, avremo il nome del tag, seguito dalle parentesi graffe e dalla lista di attributi da modificare. In questo modo, la modifica si applicherà a tutti i tag di quel tipo.
p {
   attributo: valore;
}Per lavori di precisione, dovremo invece utilizzare id (nel caso del tag <div>) e class (in tutti gli altri casi). In questo modo, la modifica si applicherà ovunque sia usato quel valore di id o di class e potremo avere tag uguali che si comportano in modo differente.
Nel caso di un id, dovremo scrivere il suo nome preceduto da #:
#pagina {
   attributo: valore;
}Nel caso di class, dovremo scrivere il nome preceduto da un punto:
.paragrafo {
   attributo: valore;
}
Volendo essere più specifici, è anche possibile inserire il nome del tag, prima del punto, in una struttura del tipo: p.paragrafo. Per vederlo applicato in pratica, fate sempre riferimento allo EPUB che ho inserito come esempio, debitamente vivisezionabile con Sigil.
Detto questo, passiamo a vedere gli attributi specifici del foglio di stile.

Struttura della pagina

Abbiamo a disposizione diversi attributi, per specificare la struttura che avrà la pagina, e possiamo utilizzarli sia nell’elemento body, per la struttura  generale del libro, sia negli elementi dei singoli paragrafi.
margin: determina la dimensione del margine vuoto attorno alla pagina, su tutti e quattro i lati (sopra, sotto, destra, sinistra). Se vogliamo specificare il margine su un solo lato, o se vogliamo usare margini diversi per i vari lati, avremo a disposizione margin-top, margin-bottom, margin-right e margin-left. È preferibile indicare la dimensione dei margini in percentuale, oppure in em, così il dispositivo di lettura potrà adeguarli meglio alla larghezza dello schermo e al tipo di carattere usato.
Alcuni esempi:
margin: 0; (nessun margine)
margin: 4em; (tra il bordo della pagina e il bordo dello schermo c’è un margine pari a quattro caratteri, su tutti i lati)
margin-bottom: 2em; (il margine inferiore di questo elemento è pari a 2 caratteri)
padding: determinala dimensione dello spazio vuoto tra il margine della pagina e l’inizio del testo, mentre margin stabiliva lo spazio tra il margine della pagina e il bordo dello schermo. Per il resto, funziona come margin e ha gli stessi attributi (padding-top, padding-bottom, eccetera).
border: serve a disegnare una cornice attorno a un elemento. Per usarlo, dovremo prima di tutto specificare la dimensione del bordo (di solito in px), poi il tipo di bordo (dashed per un bordo tratteggiato, solid per un bordo continuo, dotted per un bordo punteggiato), quindi il colore del bordo. Alcuni esempi:
border: 2px dashed black;
disegnerà una cornice nera tratteggiata, larga due pixel, attorno all’elemento scelto.
border: 1px dotted red;
disegnerà una cornice rossa punteggiata, larga un pixel, attorno all’elemento scelto.
In alternativa al numero in pixel o altra unità di misura, si può esprimere lo spessore della cornice coi valori thin, medium e thick, per esempio:
border: medium solid blue;
che disegnerà una cornice blu e continua, di spessore medio.
Elementi di questo tipo sono di uso più comune nei manuali, ad esempio per mettere in evidenza formule, avvertimenti o concetti di particolare importanza.
text-align: serve a formattare il testo, allineandolo lungo uno dei margini; i suoi possibili valori sono left (allineato a sinistra), right (a destra), center (al centro), justify (giustificato).
text-indent: serve a specificare il rientro della prima riga di un paragrafo e possiede un valore espresso preferibilmente in em. Un paragrafo con text-indent: 3em; presenterà un rientro nella prima riga pari allo spazio di tre caratteri.
background-color: serve a specificare un colore per lo sfondo dell’elemento. Il colore può essere indicato con un nome inglese (se esiste un nome per quel colore), oppure col numero esadecimale che corrisponde a quel colore.
background-image: serve a specificare una immagine, da utilizzare come sfondo per un elemento. Non è una scelta che raccomando, soprattutto se progettate di usare immagini pesanti da caricare, ma in certi casi l’effetto può essere gradevole, se ad esempio avete preparato uno sfondo che simula l’aspetto di una pergamena. Si usa così:
background-image: url(“../Images/sfondo.jpg”);
dove ovviamente userete il nome della vostra immagine, al posto di “sfondo.jpg”.
Normalmente, una immagine di sfondo è ripetuta in orizzontale e verticale, fino a riempire tutto lo spazio della pagina. Se questo non vi va bene, dovrete modificare gli attributi background-repeat: ed eventualmente background-attachment: (per mantenerla sempre al centro dello schermo) e background-position: (per ottenere una migliore collocazione dell’immagine), ma un lavoro di questo tipo, normale in un sito web, può dare brutti risultati sugli schermi più piccoli di un lettore. Da usare con molta cautela.
Esistono poi svariati altri attributi, relativi alla struttura di una pagina, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.

Caratteristiche del testo

Possiamo specificare diversi attributi nel foglio di stile, per quanto riguarda il modo in cui sarà visualizzato il testo sullo schermo: possiamo specificare il font, la dimensione dei caratteri, il colore, ma anche lo stile, eccetera. Se non siamo soddisfatti del corsivo standard, ad esempio, ne possiamo definire uno nostro, nel foglio di stile, e poi utilizzarlo nella pagina, racchiudendo le parole in corsivo in un tag <span>, con un valore di class corrispondente a quello utilizzato per il nostro corsivo. C’è un esempio di questo uso nel modello di EPUB.
font-family: serve a specificare il font da utilizzare per il testo. Possiamo assegnare più valori  questo attributo e il lettore li proverà uno alla volta, da sinistra verso destra, fino a che non ne avrà trovato uno che sarà in grado di visualizzare: per questo motivo è meglio indicare per primo il nostro font di preferenza e poi, uno alla volta, i font alternativi, sempre in ordine di preferenza. Per indicare il tipo di font, basta scriverne il nome, eventualmente racchiuso tra virgolette se è formato da più di una parola. Ad esempio:
font-family: “Times New Roman”,  Times, serif;
Il lettore cercherà prima di tutto di caricare il font Times New Roman; se non possiede questo file, proverà col successivo, ossia Times; se anche questa volta fallisce, caricherà un qualunque font di tipo serif, presente nella sua memoria.
Come ultimo valore, è opportuno specificare una delle tre grandi famiglie di font, ossia serif, sans-serif e monospace: in questo modo, il lettore avrà almeno un appiglio sicuro, se tutto il resto dovesse fallire.
font-size: serve a specificare la dimensione di preferenza per i caratteri. Non è comune utilizzarlo in uno e-book, ma a volte possono esserci motivi per cui scegliere una dimensione specifica, invece di lasciar fare al lettore. La dimensione si può esprimere in tutte e quattro le unità di misura summenzionate. Esempio:
font-size: 1.5em; (il carattere sarà grande una volta e mezza la sua dimensiona standard).
font-style: serve a specificare che tipo di stile dovrà possedere quel carattere, se state lavorando su un corsivo, nel qual caso indicherete italic come valore per l’attributo.
font-weight: come sopra, ma usato quando si lavora su grassetti e simili; nel caso di un testo in grassetto, il suo valore sarà bold.
font-variant: come sopra, ma in questo caso si utilizza per ottenere un testo in maiuscoletto; il valore da assegnare sarà small-caps. Se si vuole esplicitamente rimuovere una di queste tre caratteristiche, le si dovrà assegnare il valore normal.
line-height: serve a specificare l’altezza di ogni riga di testo per quell’elemento. Il suo valore può essere espresso in una delle quattro unità di misura disponibili, ma per ovvie ragioni è preferibile utilizzare lo em, così da definire la dimensione della riga in rapporto a quella del carattere utilizzato. Ad esempio:
line-height: 2em; (la riga sarà alta il doppio del carattere utilizzato, in pratica avremo una interlinea doppia).
color: serve ad assegnare un colore al carattere utilizzato e funziona esattamente come il già visto background-color. Ad esempio:
color: green; (il testo avrà un colore verde).
text-transform: serve a modificare il testo, convertendolo in maiuscolo, minuscolo o rendendo maiuscola la prima lettera di ogni parola. I valori da assegnare sono, rispettivamente, uppercase (tutto maiuscolo), lowercase (tutto minuscolo), capitalize (prima lettera maiuscola), none. Esempio:
text-transform: uppercase; (il testo sarà interamente in maiuscolo).
text-decoration: serve ad assegnare una particolare decorazione alla parte di testo in esame. I suoi valori possibili sono underline (testo sottolineato), overline (linea al di sopra del testo), line-through (linea che attraversa il testo), none. Esempio:
text-decoration: line-through; (il testo sarà tagliato a metà in orizzontale da una linea).
Questo attributo può essere utile per il titolo di un capitolo: utilizzando un valore
text-decoration: underline overline;
il testo sarà racchiuso tra due linee, per evidenziarlo. Ne vedete un esempio nel modello di EPUB.
Anche in questo caso, esistono poi svariati altri attributi, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.