Per funzionare correttamente il foglio di stile deve richiamare tag, classi e id della pagina XHTML. Il tag e la classe costituiscono ciascuno un selettore, servono cioè a indicare a quali parti di testo ci si riferisce. All’interno delle parentesi graffe, si trova prima la proprietà, e poi, dopo i due punti, il valore.
All’interno di ciascuna pagina XHTML, nel tag head, è necessario richiamare il foglio di stile, posizionato nella cartella Styles, così:
[sourcecode language=”html” wraplines=”false” light=”true”]
<link rel=”stylesheet” href=”../Styles/nome_stile.css” type=”text/css”/>
[/sourcecode]
Questo consente di poter formattare ogni pagina in modo differente richiamando un foglio di stile personale per ciascuna — possibile, ma poco utile.
Studiando le innumerevoli proprietà del CSS, si ha l’impressione di poter fare, con il proprio ePub, qualunque cosa. In realtà prima di applicare una proprietà CSS in un ePub bisogna sempre tener conto di tre variabili. Prima di tutti, assicurarsi che la proprietà sia accettata dalle specifiche dell’IDPF. Se così non fosse, l’ePub potrebbe non superare la validazione. In secondo luogo, capire empiricamente o attraverso le specifiche delle case produttrici se la proprietà è letta in modo adeguato dagli eReader. Terzo ma non ultimo, considerare sempre la libertà dell’utente di cambiare aspetto al testo attraverso il device, avendo rispetto della caratteristica principale dell’ePub, lo scorrimento del testo e il suo adattarsi allo schermo.1
È chiaro come quest’ultima variabile, nel caso di layout fisso, sia da soprassedere. Per quanto invece riguarda le prime due, sembra opportuno fornire un elenco di proprietà del CSS che possono essere utilizzate con una certa tranquillità.
Prime fra tutte le proprietà riguardanti la formattazione del testo. Innanzitutto, font-family indica la scelta del font. Grazie alle specifiche ePub3 del’IDPF, è possibile inserire all’interno dell’eBook un qualsiasi carattere OTF o TTF, possedendo ovviamente i dovuti permessi. La maggior parte dei produttori di caratteri infatti non permettono la distribuzione commerciale, tuttavia esistono molte font senza questo genere di restrizioni — il più semplice e più utilizzato è il sito Google Fonts. È possibile aggiungere il file del carattere inserendolo direttamente all’interno della cartella Fonts — utilizzando Sigil, è sufficiente cliccare col destro sulla cartella Fonts e poi selezionare ‘aggiungi file esistente’; deve però trattarsi di un carattere Open Type (OTF), True Type (TTF) o (WOFF).
Successivamente, all’interno del foglio di stile, va definita la regola @font-face per il carattere che si intende utilizzare.
Fondamentalmente, la regola @font-face mette in relazione un nome, uno stile e uno spessore (weight) con il file indicato nel percorso (src). Potete chiamare il carattere come volete (anche se sarebbe sensato utilizzare il vero nome del carattere, non dovete preoccuparvi di conoscere il suo nome ufficiale). Lo stile (style) e lo spessore (weight) sono gli stili effettivi del carattere (bold, italic, normal). Infine src contiene, fra virgolette, l’URL del file del carattere, il percorso […].2
Una volta che ho definito il carattere in questo modo, è stato possibile richiamarlo semplicemente citando lo stesso nome che si è usato in @font-face nella regola CSS in cui volevo usare il carattere.
Oltre alla font, altre proprietà utili alla formattazione del testo sono la font-weight (indicando bold, si imposta il grassetto), la font-style (indicando italic, si imposta il corsivo), font-size e line-height (dimensione del corpo del testo e interlinea).
Dato che il carattere e le dimensioni del testo di un eBook a layout fisso non si possono cambiare, è molto importante la scelta dei valori più adeguati già in fase di progettazione.
Per quanto riguarda invece i vari blocchi, le proprietà di cui mi sono servito spesso per la loro formattazione sono le seguenti. Fondamentali le proprietà margin, che indica la spaziatura sopra, sotto, a destra e a sinistra del testo, e position. Per quest’ultima, se indicato absolute, viene impostato il posizionamento assoluto dell’elemento all’interno della pagina. Questa proprietà è molto utile nel caso di layout fisso poiché l’elemento in questione si distacca dal flusso gerarchico imposto dall’HTML e, attraverso le proprietà top, bottom, left e right, seguite da valori assoluti (in pixel) o relativi (con un valore percentuale riferito alla larghezza della pagina, o dell’elemento in cui il testo è inserito), se ne specifica la posizione sulla pagina. Utile a questo proposito è anche la proprietà z-index, il cui valore indica il posizionamento dell’elemento sull’asse Z.
Esistono poi altre proprietà “molto diffuse ma che creano frequenti problemi di compatibilità e che quindi è bene usare con cautela”3. orphan e widows, con valori superiori a 1, servono a evitare le righe orfane o vedove; page-break-after, page-break-before e page-break-inside, invece, indicano l’interruzione di pagina prima, dopo o all’interno di un elemento. font-variant, con il valore small-caps, indica il maiuscoletto, mentre word-spacing e letter-spacing, indicano quelli che tipograficamente vengono chiamati track e kerning, ossia spaziatura ‘insolita’ tra le pagine o tra i caratteri.
Per ogni tag e classe possono essere quindi assegnate delle proprietà, anche se il tag è quello di un’immagine o di una cornice div. Una volta definita la classe nel foglio di stile, le sue proprietà verranno applicate a tutti gli elementi della pagina che presentano quella classe. In questo modo la mappatura creata in precedenza, per dare al testo una struttura, si rivela utile anche per gestire l’aspetto.
Una problematica da considerare riguarda i problemi di priorità che possono presentarsi anche all’interno di un unico foglio di stile o tra più fogli di stile dichiarati nella pagina XHTML — come si descriverà nei prossimi articoli. In questo caso vince sempre la regola più vicina al testo di riferimento. In tal senso, è decisamente sconsigliato l’utilizzo di stili in linea, ossia dall’attributo style all’interno della pagina XHTML — questo perché gli stili in linea hanno sempre la priorità ma mescolano aspetto e struttura creando casi di conflitto.4
Piccolo consiglio. Soprattutto per gli eBook a layout fisso, è importante riuscire a equilibrare tutte le font cercando al contempo di creare qualcosa di accattivante. In caso di mancanza di ispirazione, cercate qualche sito che raccoglie i lavori di web design sulla typography — esempio.
Fonti
1 Alba Carella (a cura di), Dal libro all’ePub. Guida ragionata alla realizzazione di ebook, Carocci editore, Roma, 2014, p. 37
2 Elizabeth Castro, EPUB a layout fisso (Digitalissimo)
, goWare, 2012
3 Ibidem
4 Ibidem