Prima di cominciare a vedere come impaginare uno e-book, è opportuno spendere un certo tempo a esaminare cosa sia il CSS e che rapporto abbia con lo HTML. In particolare, è bene ripassare brevemente quale sia un buon sistema per strutturare le nostre pagine, così da facilitarci la vita, quando dovremo poi impaginarle col CSS. Argomento del primo capitolo sarà appunto questo: cosa sia il CSS e come farlo convivere con lo HTML nel migliore dei modi, in un nostro e-book. Se conoscete già lo HTML e siete confidenti di non avere problemi con la struttura di uno e-book, saltate pure al capitolo successivo.

1-1 Il CSS nel Web e negli e-books

Cascading Style Sheets, per gli amici CSS, è un linguaggio nato per occuparsi della componente grafica di una pagina Web e mantenere separato l’aspetto di un documento dal suo contenuto. È un linguaggio complementare allo HTML e si dividono le sfere di influenza da buoni amici, nella maggior parte dei casi: lo HTML costruisce lo scheletro di una pagina, mentre il CSS ne descrive e determina l’aspetto. Aggiungiamo poi il JavaScript, che fa funzionare una pagina, e avremo ottenuto un qualsiasi sito o applicazione Web di oggi.

Non è sempre stato così. Al principio c’era lo HTML, un linguaggio utilizzato per dare una struttura a una pagina di testo: attraverso una serie di tag, ossia lettere o sequenze di lettere racchiuse tra < e >, lo HTML assegnava un determinato valore a una porzione di testo. Un tag serviva a indicare che quella frase era un titolo, un altro a indicare che era un sottotitolo, un altro ancora indicava che un insieme di frasi costituisce un paragrafo, e così via. Fin qui, nulla di strano. Alcuni tag, però, non si limitavano a strutturare il testo, ma fornivano anche indicazioni su come il testo dovesse essere rappresentato: avevamo tag per indicare il tipo di font da utilizzare, tag per la dimensione dei caratteri, tag per il colore del testo o della pagina, e tag così orribili che non possono neppure essere menzionati in un testo, per proteggere le giovani menti dagli incubi addormentati nel passato.

Alla fine del ventesimo secolo, dunque, 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, stile e contenuto erano mischiati assieme, in una poltiglia difficilmente distinguibile. La pagina era un guazzabuglio di testo, codice per definire la struttura del testo e codice per definire l’aspetto della pagina, il tutto compresso in un unico file. Se qualcuno poi voleva impaginare un documento su più colonne, o usare una struttura leggermente diversa dal normale, il solo sistema a sua disposizione era di rinchiudere tutto quanto in una tabella, al cui interno spesso si annidavano altre tabelle più piccole.

Il CSS nasce come soluzione a questo problema. Lo HTML era ed è tuttora un buon linguaggio, per conferire una struttura a una pagina, ma era ed è un pessimo linguaggio per imporle un aspetto; inoltre, utilizzando lo HTML anche per lo stile significava dover mantenere tutto quanto in uno stesso file, con conseguenze alquanto dolorose quando si doveva modificare o aggiornare una pagina. Lo HTML è un linguaggio per strutturare una pagina, non per decorarla: l’introduzione del CSS gli ha così permesso di recuperare la propria natura originaria, con un sospiro di sollievo da parte di tutti gli sviluppatori di siti Web.

Il CSS permette di scorporare con eleganza il contenuto dalla forma. Nel file HTML inseriamo il contenuto della pagina e lo strutturiamo coi vari tag; in una sezione a parte, molto spesso su un altro file con estensione .CSS, descriviamo in una sequenza di regole il modo in cui la pagina e il suo contenuto dovranno essere mostrati ai visitatori. Se con lo HTML indico che una certa frase dovrà essere il titolo della pagina, col CSS indicherò invece il colore che il testo avrà, la sua dimensione, i margini da lasciare, eccetera. Se domani deciderò di cambiare il colore del titolo, non dovrò toccare la pagina, ma modificare soltanto quella regola CSS che descrive il colore del titolo.

