Magazine Informatica

Guida al CSS per EPUB - Introduzione

Creato il 17 maggio 2013 da Hnikarr
Già in precedenza mi ero dedicato a una breve introduzione all'uso del CSS negli EPUB, per controllare e modificare lo stile di una pagina in base ai nostri gusti. Tornerò adesso sull'argomento  dedicandovi però più spazio, in una guida che, almeno nelle mie intenzioni, dovrebbe essere più chiara e completa della precedente introduzione. Non escludo che il risultato sarà un bignami di CSS, ma staremo a vedere. Argomento di oggi (e non solo di oggi) è dunque: come usare il CSS in uno EPUB.
Come ho ripetuto fino alla nausea, uno EPUB è fondamentalmente un sito web, compresso e impacchettato fino a sembrare un libro: i vari capitoli di uno EPUB sono altrettante pagine in formato HTML, oppure XHTML, ossia il formato di una normale pagina web, e come ogni normale pagina web possono essere formattati utilizzando un foglio di stile CSS. Un foglio di stile CSS è un normale file di testo, con estensione .CSS, al cui interno è raccolta una lista di regole di stile, che dovranno essere applicate alla pagina che le utilizza, al momento della sua apertura in un browser: quale font usare per il testo, quale colore, quali dimensioni avranno i caratteri, quando spazio lasciare sui margini, quale immagine caricare come sfondo della pagina, se ce ne deve essere una, e così via. Tutto ciò che rende una pagina bella (o brutta) da vedere, in pratica, raccolto e organizzato in un file a parte, che dovrà poi essere aggiunto alla pagina. Ma non è sempre stato così. Alla fine del ventesimo secolo, quando il web era giovane, libero e selvaggio, gli animi erano coraggiosi, gli uomini erano veri uomini, le donne erano vere donne e le piccole creature pelose di Alpha Centauri erano vere piccole creature pelose di Alpha Centauri (per citare la Guida Galattica), stile e contenuto erano mischiati assieme, in una poltiglia difficilmente distinguibile. Nella pancia delle pagine, ossia tra i tag <body> e </body>, il testo da mostrare sullo schermo era intervallato da tag, che dicevano ai browser come dovesse essere formattato questo testo: c’erano tag che definivano il tipo di font, la sua dimensione, il suo colore, ma anche il colore dello sfondo, la larghezza e il colore delle caselle di una tabella, e così via. Un periodo in cui i web designer finivano spesso vittime di tremende crisi depressive e affondavano negli abissi bui dell’alcolismo, insomma, colti dallo sconforto mentre cercavano di annidare una tabella nell'altra, nel vano tentativo di impaginare il testo in modo decente. A risolvere questo pasticciaccio brutto è arrivato il CSS. Il CSS ha portato con sé una nuova e più razionale filosofia di progettazione, per le pagine web: una separazione netta tra il contenuto e lo stile. Nella pancia della pagina, ossia tra i tag <body> e </body>, doveva restare soltanto il contenuto, cioè testo, immagini e altro: in pratica, il cosa vediamo. Tutto ciò che serviva a definire il come lo vediamo, invece, doveva essere spostato altrove: nella parte alta della pagina, ossia tra i tag <head> e </head>, o meglio ancora in un file separato, da caricare assieme alla pagina. In questo file separato potevamo elencare i vari tag utilizzati nella pagina, assieme alle regole di stile da applicare al contenuto di quei tag; in fase di caricamento, il browser avrebbe controllato di volta in volta le regole, per applicarle alla visualizzazione dei tag, a mano a mano che li incontrava. Il file con la lista di tag e di regole è il foglio di stile CSS. La progettazione di siti web ha poi proseguito su questa strada, aggiungendo un terzo elemento, cioè il funzionamento: se il semplice HTML contiene il cosa vediamo e il CSS si occupa del come lo vediamo, il JavaScript si occupa di far fare qualcosa a quella pagina. Siccome al momento gli EPUB supportano il JavaScript in teoria, ma in pratica siamo ancora abbastanza lontani dal poterlo usare decentemente (per fortuna, aggiungo io, ma questo è solo un parere personale), possiamo ignorare questo elemento e occuparci solo degli altri due. Primo problema: come aggiungere un foglio di stile CSS a una pagina? Le possibilità sono due: scriverlo direttamente nella pagina, oppure scriverlo in un file a parte e poi dire alla pagina di caricare questo file. Il risultato finale sarà lo stesso, in entrambi i casi, ma le due soluzioni non sono equivalenti, sul piano del lavoro necessario: la scelta più razionale è quella di creare un file a parte, con tutto il CSS necessario per il nostro libro, e poi inserire un link a quel file in ogni pagina del libro, per cui vi invito caldamente a seguirla. Se poi un capitolo avrà bisogno di formattazioni particolari, perché magari contiene porzioni di testi in un altro alfabeto, allora potrete aggiungere una piccola estensione al CSS direttamente in quella pagina, per modificare le regole generali e adattarle al contesto. Ipotizziamo allora che abbiate deciso di utilizzare un file esterno, in cui mettere tutto il CSS necessario, e lo abbiate salvato come “Stile.css” nella cartella Styles del vostro EPUB. Come fare ad aggiungerlo a ogni pagina? Con un poco di olio di gomito e di pazienza. Con Sigil, apriamo a una a una le pagine del nostro EPUB (ossia quelle contenute nella cartella Text) e passiamo alla Vista Codice. Nella parte alta di ogni pagina, cerchiamo il tag <head> e, al suo interno, il tag <title>: una volta localizzato, nello spazio tra </title> e </head> inseriamo un codice di questo tipo <link href="../Styles/Stile.css" rel="stylesheet" type="text/css" /> Questa riga dirà al lettore di caricare un determinate file, ogni volta che deve visualizzare questa pagina; lo informerà inoltre sulla posizione in cui si trova il file (la parte che segue l’attributo href) e specificherà anche a cosa serva il file (la parte che segue l’attributo rel). Ovviamente, se il nostro foglio di stile ha un nome diverso, al posto di “Stile.css” dovremo scrivere il nome corretto del file, qualunque esso sia. Se la pagina non è in XHTML, ma in HTML, il codice sarà quasi identico, ma un poco più corto: <link b="" gt="" href="../Styles/Stile.css" rel="stylesheet"> Per sapere se la pagina sia in XHTML o in HTML, è sufficiente guardare la sua estensione, che ci è indicate chiaramente da Sigil. Utilizzare un file esterno è la scelta più semplice e razionale, per risparmiarci fatiche inutili, ma niente e nessuno ci vieta di inserire il CSS direttamente nella pagina. In questo caso, nello spazio tra </title> e </head> dovremo aggiungere due tag, ossia <style type=”text/css”> e </style>: fra i due tag scriveremo poi tutte le regole che vogliamo. Adesso che sappiamo come aggiungere un foglio di stile CSS alla nostra pagina, dovremo preoccuparci di preparare la nostra pagina ad accogliere il CSS, ottimizzandola cioè per la formattazione, ed è ciò che vedremo la prossima volta. Conclusa questa fase introduttiva, cominceremo a scrivere regole in CSS, per formattare la nostra pagina.

Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

Dossier Paperblog