Guida al CSS per EPUB – Formattare il testo

Nella puntata precedente abbiamo visto la struttura generale di una regola CSS: prima di tutto indichiamo il nome del tag e/o della classe a cui la regola si applicherà, poi apriamo una parentesi graffa, elenchiamo una serie di coppie formate da una proprietà e l’attributo da assegnare a quella proprietà, infine chiudiamo la parentesi graffa. Le proprietà che possiamo impostare sono parecchie, soprattutto quando stiamo lavorando sulla pagina di un normale sito web; nel caso di uno EPUB, però, diverse di queste proprietà avrebbero poco senso o poca utilità, per cui possiamo concentrarci su un numero ristretto di esse, cioè quelle che normalmente ci serviranno per formattare la nostra pagina e il nostro testo. Oggi partiremo dal testo. Premessa generale. Il CSS utilizza più unità di misura, per definire la dimensione del testo, della pagina, i margini, eccetera, e non tutte queste unità di misura sono intuitive, come significato. Il pixel è probabilmente la più comune e la più semplice: se assegnate a qualcosa un valore di 20px (venti pixel), quell'elemento avrà sempre e comunque una dimensione di venti pixel, a prescindere da tutto il resto. A titolo di esempio, la dimensione base dei caratteri in un qualsiasi browser è di 16px, cioè sedici pixel (non lasciate spazi vuoti tra il numero e px, la sigla di pixel) e molti lettori di e-book seguono questa convenzione. Lo em è una unità di misura più esotica ed equivale alla dimensione base dei caratteri che, come abbiamo appena visto, di solito è 16px, ossia sedici pixel. Questa unità è usata spesso per indicare la dimensione del rientro alla prima riga (se lo utilizziamo): un rientro di 3em, ad esempio, imposterà un rientro di tre caratteri, mentre 5em sarà cinque caratteri. Se a un titolo assegniamo una dimensione di 2em, lo renderemo grande il doppio rispetto ai caratteri normali, mentre un valore di 0.5em renderà il nostro testo grande la metà del normale. La percentuale funziona come lo em, cioè determina la dimensione dell’elemento in rapporto a un altro valore, ma con una differenza: nel caso dello em, il valore di riferimento è sempre la grandezza del carattere, mentre nel caso della percentuale il riferimento varia, a seconda dei casi. Se stiamo impostando la dimensione di un carattere, e lo facciamo in percentuale, dicendo ad esempio che il testo deve essere il 150%, allora il risultato sarà equivalente a 1.5em; se però usiamo la percentuale per determinare la larghezza della pagina, il valore di riferimento non sarà il carattere, ma la grandezza dello schermo. Abbandoniamo adesso il discorso in astratto sulle unità di misura e guardiamo come assegnare stili al testo, che è poi l'argomento principale di oggi: le unità di misura ritorneranno, ma inserite in un contesto più preciso. La prima cosa che probabilmente vorremo impostare, nel nostro EPUB, è il font, ossia il tipo di carattere da utilizzare (utilizzo la parola font al maschile, perché mi riferisco al file in cui sono contenuti i caratteri; il file, per l’appunto).

font-family

Normalmente, possiamo utilizzare nel nostro EPUB qualsiasi font preferiamo, più o meno come accade quando lavoriamo con un programma quale Word o Writer. Per assegnare il font nel foglio di stile, useremo l’a proprietà font-family, a cui assegneremo il nome del font come valore. Ad esempio,
p {
    font-family: “Times New Roman”;
}
assegnerà il font “Times New Roman” a tutto il testo racchiuso in un tag <p>. Il nome del font deve essere racchiuso tra virgolette, se è composto da più di una parola, ma non è obbligatorio se il suo nome è di una sola parola: Times New Roman dovrà quindi essere racchiuso tra virgolette, mentre Verdana può essere scritto senza virgolette. Possiamo specificare un solo tipo di font, come abbiamo fatto in questo caso, ma è più prudente indicarne almeno due o tre, in ordine di preferenza: al primo posto metteremo il font che preferiamo e poi, in ordine, le opzioni di riserva, separate da una virgola. Questo è importante, perché non tutti i dispositivi di lettura possiedono tutti i tipi di font: il Times New Roman è dappertutto, ma font più insoliti potrebbero non essere disponibili su un determinato dispositivo. Per limitare i danni, è bene dunque offrire una serie di font di riserva, via via più generici, che saranno utilizzati se i font più specifici mancheranno. Ad esempio, la regola
p {
    font-family: Arial, Helvetica, sans-serif;
}
darà al lettore un ordine di questo tipo: “per visualizzare il testo contenuto nel tag <p>, usa il font Arial; se non è disponibile, usa il font Helvetica; se non hai neppure quello, usa un qualsiasi font di tipo sans-serif”. Serif, sans-serif e monospaced sono tre famiglie base di font e rappresentano la soluzione più generica possibile: è bene indicarle come ultima alternativa, in una lista di font. Serif è un font con piccole decorazioni alla fine della lettera ed è usato normalmente per il testo di una pagina: esempi di questa famiglia sono Times New Roman, Georgia, Garamond, Baskerville e così via. Sans-serif è un font più semplice, senza decorazioni, ed è solitamente usato per i titoli: esempi sono Arial, Helvetica, Verdana, Tahoma, eccetera. Monospaced è un font in cui tutti i caratteri occupano lo stesso spazio e conferisce al testo un aspetto da “vecchia macchina da scrivere”: esempi sono Courier, Lucida Console, Monaco, eccetera. Se è fondamentale che il nostro testo sia riprodotto con un particolare tipo di font e vogliamo essere sicuri che sia disponibile su ogni dispositivo, dovremo incorporarlo nel nostro e-book. Ho già parlato altrove di come incorporare font in uno EPUB, per cui vi rimando a quell'articolo.