Nel corso degli anni si è verificato un tentativo di passare dallo HTML allo XHTML, per strutturare la pagina, ma questo non ha comportato alcuna differenza per il CSS. Lo XHTML è stata una non riuscita evoluzione dello HTML, con alcuni cambiamenti nel modo in cui i tag dovevano essere scritti e utilizzati, ma di fatto possiamo considerarli come uno stesso linguaggio, almeno per quanto riguarda gli e-books. A titolo informativo, lo XHTML può oggi essere considerato un esperimento fallito, dato lo sviluppo del Web è ritornato allo HTML, col tanto decantato HTML5, e lo XHTML sembra destinato al ripostiglio della storia. Staremo a vedere. In ogni caso, HTML o XHTML che sia, la funzione del CSS non cambia: è e resta sempre il linguaggio per descrivere l’aspetto della pagina ed è su questo che ci concentreremo nelle prossime pagine.

Cominciamo intanto col vedere che relazione abbia il mio discorso introduttivo con la realizzazione di e-book in formato EPUB. È molto semplice.

Un e-book in formato EPUB può essere considerato, di fatto, come un sito Web inscatolato. Le sue varie pagine sono files in formato HTML o XHTML, ossia lo stesso formato utilizzato da almeno un paio di decenni per i siti Web, mentre la grafica del libro è determinata da un foglio di stile in formato CSS. Qualunque sia il metodo che abbiamo deciso di impiegare per la realizzazione del nostro e-book, la cosa più importante è che ricordiamo di mantenere separati il contenuto del libro e il suo aspetto: le pagine dovranno contenere soltanto il testo, oltre ai tag che ne descrivono la struttura, e tutto ciò che concerne la grafica e l’impaginazione dovrà essere trasferito in un file a parte, con estensione .css, ossia il foglio di stile (ricordiamo che le due S della sigla CSS significano proprio Style Sheets, cioè fogli di stile).

Uno EPUB è dunque composto da almeno due elementi, indispensabili: i files che contengono il testo e il file che contiene lo stile. Di solito, i primi sono raccolti nella cartella Text e il secondo è nella cartella Styles. Possono esserci anche altri elementi, come immagini, font, video, audio o altro, e molto spesso ci saranno, ma gli unici elementi indispensabili sono appunto il testo e lo stile. In altri termini, è proprio come succede in un normale libro stampato: testo e impaginazione sono lo stretto indispensabile, tutto il resto è un extra. Nel caso di uno e-book, la impaginazione è costruita usando il CSS ed è sulle sue regole che ci concentreremo per il resto della guida.

1-2 La struttura di una pagina HTML

Per poter utilizzare al meglio il CSS e impaginare uno e-book così come vogliamo noi, una conoscenza minima dello HTML è necessaria. Non è richiesto di saper fare grandi cose, ma solo di sapere come strutturare una pagina, per potervi poi applicare le regole di stile nel modo più efficiente possibile. Vediamo dunque alcune nozioni basilari.

Una pagina HTML, ridotta ai minimi termini, è strutturata così:
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Come possiamo vedere, tutto quanto è racchiuso tra due tag <html> e </html>. Un tag è una sigla racchiusa tra < e > e nella maggior parte dei casi si presenta in coppia: un tag di apertura e un tag di chiusura, che è usuale al tag di apertura ma utilizza anche una / davanti al nome. <html> è dunque il tag di apertura della pagina e </html> è il suo tag di chiusura: il primo tag informa il browser che tutto il testo seguente è in formato HTML e dovrà così essere interpretato, mentre il secondo tag indica al browser che la pagina è finita e può andare in pace. Se quasi tutti i tag compaiono in coppia, uno di apertura e uno di chiusura, alcuni non seguono questa regola e sono usati da soli: è il caso, ad esempio, del tag <br>, che segna una interruzione di linea, o del tag <img>, che segna la presenza di una immagine. A titolo informativo, una delle più visibili differenze tra HTML e XHTML è che lo XHTML inserisce uno / in coda ai tag singoli: <br> diventerà dunque <br /> e <img> diventerà <img />. Ma torniamo alla struttura della pagina.

I tag <head> e </head> racchiudono una parte della pagina, che non è rappresentata sullo schermo, ma che di solito contiene informazioni extra: fra queste informazioni extra, troviamo il tag <title>, che indica il titolo da scrivere nella parte alta del browser, ma soprattutto troveremo la posizione del foglio di stile. Di questo parleremo nel prossimo capitolo.

