Guida al CSS per ebook

Di Adriano Marchetti

Il CSS è il principale linguaggio di programmazione per realizzare la grafica di siti e applicazioni web, ma è anche la prima scelta quando si tratta di impaginare un ampio settore di formati ebook.
Questa guida presenta una semplice introduzione alle regole principali, per impaginare ebook in formato EPUB, ma le stesse regole sono applicabili anche a e-book destinati alla pubblicazione sul Kindle.

• Lingua: Italiano
• Editore: Adriano Marchetti
• Data di uscita: 17 mag 2015
• ISBN: 9786050380064

Anteprima del libro

leggerete.

0 Presentazione

Quella di e-book è una etichetta piuttosto ampia, sotto cui è stato raccolto più o meno di tutto, nel corso degli anni. In un primo tempo, li termine e-book è stato utilizzato per indicare qualsiasi tipo di documento in formato elettronico: un file scritto col Blocco Note era uno e-book, un documento realizzato col vostro elaboratore di testi preferito (Word, ad esempio) era uno e-book. Più avanti, il suo uso si è ristretto e ha cominciato a indicare solamente quei documenti redatti in modo da assomigliare a un libro vero e proprio: a farla da padrone, in questo caso, è stato il formato PDF, proprio per la sua struttura simile a un libro stampato (ovviamente, essendo il PDF nato come formato per la stampa) e per la sua relativa universalità.

Il PDF è tuttora un formato estremamente diffuso, quando si parla di e-book, ma al suo fianco si sono affermati altri tipi di e-book, progettati in modo diverso. Se il PDF è rigido e immutabile e deve avere sempre lo stesso aspetto e la stessa impaginazione, qualunque sia il dispositivo di lettura e qualunque sia la dimensione dello schermo, nuovi formati hanno ribaltato questa filosofia: lo e-book non deve essere monolitico, ma deve adattarsi allo schermo e al dispositivo. Uno e-book deve poter essere comodo da leggere sia sullo schermo di un computer, sia su quello assai più piccolo di uno smartphone, senza costringerci a scorrere di continuo la pagina in orizzontale, per poter vedere una riga per intero. Lo EPUB è questo, una forma di e-book fluida o liquida, per utilizzare un aggettivo molto abusato negli ultimi anni.

Lo EPUB è un formato per e-book molto simile a una pagina Web: a seconda della dimensione dello schermo, il suo contenuto si distribuisce in modo diverso, per adattarsi allo spazio. Di fatto, un EPUB è una pagina Web, essendo costituito da file HTML o XHTML, proprio come lo è un qualsiasi sito. Proprio come una pagina Web, per la grafica e l’impaginazione si appoggia a un linguaggio separato, cioè il CSS. In questa guida parlerò proprio di come utilizzare il CSS, per impaginare uno e-book, in formato EPUB: non conterrà dunque una guida a tutte le regole del CSS, ma solo a quelle che servono per realizzare la grafica di un libro.

Perché proprio il formato EPUB? Perché è quello che ha, al momento, la più ampia diffusione. Uno EPUB può essere letto più o meno da qualsiasi tipo di dispositivo, dagli smartphone, ai tablet, ai computer, con una sola eccezione (piuttosto grande, in effetti): il Kindle. Il Kindle non supporta il formato EPUB, ma supporta un formato molto simile: una versione proprietaria del formato MOBI. Se il vostro obiettivo è realizzare e-books per il Kindle, potete seguire ugualmente questa guida e creare prima di tutto uno EPUB, impaginato come volete voi: una volta fatto questo, potrete usare un programma gratuito come Calibre, per convertirlo in un formato leggibile dal Kindle, ossia il formato MOBI, oppure il formato AZW3. La conversione è mediamente indolore, dato che questi formati sono quasi uguali allo EPUB, ma con una avvertenza: il formato MOBI non supporta molte delle proprietà più avanzate del CSS. Lo AZW3, invece, ne supporta la maggior parte, ma al momento pare avere un brutto rapporto coi colori.

Per lavorare su uno EPUB, tutto ciò che vi serve è Sigil, un altro programma gratuito, che potrete utilizzare sia per creare uno EPUB da zero, sia per modificare uno EPUB già esistente. Va detto, però, che è un programma alquanto spartano e le sue facilitazioni, in fase di scrittura, sono solo lievemente migliori rispetto a quelle offerte dal Blocco Note di Windows, sia per quanto riguarda il testo normale, sia per quanto riguarda il CSS: potete dunque scrivere un romanzo e curarne la impaginazione, con Sigil, ma scordatevi qualsiasi tipo di aiuto più avanzato, come suggerimenti o correzioni automatiche.

Detto questo, buona lettura e buon lavoro!

1 Introduzione: CSS e HTML

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