color

Una volta stabilito il font, potremmo aver voglia di colorare il nostro testo, invece di lasciarlo nel solito nero. La proprietà da modificare, in questo caso, è color, a cui dovremo assegnare un valore corrispondente al colore che ci interessa, il che potrebbe essere un poco complicato. Il colore, nel CSS, può essere indicato in almeno tre modi: per i colori base, è di solito disponibile un nome (in inglese); per colori più particolari, sfumature, o per essere sicuri che il colore sia compreso ovunque, possiamo utilizzare il suo valore esadecimale, oppure indicare la combinazione di rosso, verde  blu che lo producono. Vediamo come funziona. Per alcuni colori, il nome è sufficiente: possiamo così scrivere color: red; color: blue; color: green; e all'elemento corrispondente sarà assegnato il colore che vogliamo. In altri casi, però, la vita non è così semplice e dovremo utilizzare sistemi più complicati, per indicare il colore. Il numero esadecimale è la forma più vecchia, utilizzata fin dai primordi del web per indicare il colore di un elemento HTML: il colore è così rappresentato da sei numeri in base sedici, che corrispondono alla quantità di rosso, verde e blu da mischiare, per ottenere il colore corrispondente. Alcuni esempi sono: color: #6600FF; color: #3E8988; In questi casi, il simbolo # indica che il valore seguente è un esadecimale, il numero seguente esprime la miscela di colori necessari. Potete utilizzare un qualsiasi programma di grafica, come Photoshop, GIMP o altri, per scoprire quale sia il numero esadecimale corrispondente al colore che vi interessa. Altra possibilità è indicare in modo più normale i valori di rosso, verde e blu, utilizzando per ciascuno di essi una percentuale, oppure un numero compreso tra 0 e 255. Ad esempio: color: rgb(255, 255, 255); color: rgb(100%, 100%, 100%); rappresentano lo stesso colore, ma con due formule diverse. In entrambi i casi, dovremo utilizzare la struttura rgb() come base e scrivere, al suo interno, i tre valori, divisi da una virgola. È la soluzione migliore, per inserire un colore, perché ci permette il massimo controllo sul risultato, ma soprattutto può essere facilmente estesa, per aggiungere un quarto valore, ossia la trasparenza. Dubito che vorrete mai scrivere un capitolo del vostro libro, utilizzando colori trasparenti, ma sappiate che è possibile: basta utilizzare rgba() e inserire, come quarto attributo, un numero decimale da 0 a 1, dove 0 indica trasparenza completa (invisibilità, insomma) e 1 indica opacità completa. Ad esempio, color: rgba(255, 0, 0, .5); produrrà un colore rosso che è per metà trasparente. Anche in questo caso, chiedete aiuto al vostro programma di grafica preferito, per conoscere i valori da assegnare a ogni colore.

font-size

Per modificare la dimensione del font, possiamo utilizzare la proprietà font-size, che è molto semplice da usare: tutto ciò che dobbiamo fare è indicare la dimensione da assegnare al font, usando una delle unità di misura già menzionate. Ad esempio font-size: 1.2em; font-size: 120%; font-size: 20px; e così via. C’è solo un avvertimento, riguardo al corretto utilizzo di questa proprietà, se esprimiamo la dimensione in percentuale o in em: se modifichiamo per la prima volta la dimensione del font, allora il valore di riferimento sarà quello base (di solito 16 pixel); se abbiamo già modificato la dimensione, allora il valore di riferimento sarà quello che abbiamo assegnato all'ultimo tag “padre”, secondo l’albero genealogico che abbiamo visto alla fine della precedente.