Tutto ciò che è racchiuso tra i tag <body> e </body>, infine, è il contenuto vero e proprio della pagina. Nel caso del nostro e-book, lì si troverà il testo di un capitolo, ad esempio: caricandolo, il dispositivo di lettura farà scorrere tutto il contenuto della pagina, lo disporrà sullo schermo in base alla struttura che gli abbiamo dato e procederà poi con l’applicazione di tutte le regole di stile, per ottenere così la pagina finale. Come è facile da intuire, dunque, il nostro lavoro di strutturazione di uno e-book sarà concentrato tra questi due tag.

In una normale pagina web, il contenuto può diventare alquanto complicato: svariati elementi possono essere distribuiti in modo apparentemente casuale, per poi spostarli in varie zone della pagina attraverso le regole del CSS, distribuendo ad esempio il testo lungo due o tre colonne, oppure aggiungendo un menu nella parte alta della pagina, estraendo citazioni ed evidenziandole ai lati del testo normale, e così via. Nel microcosmo di uno e-book, invece, molti di questi problemi non si pongono e possiamo concentrarci su un sottoinsieme del CSS, ossia sullo stretto indispensabile per impaginare un libro. In teoria, certo, potremmo anche diventare creativi e pretendere di inserire nel nostro EPUB tutte le regole di layout, che abbiamo imparato per i siti Web, ma ci sono ottime probabilità che i risultati non saranno quelli previsti. Un dispositivo di lettura non è un browser, per quanto siano molto simili, e non supporta tutto ciò che è supportato da un browser moderno: potremmo sprecare giorni a progettare una fantastica grafica a tre colonne e poi scoprire che funziona soltanto sul nostro computer. Inoltre, un normale e-book è spesso letto su schermi di piccole dimensioni: è meglio accantonare un poco del nostro sacro fuoco creativo e pensare a chi, ad esempio, leggerà il nostro libro su uno smartphone. La semplicità paga.

Manteniamoci dunque sull’essenziale e ricordiamo sempre che stiamo lavorando su un libro, non sul manifesto pubblicitario di un circo. Apriamo la nostra pagina con un titolo e poi procediamo con la lunga muraglia di testo, su una sola colonna: è lo schema seguito da quasi tutti i libri ed è uno schema che funziona da secoli. È anche uno schema familiare e l’uomo è un animale abitudinario, che la cosa ci piaccia o meno. Se vogliamo sorprendere il nostro lettore, sorprendiamolo col contenuto del libro, non con la sua struttura.

Un esempio minimalista di pagina potrebbe essere questo:
<body>
  <h2>Titolo del capitolo</h2>
  <p>Contenuto del primo paragrafo</p>
  <p>Contenuto del secondo paragrafo.</p>
  <p>Contenuto del terzo paragrafo.</p>
</body>

Come potete vedere, è il minimo indispensabile: il titolo, seguito da una serie di paragrafi. Non ci interessa sapere che font utilizzare, quale dimensione assegnare alle lettere, quale colore, quale tipo di allineamento e così via: di questo ci occuperemo poi, col CSS. La prima cosa da fare è assegnare alla pagina una buona struttura, per semplificare il nostro lavoro successivo.

Sempre per semplificare il lavoro futuro, è bene considerare anche un altro aspetto dello HTML, che presumibilmente avrete già colto: la sua struttura ad albero. O almeno, albero è il termine che è utilizzato di solito per descriverne la struttura, anche se in realtà non assomiglia molto a un albero in senso botanico, a meno che a quel’albero non sia accaduto qualcosa di molto brutto o non sia cresciuto accanto a una discarica abusiva di rifiuti tossici. La struttura è in effetti più simile un albero genealogico.

Un tag inserito all’interno di un altro tag ne è considerato “figlio” (o figlia, se preferite). In una struttura
<body>
  <h2>Titolo</h2>
</body>
, dunque, il tag <body> è il genitore e il tag <h2> è il figlio. In una struttura leggermente più complessa, del tipo
<body>
 <h2>Capitolo 1</h2>
 <p>Questo è il contenuto del nostro breve capitolo, anche se è <strong>solo</strong> un esempio.</p>
</body>
, il tag <body> ha due figli, ossia i tag <h2> e <p>, in quanto inseriti direttamente nel tag <body>. A propria volta, il tag <p> possiede un figlio, ossia il tag <strong>. Il nostro albero genealogico si può ramificare parecchio, anche in una pagina abbastanza semplice, ed è opportuno avere sempre una idea di quali siano i rapporti tra i vari tag della pagina, così da sapere chi sia a influenzare chi.

