Magazine Informatica

HOME › 
TECNOLOGIA › 
INFORMATICA › 
CSS

Come usare fogli di stile CSS negli EPUB (1)

Creato il 05 marzo 2013 da Hnikarr
Come ho già scritto in diverse occasioni, uno e-book in formato EPUB è, di fatto, un sito web in versione tascabile (e locale). Come ogni altro sito web, è composto da una serie di documenti di testo, in formato XHTML (per adesso, ma un giorno dovremmo passare allo HTML5, se e quando lo standard EPUB3 sarà adottato ovunque), che costituiscono i vari capitoli del libro: sono normali files, che potremmo estrarre e aprire con qualsiasi browser, e di solito sono raccolti in una cartella Text. Se vi è mai capitato di aprire uno EPUB con Sigil, per modificarne il contenuto o anche solo per semplice curiosità, è la prima cartella che trovate, nella lista sulla sinistra. Oltre a queste pagine web, uno EPUB contiene di solito altri tipi di documenti, ognuno raccolto nella cartella più adatta: immagini nella cartella Images, font incorporati nella cartella Fonts, eventuali files audio e video nelle cartelle Audio e Video, eccetera. Fin qui, niente di nuovo.
C’è però un’altra cartella, molto importante, di cui mi occuperò oggi: è la cartella Styles. In questa cartella, se uno EPUB è stato realizzato decentemente, è contenuto un singolo file con estensione .CSS (può anche essercene più di uno, ma è raro e non molto comodo) e spesso un nome strano, se abbiamo lasciato che lo generasse in automatico qualche programma. Questo file è il foglio di stile ed è il documento che determinerà l’aspetto del nostro EPUB, cioè il modo in cui i vari dispositivi di lettura lo visualizzeranno.
È un sistema che si applica anche ai siti web; un sito ben realizzato avrà, da qualche parte, un foglio di stile, in cui sono contenute tutte le indicazioni su come visualizzare quel sito: font da utilizzare di preferenza, il colore dei vari elementi, i margini da lasciare, la dimensione preferita della pagina, eccetera. Uno EPUB non fa eccezione e si comporta da sito web anche sotto questo aspetto: nel foglio di stile possiamo indicare tutte le nostre preferenze e i lettori cercheranno di seguirle, nei limiti delle loro possibilità. Se vogliamo che le pagine del nostro e-book siano verdi, con scritte di colore turchese, dovremo indicarlo nel foglio di stile, e sempre nel foglio di stile potremo indicare quanto spazio lasciare tra il titolo di un capitolo e il contenuto, quale formattazione utilizzare per il testo, quale rientro per la prima riga di ogni paragrafo, e così via, in un elenco potenzialmente molto lungo.
Per ottenere un foglio di stile, abbiamo almeno due possibilità: realizzare il nostro futuro EPUB con un qualunque elaboratore di testi, impostando font, colori, margini e tutto il resto, e lasciare poi che il programma di conversione costruisca per noi il foglio di stile, con buone probabilità di doverlo modificare e correggere a mano, oppure realizzare un testo di base, senza formattazioni particolari, e scrivere a parte il nostro foglio di stile, da inserire poi attraverso Sigil. Qualunque sia la vostra scelta, è comunque utile avere almeno una idea di come sia fatto un foglio di stile, così da potervi mettere le mani senza doversi muovere a caso: per questo motivo, procederò adesso con una breve presentazioni delle principali classi utilizzare per uno e-book e degli attributi che più spesso vorrete o dovrete modificare, per dare al vostro testo l’aspetto che desiderate. Non sarà un elenco esaustivo, perché mi limiterò allo stretto necessario per uno e-book, ma dovrebbe costituire almeno una mappa di emergenza, per avventurarsi nel magico mondo del CSS.
Prima di tutto, dobbiamo aggiungere un foglio di stile a una pagina, se già non lo possiede. È la cosa più semplice: se state usando Sigil, scegliere la vista codice, poi controllate nelle prime righe della pagina, quelle racchiuse nei tag <head> e </head>, per vedere se compare una scritta del tipo
<link href="../Styles/nome_del_foglio.css" type="text/css" rel="stylesheet" />
Se compare, il foglio di stile è già stato aggiunto alla pagina; se non compare, dovrete aggiungere voi quella riga di codice, possibilmente subito dopo il tag <title>, modificando ovviamente il nome del vostro foglio di stile nella parte href. Poi, si tratterà di creare un file con quel nome nella cartella Styles, se già non esiste. A ogni modo, procediamo col viaggio nel CSS.
Come esempio, prenderemo in esame il foglio di stile per una pagina che ha la seguente struttura:
<body>
   <div id="pagina">
   <div id="titolo">
   <h2>Capitolo 1</h2>
   </div>
   <div id="testo">
   <p class="paragrafo">bla bla bla</p>
   <p class="paragrafo">bla bla bla</p>
   <p class="paragrafo">bla bla bla</p>
   </div>
   </div>