font-style

Una proprietà opzionale è font-style, che può essere utilizzata per rendere corsivo il testo, oppure per annullare lo stile corsivo in un tag figlio, se lo avevamo assegnato al tag padre. Questa proprietà ha tre possibili valori: normal, che toglie il corsivo, italic, che assegna il corsivo, oblique, che di fatto è identica a italic, ma non si usa quasi mai. Ad esempio, font-style: italic; font-style: normal; dove il primo rende corsivo il testo e il secondo rimuove lo stile corsivo.

font-weight

Altra proprietà opzionale è font-weight, che funziona come font-style, ma si applica al grassetto, invece che al corsivo. In questo caso, però, i valori possibili sono soltanto due: normal e bold, dove il primo rimuove il grassetto e il secondo lo applica al testo. In pratica, font-weight: normal; font-weight: bold; sono le uniche due combinazioni possibili per questa proprietà.

text-transform

A volte può essere necessario trasformare le lettere di una o più parole, per renderle maiuscole o minuscole: la proprietà text-transform si occupa proprio di questo. I valori possibili per questa proprietà sono quattro: uppercase, lowercase, capitalize e none. Come è facile da intuire, uppercase rende il testo maiuscolo, lowercase lo rende minuscolo e capitalize rende maiuscola soltanto la prima lettera di ogni parola, mentre none annulla ogni modifica. Le combinazioni sono dunque text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; text-transform: none; ed è un a proprietà che probabilmente vi tornerà comoda soltanto per i titoli dei capitoli e poco altro, ma è sempre utile conoscerne l’esistenza.

font-variant

Altra proprietà estremamente specifica, che di fatto serve solo a creare testo in maiuscoletto. Scrivendo font-variant: small-caps; otterrete 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.

text-decoration

Una proprietà fondamentale, senza la quale non potremmo vivere, da cui ogni forma di tipografia digitale dipende: ecco cosa NON è text-decoration. Scherzi a parte, è una proprietà che raramente vi troverete a dover utilizzare (o almeno spero), ma può essere utile spendere una frazione della propria memoria per immagazzinarla, nel caso in cui dovesse servire, in un futuro lontano. Questa proprietà assegna una specie di decorazione al testo o alla parola a cui è assegnata, anche se la idea di “decorazione” che voi avete è probabilmente molto diversa da quella di chi ha progettato questa proprietà. I valori possibili sono underline, overline, line-through, blink, none e possono essere combinate tra loro, applicandone più di una allo stesso elemento. Undeline traccia una linea sotto al testo, overline ne traccia una al di sopra del testo, line-through ne traccia una attraverso il testo, blink farà lampeggiare fastidiosamente il testo e none abolirà decorazioni precedenti. Ad esempio, text-decoration: line-through; text-decoration: overline underline; text-decoration: none; e così via, dove soltanto il buon gusto potrà costituire un limite alla vostra creatività.

text-shadow

Chiudiamo con una vera decorazione, che certo può avere un buon impatto visivo, se usata bene, ma che potrebbe non funzionare su tutti i lettori, essendo una novità abbastanza recente: dovrete sperimentarla sul campo. Questa proprietà è text-shadow, che aggiunge un effetto-ombra al testo a cui è assegnata: in pratica, se la applicate a un titolo, il titolo sarà accompagnato da un’ombra, che darà una vaga illusione di profondità e tridimensionalità (con un poco di fantasia). Per usarla, dovrete assegnare una discreta sfilza di valori, ad esempio text-shadow: -4px 4px 3px #999999; dove il primo valore corrisponde alla posizione orizzontale dell’ombra, il secondo alla posizione verticale, il terzo al tasso di sfocatura e il quarto al colore. Nel mio esempio, l’ombra è spostata a sinistra di 4 pixel (valori negativi la spostano a sinistra, valori positivi la spostano a destra, rispetto alla parola che la proietta), verso il basso di 4 pixel (valori positivi la spostano verso il basso, lavori negativi verso l’alto), è abbastanza sfocata (con 0 pixel è nitida, ogni punto in più ne aumenta la sfocatura) e ha un colore grigio. Il modo migliore per dare un senso a tutti i vari numeri è sperimentare di persona, se siete interessati a usare questa proprietà.
Continueremo alla prossima puntata.