Questa nota, che al momento può apparire criptica, diventerà invece molto più chiara, quando parleremo delle regole del CSS, perché spiega il significato della C: Cascading, ossia “a cascata”. Le regole del CSS che assegniamo a un tag genitore, infatti, sono assegnate in automatico anche a tutti i suoi tag figli (e ai figli dei figli, e così via). Se assegniamo una regola al tag <body>, tutti i tag contenuti in <body> riceveranno la stessa regola: la regola, dunque, discende a cascata dal tag superiore al tag inferiore. Ovviamente, potremo poi assegnare a un figlio una regola che alteri o contraddica la regola ricevuta in eredità, ma di questo parleremo più avanti.

1-3 I tag più usati

Prima di chiudere con lo HTML e passare al CSS, vediamo rapidamente quali siano i tag che ci ritroveremo a usare più spesso, per strutturare le nostre pagine. È possibile che ve ne dovrete preoccupare molto di rado, a seconda del programma che utilizzate per realizzare il vostro EPUB, ma è sempre bene conoscerli, nel caso vi troviate a dover operare interventi di emergenza sul codice, per riparare qualcosa che i test di convalida vi hanno segnalato come sbagliato.

I tag da <h1> a <h6> sono utilizzati per indicare i titoli del vostro libro, in ordine di importanza. <h1> è solitamente il titolo dell’intero e-book, mentre gli altri ne suddivideranno il contenuto in sezioni, capitoli, sottocapitoli e così via, fino a esaurimento. Non dovete usarli tutti: al contrario, molto spesso vi troverete a usarne due, tre al massimo. L’importante è utilizzarli correttamente e in ordine numerico: partite da <h1>, per il titolo che racchiuderà l’intera opera, e scendete via via, per le sezioni minori. La maggior parte dei programmi utilizzerà questi tag, per generare l’indice del vostro libro, per cui è fondamentale che li adoperiate nella giusta sequenza.

Il tag <p> serve a racchiudere un paragrafo di testo: di base, lascia anche una riga di spazio, tra un paragrafo e il successivo, ma questo lo potete modificare usando il CSS. In un normale testo in prosa, tutti i paragrafi sono contraddistinti da questo tag.

Il tag <br> è utilizzato per andare a capo, spesso all’interno di un paragrafo. Non usatelo per lasciare un certo numero di righe tra una sezione e l’altra: questo è compito del CSS.

Il tag <div> è un tag che, di per sé, non possiede alcun valore, ma potrebbe diventare il vostro miglior amico. Il suo uso tipico consiste nel dividere una pagina in più sezioni, ognuna delle quali è racchiusa in un tag <div>: in questo modo, potrete assegnare uno stile particolare a ogni sezione, attraverso una apposita classe CSS, senza toccare le altre. Vedremo nel prossimo capitolo cosa siano le classi.

Il tag <span> funziona grossomodo come il tag <div>, ma serve a isolare una o più parole all’interno di una frase e assegnare loro uno stile particolare, sempre attraverso una classe CSS. Se il tag <div> permette di operare su larga scala, il tag <span> ci consente interventi chirurgici su piccole porzioni di testo.

I tag <b> e <i> sono tag che raramente inserirete a mano, ma di solito saranno inseriti per voi dal programma che state utilizzando. Sono anche una eccezione, nonché un celacanto dello HTML, in quanto superstiti di ere passate, prima che R’lyeh fosse coperta dalle acque: a differenza di quasi tutti i tag che utilizziamo oggi, <b> e <i> non servono a strutturare una pagina, ma ad assegnare uno stile a una porzione di testo. <b> rende il testo in grassetto e <i> lo rende in corsivo. Anche se questi tag possiedono già un proprio stile, li potrete comunque modificare col CSS, se volete. A titolo informativo, esistono altri due tag, creati per soppiantarli, ma non hanno attecchito bene, finora: sono <strong>, sostituto di <b>, e <em>, sostituto di <i>. C’è una certa differenza tra la funzione dei tag vecchi e quella dei tag nuovi, ma per questa vi rimando a manuali sullo HTML, che sapranno darvene una spiegazione più esaustiva.