</body>
Una struttura molto semplice, certo più semplice di molte strutture che vedremo, utilizzando la vista codice di Sigil. Tutto ciò che appare nella pagina è dentro l’elemento body; questo elemento è a propria volta diviso in titolo, dove vediamo il nome del capitolo, e testo, dove apparirà il testo del capitolo. Ognuno degli elementi che vediamo, racchiusi tra < e >, potrà essere modificato nel foglio di stile, utilizzando o il nome dell’elemento (body, h2, p), oppure il nome che gli è stato assegnato (quello che compare accanto a id e class).
Un foglio di stile si presenta infatti come un elenco di strutture strane, composte da un nome e una serie di coppie attributo-valore, racchiuse tra due parentesi graffe. Qualcosa di questo tipo (ma senza colori, che ho aggiunto io a scopo esplicativo):
body {
   display: block;
   background-color: gainsboro;
   font-size: 1em;
   font-family: "Courier New", Courier, monospace;
}
Per quanto possa apparire strano a prima vista (e forse anche a seconda vista), in realtà è una struttura molto semplice da capire e modificare. Come ho scritto poco sopra, una pagina web, o nel nostro caso una pagina dello EPUB, è divisa in più elementi, ognuno contraddistinto da un particolare tag in XHTML; spesso, i tag possiedono a propria volta un nome specifico (quello che compare accanto a id e class), per suddividere il documento in modo ancora più dettagliato e preciso. Nel nostro esempio, usiamo i nomi “titolo” e “testo” per distinguere due tag uguali, cioè i tag div, così da assegnare a ognuno caratteristiche differenti.
Un foglio di stile elenca tutti gli elementi che vogliamo modificare, indicandoli per nome (body, nell’esempio qui sopra): all’interno delle parentesi graffe sono elencati gli attributi che vogliamo modificare in quel particolare elemento, accompagnati dal valore che dovrà essere loro assegnato. L’attributo background-color, ad esempio, indica il colore che dovrà avere lo sfondo dell’elemento body, e il colore sarà gainsboro, ossia il valore assegnato a quell’attributo (gainsboro è il nome di un colore, per quanto possa sembrare strano; i colori possono essere indicati per nome, se hanno un nome valido, oppure col codice numerico corrispondente). In questo esempio, la nostra pagina avrà un colore gainsboro, invece di essere bianca. A voi scoprire che tipo di colore sia.
Ogni pagina XHTML possiede un elemento body ed è la sua parte fondamentale: tutti gli altri elementi sono costruiti su quello e all’interno di quello. Nel vostro foglio di stile, dunque, è bene che l’elemento body sia il primo e contenga tutti quegli attributi che dovranno costituire la struttura portante dello EPUB: colore della pagina, colore e dimensioni dei caratteri, ampiezza dei margini, tipo di font da utilizzare, eccetera. Ognuno di questi elementi potrà tranquillamente essere modificati per parti specifiche del libro, a seconda delle necessità, ma qui è bene indicare i valori di base per il nostro libro.
Ovviamente, ciò che noi indichiamo in un foglio di stile è un suggerimento, che il dispositivo di lettura cercherà di seguire come può: se gli chiediamo di usare un carattere che non possiede, o un colore che non possiede, il dispositivo non potrà soddisfare la nostra richiesta e utilizzerà il font o il colore di default. Su un computer succede raramente, ma su altri dispositivi può essere un problema reale: non esageriamo con le richieste strane e, se necessario, aiutiamo i dispositivi, per esempio usando font incorporati nel nostro EPUB.
Questo vale come premessa generale; la prossima volta vedremo gli attributi che userete più spesso in un normale e-book, con indicazioni sui valori che si possono attribuire e i tag a cui abbinarli di preferenza (ma nessun vi vieta di assegnare qualsiasi tipo di valore a qualsiasi tipo di tag, una volta appreso il meccanismo). Per adesso, potete scaricare ed esaminare un semplice modello di testo, in cui sono messe in pratica alcune delle possibili modifiche: guardate il suo foglio di stile, guardate il risultato sulla pagina e preparatevi a comprenderne il significato nella seconda parte della guida.

Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

Vedi articolo originale
Segnala un abuso

A proposito dell'autore


Hnikarr 2297 condivisioni Vedi il suo profilo
Vedi il suo blog

L'autore non ha ancora riempito questo campo L'autore non ha ancora riempito questo campo

I suoi ultimi articoli

Vedi tutti

Dossier Paperblog

Magazines