Modificare ebook con Calibre

Calibre è un programma gratuito e libero, già famoso come strumento per la conversione e in generale la gestione degli ebook, tanto da essere stato etichettato in più occasioni come lo iTunes degli ebook. Che questo sia da intendersi come un complimento o un insulto è aperto alla vostre interpretazioni e mi asterrò dal proporvi la mia, che propende per al seconda.
Etichette a parte, Calibre è usato soprattutto per convertire un ebook da un formato all’altro, nonché per fungere da biblioteca virtuale e, se si vuole, anche per trasferire testi dal computer a un qualsiasi lettore esterno, e viceversa. Le sue funzioni, però, non si esauriscono qui. Tra quelle introdotte più di recente (anche se quanto di recente dipende dall’ultima volta che lo avete aggiornato: non è che sia proprio una novità dell’ultima ora, ecco) vi è la possibilità di modificare ebook. Alcuni formati di ebook. E per “modificare” non intendo solo convertirli, ma proprio editarne il contenuto, come si può fare con un qualsiasi documento all’interno di un elaboratore di testi come Word o Writer.
La modifica di ebook all’interno di Calibre è disponibile soltanto per due formati, che sono poi anche quelli che ha più senso modificare con questo programma: EPUB e AZW3. Il primo formato dovrebbe essere noto a tutti ed è quello utilizzato dalla maggior parte dei dispositivi di lettura che non siano il Kindle. Il formato AZW3, invece, potrebbe suonare più esotico a molti, ma di fatto è una versione riveduta e corretta del MOBI, ossia il formato base per il suddetto Kindle.
La nuova funzione di modifica la trovate facilmente nella barra degli strumenti di Calibre ed è la penultima voce in fondo a destra:

Selezionate lo ebook da modificare, cliccate sulla icona e si aprirà la finestra di modifica:

Come potete vedere, non è poi molto diversa da quella di Sigil o da quella di un qualsiasi altro elaboratore id testi ridotto all’osso o quasi. Non aspettatevi funzioni speciali o particolari, dunque: è uno strumento che vi permette di modificare il codice di uno ebook, ma senza campanelli e lucine colorate. Almeno per adesso, poi in futuro si vedrà.
Non so quanti di voi lo vorranno usare per modificare un file EPUB, dato che Sigil permette già di fare la stessa cosa e in modo più completo (ebbene sì, è ancora più spartano ed essenziale di Sigil, che lo crediate oppure no), ma può essere utile per modifiche rapide e immediate, senza bisogno di uscire dal programma che state utilizzando. Ammesso che il programma che state utilizzando sia Calibre, ovviamente. Molto più interessante, invece, è la possibilità di modificare ebook per il Kindle.
Come ho detto, il secondo formato che potete modificare utilizzando questo strumento è lo AZW3. Il formato AZW3, anche se non proprio del tutto, è quasi completamente identico al MOBI. Da un certo punto di vista. Da un altro punto di vista è un MOBI arricchito, per permette di andare al di là di una grafica in bianco e nero e striminzita, che è la sola grafica concessa dal MOBI. Funziona col Kindle e la conversione dal MOBI è quasi indolore: molto spesso non si nota neppure la differenza, almeno sul piano grafico.
Cosa significa tutto questo? Significa che, se volete modificare uno ebook in formato MOBI, lo potete convertire prima in AZW3 e poi modificare all’interno di Calibre. Il che è più o meno come convertirlo in EPUB e poi modificarlo, d’accordo, ma la distanza tra i due formati è minore e molto probabilmente non avrete bisogno di una seconda conversione a lavori ultimati, per poter leggere il risultato sul vostro Kindle, dato che il Kindle apre senza problemi il formato AZW3. A meno che il vostro Kindle non sia alquanto datato, nel qual caso potrebbero anche esserci problemi.

Sigil 0.8.0, cosa cambia

Sigil, il programma per creare e modificare e-book in formato EPUB, è ancora vivo e, dopo quasi un anno di silenzio, finalmente ne abbiamo una nuova versione, la 0.8.0, per l’appunto. Non che ci siano stati grandi cambiamenti, almeno in superficie, ed è probabile che grandi cambiamenti non ci saranno neppure in un futuro prossimo, dato il ritmo con cui il suo sviluppo procede: al momento, Sigil è un programma sviluppato e mantenuto, di fatto, da una sola persona, il che non offre grandi prospettive di aggiornamenti rapidi. Ma vediamo cosa sia cambiato.

Prima di tutto, è cambiato il sito da cui poter scaricare gratuitamente Sigil. Le nuove versioni, per Windows, GNU-Linux e Macintosh, sono scaricabili da GitHub, ossia da questa pagina, invece che dal vecchio sito di Google Code. Non proprio un cambiamento radicale, ma la scelta della versione giusta potrebbe risultare meno chiara del passato, considerata la discutibile grafica della pagina. Leggete con cura il testo biancastro, sullo sfondo verde dei pulsanti, e dovreste poter reperire la versione che vi serve. Dopo aver visto come procurarci il programma, passiamo alle novità nel suo funzionamento. Che di fatto è una sola.

Lasciano da parte le correzioni di alcuni errori, presenti nella precedente versione 0.7.4, la grande novità di Sigil 0.8.0 è la introduzione di una infrastruttura, che supporta l’utilizzo di plugin in questo programma. Più o meno come quella che ha Calibre, giusto per dare una idea. In altri termini, è possibile programma re e aggiungere nuove funzioni a Sigil, attraverso un sano fai-da-te informatico. Per chiunque abbia le competenze necessarie, è ovvio.

Al momento, il supporto di plugin è ancora parecchio limitato, sia perché di fatto è disponibile un solo linguaggio di programmazione, per realizzare i plugin, sia perché i plugin stessi non esistono: se li volete, dovete programmarveli voi, oppure modificare plugin già esistenti per programmi analoghi. Piuttosto che niente, è pur sempre meglio piuttosto.

Nello specifico, l’unico linguaggio di programmazione supportato, per realizzare plugin, è il Python, sia nella versione 2 che nella versione 3 del linguaggio. Una scelta che mi entusiasma moltissimo, dato che trovo la programmazione in Python piacevole come una colonscopia, ma questo è solo un parere personale. In apparenza, molti altri apprezzano invece il linguaggio: buon per loro.

Gusti a parte, la scelta è motivata dal fatto che il Python è un linguaggio già ampiamente usato per realizzare plugin in altri programmi, per cui non dovrebbe essere troppo difficile riciclare e modificare plugin già esistenti, adattandoli alle necessità di Sigil. In particolare, pare che i plugin di Calibre siano riciclabili in Sigil con poche modifiche, dato che la struttura di base è la stessa per i due programmi. O almeno, così sostiene la persona che si occupa dello sviluppo di Sigil e chi sono io per contraddirlo?

Plugin a parte, per il resto non ci sono cambiamenti nel funzionamento di Sigil: tutto ciò che avevo detto per la precedente versione rimane valido anche per questa. Anche la sua interfaccia non è cambiata, a parte l’aggiunta di una nuova voce di menu: Plugin, per l’appunto, e dovreste poter immaginare a cosa serva. Vedremo se, dopo questa versione, altre ne arriveranno, con novità più consistenti e, magari, miglioramenti più consistenti. Considerato il ritmo, non la aspetterei prima della prossima estate, ma spero di esserne smentito.

Un semplice modello di EPUB per romanzi

Avevo già scritto, in passato, una guida su come realizzare un e-book utilizzando solo Sigil e tanta buona volontà. Ricollegandomi in parte a quanto dicevo in quella occasione, e alla luce di diversi commenti ricevuti in vari articoli su EPUB e problemi di impaginazione, ho preparato un semplice e basilare modello di EPUB, che può essere liberamente utilizzato sia come fonte di ispirazione, sia come scheletro per un vostro lavoro. Il modello mostra un modo molto spartano, in cui il contenuto di un e-book può essere diviso, fornendo anche un esempio di foglio di stile con alcune formattazioni di base, che si ritrovano spesso in romanzi e altri tipi di testo.

Come usarlo? Dipende da cosa ne volete fare. Potete aprirlo con Sigil e osservarne la struttura, alternando la Vista Libro e la Vista Codice, così da avere una idea sia del modo in cui il testo apparirà, sia di come sia composto il suo scheletro, oppure potete utilizzarlo come punto di partenza per il vostro lavoro, incollando il vostro testo all'interno delle pagine, assegnando alle varie parti le classi CSS più indicate, modificando gli attributi e i valori delle suddette classi CSS, e così via. Con un consiglio: se scegliete di copiare il testo da un documento DOC o DOCX, ossia da un documento scritto con Word, non copiatelo direttamente nello EPUB, altrimenti porterà con sé tutte le sozzerie aggiunte da Word. Copiate il testo dal documento di Word, incollatelo in una pagina del Blocco Note, copiatelo di nuovo dal Blocco Note e incollatelo nello EPUB: in questo modo il testo sarà filtrato a dovere e potrete ricostruirne l’impaginazione attraverso il CSS, senza dovervi preoccupare delle spiacevoli eredità lasciate da Word. Si perderanno anche corsivi e grassetti, è vero, e li dovrete aggiungere di nuovo con Sigil, ma il risultato finale sarà complessivamente migliore.

A ogni modo, guardiamo cosa ci sia in questo modello di EPUB.

Se lo apriamo con Sigil, vedremo che le cartelle contenenti materiale sono solo due: la cartella Text e la cartella Styles. Nessuno vi vieta di utilizzare anche le altre cartelle, ma queste sono le uniche due  indispensabili, se vogliamo creare uno e-book: text è la cartella che contiene il testo del libro, come suggerisce il nome, e Styles è la cartella che contiene le regole della sua impaginazione. Immagini, font e altro possono essere aggiunti a piacimento, ma non li considero elementi basilari.

La cartella Text contiene cinque files, così disposti:

Cover.xhtml

Titolo.xhtml

Copyright.xhtml

Testo.xhtml

Biografia.xhtml

Tutti questi files possono essere rinominati a piacimento: il nome attuale serve soltanto a fornire una indicazione dei rispettivi ruoli. Anche l’ordine con cui appaiono può essere modificato a piacimento, se quello attuale non è adatto o soddisfacente. Infine, ognuno di essi può essere rimosso, se lo e-book che stiamo preparando non possiederà quel componente; se invece lo e-book possiederà componenti extra come note e bibliografia (probabile), sarà sufficiente aggiungere un file html vuoto, usando l’apposita voce di Sigil, e trascinarlo in alto o in basso nella lista delle pagine, per posizionarlo dove lo vogliamo.

Cover.xhtml è al momento una pagina bianca. Come suggerisce il nome, è qui che inseriremo l’immagine di copertina del nostro e-book, se abbiamo in programma di metterne una. Con Sigil, è sufficiente cliccare sul pulsante Inserisci File, selezionare la nostra immagine e dare un Ok. Opzionalmente, possiamo anche cliccare col tasto destro del mouse su questo file, nel Navigatore della colonna sinistra di Sigil, e scegliere dal menu contestuale Aggiungi Semantica -> Copertina.

Titolo.xhtml è la pagina in cui possiamo inserire il titolo del nostro e-book, il nome del suo autore e, opzionalmente, il logo della casa editrice o cose simili. Se non abbiamo inserito una copertina, sarà questa pagina a farne le veci.

Copyright.xhtml è una pagina in cui inserire le note di copyright (come suggerisce il nome) e altri elementi simili. In questo caso, a titolo di esempio, io ho inserito un modello di nota di copyright, una nota sulla copertina (titolo della immagine di copertina, se esistente, ed eventuali credits) e, in coda, una tipica nota che accompagna molte opere di narrativa, cioè il tipico “ogni riferimento a cose, fatti o persone realmente esistenti” eccetera eccetera.

Testo.xhtml è la pagina che contiene il grosso del nostro e-book. Indicativamente, per semplificare sia la scrittura che la lettura  sui vari dispositivi,è utile spezzettarla in tante pagine quanti sono i capitoli del libro (avremo quindi Testo1, Testo2, Testo3, eccetera), ma non è obbligatorio: se a voi piace di più, potete usare un solo file monolitico, in cui travasare tutta la vostra opera. Nel foglio di stile CSS che accompagna lo e-book ho inserito alcune formattazioni di base: rientro per tutti i paragrafi a eccezione del primo, testo giustificato, primo paragrafo del capitolo con lettera ingrandita, eccetera. Uno sguardo alla Vista Codice vi dirà subito come utilizzare le classi CSS che ho inserito.

Biografia.xhtml, infine, è la pagina che conterrà la biografia dell’autore, una sezione su cui non mi pare ci sia molto altro da aggiungere.

Come vedete, non ho inserito una pagina con l’indice dello e-book, perché di questo si occupa già Sigil: la tavola dei contenuti (ToC) può essere creata in un paio di secondi, purché vi siate ricordati di utilizzare correttamente i tag di intestazione (i tag da <h1> a <h6>, per intenderci) per i titoli delle varie parti del libro.

Il foglio di stile CSS è Stile.css, contenuto nella cartella Styles: contiene alcune formattazioni di base, che hanno valore di semplici linee guida. Ho impostato ad esempi un colore per lo sfondo di tutte le pagine e un font di base per il testo, ho azzerato i margini per il tag <p>, così da rimuovere gli spazi vuoti tra un paragrafo e l’altro, ho inserito un certo spazio tra le varie sezioni, eccetera. Niente di particolare, insomma, ma può essere di aiuto come punto di partenza per qualsiasi tipo di impaginazione abbiate in mente. Per una discussione generale sull'uso del CSS in uno e-book, vi rimando alla serie di articoli che avevo scritto mesi fa: prima o poi troverò forse sia il tempo che la voglia di scrivere qualcosa di più completo, come un manuale specifico per le regole di CSS usate normalmente in un e-book, ma qualsiasi manuale generico di CSS può andare bene, se volete sapere come fare qualcosa di particolare, non contenuto nei miei articoli.

In questo modello di EPUB sono utilizzati soltanto font di base, che dovrebbero essere presenti su ogni tipo di dispositivo; se preferite utilizzare font originali e/o insoliti, li dovrete incorporare nel vostro e-book, ma anche di questo ho già parlato in precedenza.

Per finire, i metadati dello EPUB non sono stati inseriti, ma a questo dovrete eventualmente provvedere voi (premete F8 e si aprirà la finestra dei metadati). Il nome dell’autore, il titolo del libro e la lingua in cui è stato scritto sono gli unici metadati obbligatori, se volete superare il test di convalida, ma potete aggiungere qualsiasi altro metadato vogliate (codice ISBN, editore, data di pubblicazione, eccetera).

Guida al CSS per EPUB – Come lavorare

Nella puntata precedente abbiamo parlato di bordi, margini e di come impostare (o annullare) la distanza tra gli elementi all'interno di una pagina. Con questo non abbiamo certo esaurito il discorso sul CSS, che include svariate altre funzioni per impaginare gli elementi su più colonne, animarli e così via, ma tutto ciò che poco o nulla a che fare con gli EPUB: se vogliamo che un nostro e-book sia leggibile senza problemi anche su uno smartphone, dobbiamo limitarci a una sola colonna e il ricorso ad animazioni, oltre ad avere poca attinenza coi libri in generale, potrebbe non essere supportato da tutti i lettori in circolazione. Volendo, il problema relativo alla dimensione dello schermo può essere risolto, ricorrendo a un layout adattabile (come accade su molti siti web), ma è un argomento che va ben al di là sella semplice introduzione al CSS e, semmai, lo affronterò in futuro. Per adesso, vediamo invece di riassumere il discorso, con un esempio più concreto.

Supponiamo di dover lavorare su una pagina strutturata in questo modo:

<body>
<div class=”titolo”>
<h2>Capitolo 1</h2>
</div>
<div class=”testo”>
<p class=”primo”>Testo del primo paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
</div>
</body>

Corrisponde più o meno a una struttura ideale, per lavorare col CSS. Come ho accennato in precedenza, diversi tag HTML possiedono una formattazione di base, inserita automaticamente dal browser o dal dispositivo di lettura: il tag <p>, ad esempio, sarà quasi sempre seguito da una riga vuota, a separarlo dal paragrafo successivo, mentre i vari tag usati per i titolo, come <h1>, <h2> e così via, avranno già in partenza una dimensione differente, rispetto al testo normale, e spesso saranno anche visualizzati in grassetto. Queste impostazioni automatiche possono andarci bene, ma possono anche essere una seccatura, se vogliamo avere un controllo totale sulla grafica della pagina. Se le consideriamo una seccatura, nella prima parte del foglio di stile possiamo inserire alcune regole per annullarle: le ho riassunte nel file CSS che potete scaricare da qui. Per usarle, copiate il contenuto e incollatelo all'inizio del vostro foglio di stile, così da fare piazza pulita di tutto, prima di cominciare il lavoro.

Per scrivere il nostro foglio di stile, ricordiamo sempre il principio di base del CSS: partiamo dalle regole più generali, che costituiranno la base del nostro stile, e procediamo poi verso le regole più specifiche, che riguarderanno soltanto piccole porzioni di testo. Nella nostra pagina di esempio, il tag di base è <body>, che li include tutto. È il capofamiglia, se ricordiamo la struttura gerarchica dello HTML. Subito dopo di lui, vengono i tag <div class=”titolo”> e <div class=”testo”>, alla pari: sono tag fratelli (oppure sorelle, come preferite), nonché figli del tag <body>. Il tag <div class=”titolo”> ha un solo figlio, ossia il tag <h2>, e il suo ramo si conclude lì; il fratello <div class=”testo”>, invece, ha diversi figli, tutti i tag <p>, e ognuno di essi avrà probabilmente altri figli, se abbiamo usato qualche corsivo o grassetto, oppure se abbiamo inserito link, immagini o altro. È una famiglia molto ramificata, ma dobbiamo sempre ricordare la sua struttura: i figli ereditano lo stile del padre, a meno che questo stile non sia modificato in una delle loro regole.

Se vogliamo impostare uno sfondo che valga per tutto il capitolo, impostiamolo come regola per il tag <body>. Scriveremo ad esempio:

body{
    color: yellow;
}

se vogliamo che il capitolo abbia uno sfondo giallo. Potremo poi cambiare il colore dello sfondo per un tag specifico, ma il giallo sarà il colore di base per lo sfondo di tutti gli elementi della pagina. Se vogliamo impostare un font di base, modificandolo eventualmente per i titoli, il tag body è sempre un buon punto in cui impostarlo. Unendolo alla regola precedente, otterremo

body{
  color: yellow;
  font-family: “Times New Roman”, Times, serif;
}

che assegnerà uno sfondo giallo alla pagina e imposterà il font di base per tutto il testo. Per modificare il font del titolo, poi, basterà scrivere

.titolo{
  font-family: "Arial Black", Arial, sans-serif;
}

In questo modo, il tag <div class=”titolo”> utilizzerà un font diverso, che sarà ereditato dai suoi figli (il solo tag <h2>, in questo esempio). Il contenuto di <div class=”testo”>, invece, erediterà il font impostato per <body>, che è suo padre. Se la catena di genitori, figli e fratelli ci confonde, può essere utile tracciare un breve schema della rete di rapporti, così da averla sempre a portata di occhio, mentre scriviamo il foglio di stile: può aiutare a chiarire perché un determinato elemento abbia un certo colore, oppure utilizzi un certo font.

Il tag body è un ottimo posto anche per inserire tutte le regole che determineranno i margini della pagina, quando spazio vuoto dovrà essere lasciato sui bordi, eccetera. Ad esempio, se al tag body aggiungiamo anche una regola

padding: 7px 10px 5px 10px;

tutta la pagina presenterà un margine alto di sette pixel, laterale di dieci pixel e basso di cinque pixel: avremo insomma creato una piccola cornice bianca attorno al contenuto della pagina.

Titolo e testo, nel nostro esempio e nella maggior parte delle pagine ben strutturate, sono due elementi fratelli: le regole che assegniamo a uno non influiscono sull'altro ed è bene così. Per separarli, inserendo un certo spazio tra il titolo e il primo paragrafo del testo, non premiamo tre o quattro volte il tasto “Invio”, perché il risultato non è garantito. Il modo migliore per separarli è usare i margini, come già abbiamo visto. ad esempio, se scriviamo la regola
.titolo{
  margin-bottom: 30px;
}

avremo la garanzia che il titolo e il primo paragrafo saranno separati da uno spazio vuoto di trenta pixel. Possiamo assegnare qualsiasi valore, a seconda delle nostre preferenze, ma la cosa importante è assegnarlo alla proprietà margin-bottom, che determina la distanza tra la fine di questo elemento e l’inizio del successivo.

Venendo al testo, molti libri scelgono di rientrare la prima riga di ogni paragrafo. Se vogliamo adottare questo stile per il nostro EPUB, basterà una regola del tipo
p{
  text-indent: 2em;
}
che produrrà un rientro pari a due caratteri nella prima riga di ogni tag <p>. Il primo paragrafo di un capitolo, a volte, riceve un trattamento particolare: per questo gli abbiamo assegnato una classe “primo”, che useremo nel CSS per modificare soltanto quel paragrafo. Ad esempio,
p.primo{
  text-indent: 0;
}
azzera il rientro per il tag <p> che possiede un attributo class=”primo”, ossia il primo paragrafo del nostro capitolo. Essendo poi una regola più specifica, è meglio inserirla dopo la regola generale, che abbiamo scritto per il tag <p>. Se poi vogliamo davvero sbizzarrirci e dare un aspetto particolare alla prima lettera del capitolo, in memoria degli antichi testi miniati medievali, possiamo ricorrere a una regola ancora più specifica, ossia
p.primo:first-letter{
  position: relative;
  display: block;
  float: left;
  font-weight: bold;
  font-size: 4.4em;
  line-height: 0.8em;
  color: rgb(40,40,40);
}
che potrete divertirvi a decifrare, sulla base delle puntate precedenti. In linea di massima, la regola di rivolge alla prima lettera del paragrafo con classe “primo”: ingrandisce la lettera, la colora, la rende in grassetto e la allinea al resto del paragrafo. Questa regola, che è specifica al massimo grado (riguarda solo una lettera di un paragrafo), la collocheremo alla fine della parte del foglio CSS dedicata ai paragrafi.
Tutte le regole che modificano elementi interni a un tag <p>, come possono esserlo i tag <b>, <i> e così via, li sistemeremo subito dopo la sezione dedicata al paragrafo: una buona organizzazione del foglio di stile ci aiuterà a vedere meglio i rapporti di parentela tra gli elementi. Il foglio di stile, dunque, potrebbe avere una struttura finale di questo tipo:
body{
  //regole globali
}
.titolo{
  //regole per la sezione “titolo”
}
.titolo h2{
  //regole specifiche per il tag <h2>, quando si trova in un elemento con class”titolo”
}
.testo{
  //regole generali per il corpo del capitolo
}
p{
  //regole specifiche per i paragrafi
}
p.primo{
  //regole specifiche per il paragrafo con classe “primo”
}
p.primo:first-letter{
  //regole specifiche per la prima lettera del paragrafo con classe “primo”
}
b{
  //regole specifiche per il tag <b>
}
e così via. Combinando i tag, possiamo ottenere regole sempre più specifiche e precise, ad esempio la regola
p b{
//regole per i tag <b> all’interno di un tag <p>
}
che si rivolge soltanto a un sottogruppo dei tag <b>, ossia quelli che sono figli di un tag <p>. Il principio di base, che dobbiamo sempre ricordare per risparmiarci fatica inutile è: partiamo dal generale e scendiamo sempre più verso il particolare. Ricordarlo e applicarlo non ci metterà al sicuro dagli errori, ma ci aiuterà a ridurli e a localizzarli più facilmente.

Guida al CSS per EPUB - Formattare il paragrafo

Nella puntata precedente abbiamo visto una serie di regole per la modifica del testo: come impostare il font, scegliere la dimensione del testo, il suo colore e applicare alcuni tipi di decorazione a una o più parole. Proseguendo col discorso, vedremo oggi le regole per modificare interi blocchi di testo, ossia i singoli paragrafi o l’intera pagina del nostro EPUB: regole che normalmente applicheremo al tag <p>, oppure alla classe attribuita al tag <p>, ma anche regole che si possono applicare alla classe del tag <div>, che racchiude il contenuto dell’intero capitolo, se abbiamo seguito la struttura proposta in precedenza.

line-height

Come forse si potrà intuire già dal nome questa proprietà ci permette di impostare l’altezza delle linee nel nostro paragrafo o nella nostra pagina: maggiore è il valore che assegneremo a questa proprietà, maggiore sarà lo spazio tra una linea e l’altra (la famosa interlinea, insomma). Le unità di misura utilizzabili sono quelle che abbiamo già visto, ma in linea di massima è meglio usare solo le percentuali, oppure gli em, assieme a questa proprietà, così da rendere più dinamico lo spazio tra le linee: se è espresso in percentuale o in em, si adatterà di volta in volta alla dimensione del carattere, invece di rimanere fisso, come accadrebbe usando i pixel. Ad esempio,

line-height: 150%;

line-height: 2em;

Impostando una interlinea pari a due caratteri, questa dimensione si manterrà costante, qualunque sia la dimensione del carattere. Nei browser e in buona parte dei dispositivi, il valore base di questa proprietà è 120%.

text-align

Questa proprietà permette di formattare il testo di un paragrafo o di una pagina, allineandolo a destra, a sinistra, al centro, oppure giustificandolo: una proprietà che avremo utilizzato migliaia di volte, lavorando con Word o Writer. I valori che possiamo assegnare sono quattro e corrispondono ai quattro possibili stili di formattazione: right, left, center, justify. Questo è un tipico attributo, che vorremo assegnare all'intero testo e non a ogni singolo paragrafo, ed è di conseguenza un buon candidato per essere utilizzato con la classe di un eventuale <div>, che racchiude l’intero contenuto del capitolo. Esempi di utilizzo:

text-align: left;

text-align: justify;

il primo allineerà il testo a sinistra, il secondo lo giustificherà su entrambi i margini.

text-indent

Questa proprietà la utilizzeremo solitamente assieme al tag <p>, per assegnarla in modo uniforme a tutti i nostro paragrafi: è infatti una proprietà che ci permette di impostare il rientro della prima riga di testo in un paragrafo (e solo la prima riga). Tipicamente, attribuiremo a questa proprietà un valore espresso in pixel o in em, con una preferenza per la seconda soluzione: un rientro di 3em, pari a tre caratteri, resterà costante anche variando la dimensione del carattere, mentre un rientro di 10 pixel non si adatterà a un eventuale ingrandimento del testo (ricordiamo che praticamente tutti i dispositivi di lettura danno la possibilità di ingrandire o rimpicciolire il testo). Una regola

p{

    text-indent: 4em;

}

assegnerà un rientro pari a quattro caratteri alla prima riga di tutti i paragrafi (se ci siamo ricordati di racchiudere ciascuno di essi in un tag <p>).

:first-letter

Questa è una pseudoclasse CSS, che può essere abbinata a un tag e ci permette di assegnare uno stile speciale alla prima lettera di ogni paragrafo. Un suo uso tipico è

p:fist-letter{

    //regole da attribuire alla prima lettera

}

e all'interno delle parentesi graffe inseriremo poi le proprietà che la prima lettera del paragrafo dovrà possedere. Se vogliamo essere ancora più specifici, e sogniamo uno EPUB con la prima lettera di ogni capitolo miniata, come un manoscritto medievale, dovremo prima di tutto assegnare una classe particolare al primo paragrafo, ad esempio <p class=”primo”>, e poi useremo una struttura del tipo

.primo:first-letter{

    //regole da assegnare alla prima lettera

}

così da modificare soltanto la prima lettera dei paragrafi che possiedono la classe “primo”. Una cosa da ricordare è che non dovremo lasciare spazi vuoti tra il nome del tag (o della classe) e i due punti di :first-letter. Fra le parentesi graffe, poi, potremo utilizzare qualsiasi regola già vista per il testo: assegnare font particolari, ingrandire il testo, renderlo in grassetto, colorarlo, ma anche colorare il suo sfondo (lo vedremo a breve) e così via.

:first-line

Identico al precedente, ma si applica alla prima riga del testo nel tag con cui lo stimo utilizzando. Ad esempio,

p:first-line{

    //regole da assegnare alla prima riga

}

ci permetterà di assegnare uno stile particolare alla prima riga di ogni paragrafo. Vale quanto già detto in precedenza, con un avvertimento supplementare: se vogliamo attribuire più stili a uno stesso paragrafo (ad esempio uno stile generale per il paragrafo, uno per la prima riga e un terzo stile per la prima parola), è importante scrivere le varie regole in ordine, dalla più generale alla più particolare. Nel foglio di stile, per prima scriveremo la regola da applicate a tutti i paragrafi, poi scriveremo le regole da applicare solo ad alcuni paragrafi, poi quelle da applicare alla prima linea di alcuni paragrafi, infine quelle da applicare alla prima lettera. Questo vale per qualsiasi tag ed è un principio che è sempre bene ripetere.

background-color

Questa proprietà è utilizzata per assegnare un colore allo sfondo del tag, come è possibile intuire dal nome stesso della proprietà: se color serviva a colorare il testo, questa serve a colorare la superficie su cui il testo si trova. Possiamo assegnarla a una singola riga, per ricreare un effetto da evidenziatore, ma molto più spesso ci troveremo a utilizzarla per l’intera pagina, oppure per singoli paragrafi o blocchi della pagina: ad esempio, per assegnare un colore particolare allo sfondo del titolo del paragrafo, così da marcarne la differenza rispetto al contenuto, ma possiamo anche assegnare un colore particolare allo sfondo della prima lettera del paragrafo, oppure della prima riga.

Qualunque sia il modo in cui deciderete di utilizzarla, le regole sono le stesse che abbiamo già visto per color: il colore può essere espresso con un nome in inglese (se è uno dei colori principali), oppure con un numero esadecimale, o infine con un blocco rgb() o rgba(), al cui interno indicheremo le quote dei tre colori fondamentali (rosso, verde e blu) da miscelare, per ottenere il colore che ci serve. Niente di nuovo, insomma. Di conseguenza,

background-color: red;

background-color: #FF0000;

background-color: rgb(255, 0, 0);

sono tre modi per indicare il colore rosso, da attribuire allo sfondo di un elemento.

background-image

Per chi non si accontenta dei colori, è possibile anche inserire una immagine come sfondo per un elemento, oppure per tutta la pagina: la proprietà background-image ci permette di fare proprio questo. Ad esempio,

background-image: url(../Images/sfondo.jpg);

ci permetterà di inserire l’immagine “sfondo.jpg” come sfondo per il tag a cui avremo assegnato questa proprietà. Tra la parentesi di url(), ovviamente, dovremo indicare il punto in cui si trova la nostra immagine, che di solito dovrebbe essere la cartella Images del nostro EPUB: se si trova in un altro posto, modificheremo l’indirizzo di conseguenza.

Utilizzare una immagine come sfondo, però, presenta alcune complicazioni, che è bene tenere presente. Se l’immagine è più piccola della superficie da coprire, normalmente sarà riprodotta a scacchiera, da sinistra verso destra e dall’altro verso il basso, fino a riempire tutto lo spazio disponibile. Se state utilizzando una piccola immagine, che simula la superficie di una pergamena o di un foglio di carta, questo comportamento potrebbe andarvi bene; in altri casi, però, potrebbe risultare alquanto molesto. Per controllare (o impedire) la ripetizione della nostra immagine, dobbiamo utilizzare una seconda proprietà, subito dopo background-image, ossia

background-repeat

A questa proprietà possiamo assegnare quattro valori: no-repeat, repeat, repeat-x, repeat-y. Il valore repeat è quello che possiede in partenza e prevede che l’immagine sia ripetuta su tutto lo schermo; il valore no-repeat impedisce che l’immagine sia ripetuta; repeat-x ripete l’immagine soltanto da sinistra verso destra, cioè in orizzontale; repeat-y la ripete soltanto in verticale. Ad esempio,

background-image: url(../Images/sfondo.jpg);

background-repeat: repeat-x;

è una combinazione che ci permette di inserire come sfondo l’immagine “sfondo.jpg”, ripetendola a oltranza da sinistra verso destra.

background-position

Dopo aver caricato una immagine come sfondo e aver deciso se e come ripeterla, per coprire la superficie a disposizione, ci resta da vedere ancora una cosa, prima di chiudere il capitolo-immagini, e cioè come posizionarla all'interno di un elemento. La proprietà background-position si occupa proprio di questo.

Background-position richiede due valori: il primo è il punto di partenza orizzontale, il secondo è il punto di partenza verticale. Questi due valori possono essere espressi usando parole-chiave o unità di misura: in teoria si potrebbero usare anche le percentuali, ma è una soluzione che richiede calcoli troppo complicati e solitamente non ne vale la pena. Le parole-chiave, per il primo valore, sono left, center e right, mentre per il secondo valore sono top, center e bottom. Scrivendo ad esempio

background-position: left top;

il punto di partenza della nostra immagine sarà l’angolo in alto a sinistra dell’elemento. Scrivendo invece

background-position: center center;

il punto di partenza della nostra immagine sarà il centro esatto dell’elemento. E così via, per tutte e altre combinazioni. Se abbiamo scelto una immagine ripetuta, il punto indicato da background-position è il punto di partenza della ripetizione; se non dovrà essere ripetuta, invece, sarà il punto in cui si troverà l’immagine.

Utilizzando unità di misura, il principio è lo stesso, ma esprimeremo la posizione di una immagine indicando la sua distanza dall'angolo in alto a sinistra dell’elemento. Di conseguenza,

background-position: 5px 10px;

inserirà la nostra immagine a cinque pixel dal bordo sinistro e a dieci pixel dal bordo superiore del nostro elemento: in pratica, sarà spostata di cinque pixel verso destra e di dieci verso il basso, rispetto ai margini dell’elemento. Un numero negativo, invece, la sposterà nella direzione opposta:

background-position: -5px -10px;

collocherà il punto di partenza di una immagine cinque pixel sulla sinistra e dieci in alto, rispetto al suo elemento; in pratica, comincerà all'esterno dell’elemento.

Proseguiremo nella prossima puntata, parlando di margini e bordi della pagina.

Guida al CSS per EPUB – Struttura della pagina

Nella puntata precedente ci siamo dedicati a una presentazione generale del CSS, imparando inoltre come aggiungere un foglio di stile alla nostra pagina. Prima di cominciare a scrivere il foglio di stile, e aggiungere al nostro testo una serie di formattazioni belle, strane o di cattivo gusto, dovremo però assicurarci che la nostra pagina sia pronta a farsi formattare, senza opporre resistenza, il che no è sempre così automatico. Vediamo dunque una struttura ottimale per le pagine dei nostri EPUB.

Lo schema di base di un file HTML dovrebbe ormai esserci familiare:

<html>

<head>

  <title></title>

</head>

<body>

</body>

</html>

Questo è il minimo indispensabile, lo scheletro su cui tutto il resto sarà costruito:

<html> è il tag che racchiude tutta la pagina.

<head> racchiude quella parte di pagina che, normalmente, non è visualizzata, ma che contiene una serie di regole, da utilizzare per la visualizzazione: è qui che inseriremo il CSS ed è qui che, in una normale pagina web, troveremo anche il JavaScript (in genere, ma non necessariamente: esistono almeno due scuole di pensiero, a riguardo, ma non è questo lo spazio per discuterne).

<title> contiene il titolo della pagina, che sarà visualizzato sul bordo alto del browser; siccome stiamo parlando di uno EPUB e il suo contenuto non sarà visualizzato in un browser, possiamo anche lasciare vuoto questo spazio, ma non lo possiamo eliminare.

<body> contiene tutto ciò che sarà visualizzato sullo schermo: il testo, le foto, i video, eccetera. Qui dovremmo inserire soltanto il contenuto, senza mischiarlo con stile (CSS) e funzionamento (JavaScript). Essendo HTML, questo spazio sarà brulicante di tag e i tag potranno essere modificati da CSS e JavaScript in qualsiasi modo vorremo, ma l’importante è che il codice per modificare i tag sia lasciato fuori dal body, ben separato dal contenuto. Se li mischiate, siete delle brutte persone, oppure avete trascorso gli ultimi quindici anni ibernati in un qualche laboratorio segreto.

Dopo questo rapido ripasso dello scheletro di una pagina, dovrebbe essere chiaro che la parte da strutturare a dovere, per poterla poi modificare col CSS, è quella contenuto nel tag <body>: qui finirà tutto il contenuto del nostro EPUB e qui dovremo lavorare, per renderlo adatto ad accogliere il CSS.

In una normale pagina web, dovremmo preoccuparci del layout dei vari elementi, del numero di colonne da utilizzare nella pagina e così via; nel microcosmo di uno EPUB, invece, molti di questi problemi non si pongono e possiamo concentrarci sullo stretto indispensabile. O meglio, in teoria potremmo anche cercare di utilizzare in uno EPUB tutte le regole di layout che magari abbiamo imparato per i siti web, ma ci sono buone probabilità che i risultati non saranno quelli che ci aspettavamo. Manteniamoci dunque sull'essenziale, cioè una pagina che presenta un titolo nella parte alta, ossia il titolo del capitolo, e poi una muraglia di testo, ossia il contenuto del capitolo: è lo schema seguito da quasi tutti i libri, dopotutto, ed è un ottimo schema, se vogliamo che il nostro e-book sia leggibile decentemente anche sullo schermo di un piccolo smartphone.

Una buona e semplice struttura potrebbe essere questa:

<body>

    <div class=”capitolo”>

        <div class=”titolo”>

            <h2>Titolo del capitolo</h2>

        </div>

        <div class=”corpo”>

        </div>

    </div>

</body>

Il tag <div>, che qui vediamo utilizzato, è un tag che, di per sé, non possiede un preciso valore semantico, nello HTML, ma è solitamente usato per dividere in blocchi il contenuto di una pagina. In un futuro prossimo, quando saranno rimasti in circolazione soltanto browser che supportano lo HTML5, questa funzione del tag div sarà svolta da tag speciali, che lo HTML5 ha introdotto proprio per questo scopo, e <div> diventerà molto meno frequente nelle pagine web. Siccome però noi ci occupiamo di EPUB, tutto ciò non ci tocca e possiamo continuare a usare il tag div per strutturare i nostri capitoli, indipendentemente dai nuovi tag dello HTML5.

A ogni tag può essere assegnato un attributo class, che ci servirà a rendere più precise le regole CSS da applicare alla pagina: invece di applicare genericamente una regola a tutti i tag dello stesso tipo (tutti i tag <a>, ad esempio), possiamo usare l’attributo class per applicare una regola a tutti i tag di uno stesso tipo, che possiedono un determinato class (ad esempio, class=”testo”), oppure a tag di tipo diverso, purché possiedano lo stesso class. Lo vedremo meglio più avanti, parlando delle regole CSS: per il momento, possiamo vedere che ci sono tre tag div, ognuno dei quali ha un attributo class differente, e grazie a questo attributo possiamo applicare loro stili differenti.

<div class=”capitolo”> è il tag più ampio, che racchiude l’intero contenuto della pagina: per questo suo ruolo, possiamo utilizzarlo nel CSS per assegnare regole di base, che saranno applicate a tutto il contenuto della pagina. Per esempio, possiamo utilizzare questo tag per impostare una immagine di sfondo, oppure la larghezza dei margini della pagina, o ancora il tipo di font, e così via. Al suo interno, troviamo poi altri due tag, che separano i due blocchi di base per ogni capitolo, ossia il titolo e il testo: entrambi sono all'interno della pagina, per questo li abbiamo inseriti all'interno del tag più generale, ma entrambi hanno un ruolo paritario, per questo li abbiamo mantenuti uno accanto all'altro.

<div class=”titolo”> è quindi la parte in cui inseriremo il titolo del nostro capitolo. Nel foglio di stile CSS potremo utilizzare questa combinazione tag + class, per assegnare uno stile particolare al titolo e distinguerlo dal resto del testo, oppure per racchiudere il titolo in una cornice, o applicare qualsiasi altro tipo di decorazione noi vogliamo.

<div class=”corpo”>, infine, racchiude il grosso del nostro capitolo, ossia il testo, dal primo all'ultimo paragrafo. I vari paragrafi al suo interno, poi, saranno racchiusi in altrettanti tag <p>, uno per paragrafo, e a questi tag <p> potremo assegnare attributi class, ad esempio per distinguere il primo paragrafo dagli altri. In una struttura del tipo

<div class=”corpo”>

    <p class=”primo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

</div>

abbiamo definite due classi differenti per i nostri paragrafi: un attributo class=”primo”, che identifica il primo paragrafo del capitolo, e un attributo class=”paragrafo”, che identifica tutti gli altri paragrafi del capitolo. In questo modo, nel foglio di stile CSS potremo assegnare uno stile particolare al primo paragrafo, ad esempio ingrandendo la prima lettera, a simulare un manoscritto miniato del medioevo, mentre tutti i successivi paragrafi utilizzeranno uno stile comune e uniforme.

Se abbiamo bisogno di utilizzare uno stile particolare su una porzione molto ridotta di testo, ad esempio una riga o anche solo una parola all'interno di un paragrafo, dovremo racchiudere quella porzione di testo in un tag <span class=”nome”></span> (al posto di “nome”, ovviamente, inseriremo il nome che preferiamo, purché non sia già stato usato in altri class): in questo modo, nel foglio di stile potremo creare uno stile apposito, da applicare al testo che utilizza quell'attributo class.

Adesso che abbiamo strutturato a dovere la nostra pagina, possiamo cominciare a scrivere qualche regola in CSS: è ciò che faremo nella prossima puntata.

Guida al CSS per EPUB - Introduzione

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.

Sigil - Problemi con testo sottolineato

In un recente commento a un altro post, mi è stato segnalato un problema con Sigil, di cui finora non mi ero accorto: il testo sottolineato, in certi casi, è segnalato come errore dal test di convalida interno a Sigil, ossia FlightCrew. Se si sottolinea una parte del testo, evidenziandola e premendo il tasto Sottolinea nella interfaccia grafica di Sigil, oppure si usa la combinazione di tasti CTRL+U, il testo sottolineato potrebbe essere considerato non valido nei successivi test sul formato EPUB. Come si può intuire da questa premessa, non uso molto spesso le sottolineature all'interno di un testo, ma ciò non ha importanza.

L’errore che può essere segnalato dal test FlightCrew interno a Sigil, ma anche dal test ufficiale di convalida EpubCheck, ha una spiegazione molto semplice: il tag inserito in automatico per segnalare il testo sottolineato, ossia <u>, è un tag che è stato prima deprecato e poi dichiarato illegale nello XHTML 1.1, cioè il linguaggio utilizzato come base da Sigil per il formato EPUB. In altri termini, Sigil utilizza un tag non valido, per segnalare il testo sottolineato. A questo punto ci si potrebbe domandare il perché di una scelta simile, ma forse è meglio non indagare: il punto è che il tag <u>, utilizzato da Sigil, è illegale e sarà sempre segnalato come errore nei test di convalida.

Il problema del tag <u> ha una facile soluzione e in parte ci viene incontro lo stesso Sigil.

Nelle precedenti versioni del programma, era attiva una funzione di controllo automatico del codice, che si occupava di volta in volta di correggere eventuali nostri errori stilistici: tag sbagliati o deprecati, tag non chiusi e così via. Questa funzione è HTML Tidy. Forse perché un po’ troppo zelante e affetta dal vizio di correggere qualsiasi cosa, anche ciò che noi avevamo inserito volontariamente, nelle ultime versioni di Sigil è stata sostituita da un’altra funzione analoga, ma meno invasiva: Stampa Gradevole Tidy (è il nome che ha in italiano e sì, lo so, può lasciare perplessi, ma facciamo finta di niente). Anche Stampa Gradevole Tidy esegue una pulizia automatica del codice, ma lo fa in modo meno invasivo e tende a non eliminare o sostituire arbitrariamente i tag inseriti da noi, come invece si divertiva a fare HTML Tidy.

Morale della favola: HTML Tidy, quando vedeva un tag <u>, si affrettava a sostituirlo con una apposita classe CSS, per rendere valido il nostro documento; Stampa Gradevole Tidy, invece, lo lascia così come è. Siccome le impostazioni di base prevedono che il controllo del codice sia eseguito con Stampa Gradevole Tidy, l’errore rimane e il test di convalida ce lo segnala.

La prima soluzione al problema del tag <u> consiste dunque nel modificare le impostazioni di base, attivando HTML Tidy come pulitore ufficiale del nostro codice. Premiamo il tasto F5, oppure passiamo dal menu Modifica -> Impostazioni e, nella finestra che si aprirà, passiamo alla scheda Pulisci il Sorgente, selezioniamo HTML Tidy e diamo un Ok.

Al prossimo controllo automatico, tutti i nostri tag <u> saranno sostituiti: soluzione rapida, semplice, ma non indolore, perché potremmo poi ritrovarci a litigare con HTML Tidy in altre circostanze, se cerchiamo di fargli accettare un tag diverso da quelli che è programmato per accettare. Inoltre, la classe CSS che creerà potrebbe essere inserita nello Header della pagina, invece che nel foglio di stile del nostro EPUB.

Una seconda soluzione, più elegante ma anche più nerd, consiste nel modificare a mano il codice delle nostre pagine e, successivamente, creare una nuova classe nel foglio di stile CSS. Prima di tutto, sostituiamo il tag <u> con un tag del tipo <span class="sottolineato"> e, di conseguenza, il tag </u> con un tag </span>: in questo modo, segnaliamo al documento (o, più precisamente, al dispositivo che visualizzerà il documento) che, per riprodurre il testo racchiuso in quel tag, dovrà utilizzare le regole specificate nella classe “sottolineato” del foglio di stile CSS. Il secondo passo consiste nel creare la classe “sottolineato” nel nostro foglio di stile: apriamo il foglio di stile CSS, che sarà nella cartella Styles (se abbiamo fatto tutto per bene) e aggiungiamo queste tre righe

span.sottolineato {
    text-decoration: underline
}

In questo modo, abbiamo aggiunto una regola che prevede di sottolineare il testo, quando troviamo la classe “sottolineato” del tag <span>. Ovviamente, al posto di “sottolineato” si può usare qualsiasi altro nome, purché non sia già stato usato nel foglio di stile.

Una terza possibilità, sconsigliabile, è di sostituire il tag <u> col tag <ins>. Il tag <ins> è utilizzato per inserire un testo particolare dentro al nostro documento: il testo in questione apparirà sottolineato. Il problema di questa soluzione, però, è che in futuro potrebbe anche essere deciso di usare un altro sistema per evidenziare il testo inserito e, in questo caso, la sottolineatura sparirebbe: è possibile usarlo come rimpiazzo temporaneo, ma per una modifica sicura è meglio usare una delle due soluzioni precedenti.

Creare un EPUB da zero con Sigil

Già in precedenza avevo pubblicato una guida su come realizzare facilmente un e-book in formato EPUB, senza bisogno di programmi particolarmente complicati e costosi: in sintesi, si tratta solo di scrivere il nostro testo con un qualsiasi elaboratore (LibreOffice va benissimo, se vogliamo mantenerci a costo zero), per poi convertirlo in EPUB, aprirlo con Sigil e risistemarlo, per ottenere un EPUB che rispetti lo standard del formato e sia anche in linea coi nostri desideri, sul piano grafico. Se ci sentiamo più avventurosi, però, o se non crediamo nella conversione dei files, è anche possibile utilizzare Sigil per l’intero lavoro: potrebbe non essere molto semplice, ma ci risparmieremo il fastidio di dover cambiare più volte programma.

L’articolo di oggi sarà dedicato proprio a questo: realizzare un EPUB da zero, usando solo Sigil.

Sigil può funzionare anche come elaboratore di testo abbastanza rudimentale (più evoluto del Blocco Note, per intenderci, ma decisamente meno di Word/Writer e affini), ma presenta un primo grosso problema, per gli italiani: non ha un correttore ortografico. O meglio, ha un correttore ortografica, ma la lingua italiana non è supportata, al momento, e probabilmente non lo sarà mai: gli utenti italiani non costituiscono esattamente la fetta principale del mercato e, in assenza di iniziative individuali di utenti volenterosi, è improbabile che vedremo un vocabolario italiano ufficiale. C’è però una soluzione: importare il vocabolario di un altro programma.

Se utilizziamo OpenOffice o LibreOffice, tutto è molto semplice: basta setacciare le loro cartelle di installazione, alla ricerca di files it_IT.txt e it_IT.aff, e copiarli nella cartella hunspell_dictionaries di Sigil, dove già si trovano i rispettivi files per le lingue inglese, francese, tedesco e spagnolo. Una volta conclusa questa semplice operazione, potremo avviare Sigil, premere F5 e, alla voce Dizionario, selezionare it_IT, ossia il dizionario italiano. Se non utilizziamo OperOffice o LibreOffice, possiamo ugualmente procurarci i loro vocabolari italiani, senza bisogno di scaricare e installare tutto quanto: una versione del vocabolario, ad esempio, è ancora scaricabile dal vecchio sito di archivio.

Una volta sistemato il vocabolario, il passo successivo è scrivere materialmente il contenuto dello e-book. Come già detto, Sigil non è esattamente un programma superlativo, quando si tratta di pura e semplice elaborazione di testi, ma offre pur sempre alcune facilitazioni, rispetto a un Blocco Note: controllo della impaginazione, formattazione dei titoli, grassetto, corsivo, liste e altre impostazioni di base, il necessario per scrivere senza tanti fronzoli.

All'avvio, abbiamo già pronta una pagina su cui scrivere, ossia un file XHTML dal titolo Section0001: per aggiungere nuove pagine, possiamo cliccare col tasto destro del mouse sulla cartella Text (colonna sinistra di Sigil) e selezionare Aggiungi un file HTML vuoto,  oppure aprire il menu File e selezionare Aggiungi -> File HTML vuoto. Il risultato è lo stesso, ossia apparirà un nuovo file nella cartella Text, con numerazione progressiva (dopo Section0001 avremo Section0002, e così via). Possiamo rinominare ognuno di questi files, così come possiamo cambiare il loro ordine nella cartella, cliccandoli e trascinandoli in alto o in basso. Cliccando col tasto destro su un file, inoltre, possiamo anche selezionare Aggiungi Semantica, per specificare il ruolo che ha quel file all'interno del nostro libro: copertina, colophon, indice, titolo, dedica, eccetera.

È buona norma utilizzare un file per ogni capitolo del libro, così come è buona norma utilizzare file separati per la copertina, il copyright, il colophon, l’indice e tutte le altre componenti di base di un libro: nessuno vi vieta di utilizzare una sola pagina per un intero romanzo, sia chiaro, ma una buona suddivisione su più pagine semplificherà la vita a voi (mentre ci lavorate) e al dispositivo con cui poi lo leggerete. Allo stesso modo, è bene utilizzare correttamente gli Header (quella fila di pulsanti con la lettera h seguita da un numero), per organizzare la struttura del libro: h1 va riservato al titolo del romanzo, h2 per i grandi blocchi in cui è diviso il testo (introduzione, capitoli, biografia, bibliografia, note), h3 per le suddivisioni intermedie (sottocapitoli) e così via. Con sei livelli a vostra disposizione, dovreste poter gestire la struttura di quasi tutti i libri, per quanto intricata possa essere.

Un buon uso degli header pagherà, al momento di realizzare l’indice. Anche in questo caso, Sigil ci viene incontro, offrendoci uno strumento per produrre in automatico l’indice, utilizzando la struttura da noi espressa attraverso gli header: nel menu Strumenti, troviamo i comandi per generare una tavola dei contenuti (TOC), anche in formato HTML da inserire come normale file nel nostro libro, che poi apparirà nella colonna di destra di Sigil. Se qualcosa dovesse andare storto nella creazione, potremo poi modificare gli header e generare una nuova tavola, oppure modificare direttamente la tavola già esistente. Qualunque sia la nostra scelta, l’importante è che alla fine ci sia una tavola dei contenuti.

Una volta sistemata la struttura generale del nostro libro, dovremo occuparci della sua grafica. Come ho detto, Sigil non ci permette di utilizzare con facilità stili e formattazioni particolari, come succede con un elaboratore di testo più evoluto, ma tutto questo non ha alcuna importanza: stiamo lavorando su pagine HTML e ogni pagina HTML dispone di uno strumento molto più potente, per curane la grafica e per darle l’aspetto che vogliamo. Questo strumento è il CSS. Se avete mai lavorato su pagine web, probabilmente saprete già benissimo come cavarvela; in tutti gli altri casi, potete dare una occhiata ai due articoli che ho scritto in merito a come usare un foglio di stile in uno EPUB. A ogni modo, i passaggi iniziali sono due: cliccare col tasto destro sulla cartella Styles e selezionare Aggiungi foglio di stile vuoto; scegliere la vista codice per le varie pagine e inserire una scritta del tipo

<link href="../Styles/nome_foglio_di_stile.css" rel="stylesheet" type="text/css" />

all'inizio della pagina, subito sotto il blocco <title> e prima di </head>. Per quanto riguarda il cosa scrivere nel foglio di stile, potete vivisezionare lo EPUB di esempio che ho inserito, leggere il post sul CSS che ho già citato e, più in generale, qualsiasi guida o manuale sul CSS. Una ricerca su Google ve ne fornirà in abbondanza, anche in italiano, dato che il CSS è leggermente fondamentale, quando si tratta di creare pagine e siti web.

Sistemato il testo e sistemata la grafica, è il momento di affrontare la copertina. Come è ovvio, non potrete realizzare l’immagine usando Sigil, dato che non è un programma di grafica: dovrete realizzarla a parte, usando Photoshop, GIMP o il programma che preferite. Potreste farcela anche con Paint, volendo, anche se non sarà un parto indolore. A ogni modo, l’importante è che alla fine abbiate una copertina delle giuste dimensioni, il che apre una nuova questione: quali sono le giuste dimensioni? Se volete pubblicare qualcosa su iBookstore, oppure su Lulu, ignorate tutto il resto e seguite solo le regole che vi sono indicate da iTunes e altri prodotti Apple: la Apple ha fissazioni molto maniacali sulle copertine boccerà qualsiasi e-book non le rispetti pedissequamente. In tutti gli altri casi, una copertina con dimensioni attorno ai 600px per 800px dovrebbe andare bene, ma siete liberi di sperimentare vari formati, fino a trovare quello che vi piace di più. Quando poi la dovrete inserire nel vostro EPUB, è sufficiente creare una nuova pagina, posizionarla all'inizio del libro, inserire la copertina su quella pagina e Aggiungi Semantica -> Copertina.

Ultima fase: i metadati. Per avere uno EPUB completo e valido, è necessario inserire un certo numero di dati, che serviranno ai dispositivi di lettura per meglio interpretare e riprodurre il vostro e-book. Premendo F8, Sigil aprirà lo Editor dei metadati, dove potrete inserire, cancellare e modificare questi metadati. Titolo, autore e lingua sono indispensabili, tutti gli altri sono opzionali, almeno secondo lo standard del formato EPUB; varie case editrici potrebbero volere altri metadati, come data di creazione, ISBN e altro, e in questo caso basterà cliccare sul pulsante Aggiungi Basic, scegliere la nuova proprietà da aggiungere e poi modificarla.

Arrivati alla fine, è tempo del test di convalida. Con Sigil, potete eseguire il test FlightCrew, che è ottimo mentre state lavorando, ma non ha valore ufficiale; il test di convalida ufficiale è lo EpubCheck, che dovrete superare se aspirate alla pubblicazione. Potete eseguire il test online, sul sito del comitato, oppure scaricarlo ed eseguirlo comodamente sul vostro computer, a patto che abbiate installato il Java. Se il test vi segnala qualche errore, vi attenderà un nuovo giro di Sigil, per correggerlo; se invece il test è superato, il vostro EPUB è concluso e pronto per essere pubblicato (se troverete un editore) o distribuito come meglio credete.

Come usare fogli di stile CSS negli EPUB (2)

Esistono quattro sistemi, per indicare le dimensioni di qualcosa in un foglio di stile: si possono esprimere le dimensioni in pixel (px), in punti (pt), in proporzione ai caratteri (em) e in percentuale. Lo em è una unità di misura che corrisponde all’ampiezza di un carattere: se scriviamo nel foglio di stile di utilizzare un rientro di 2em, stiamo chiedendo un rientro pari a due caratteri, qualunque sia il tipo di carattere utilizzato. È un ottimo sistema per descrivere le proporzioni interne di una pagina, perché mantiene sempre le stesse proporzioni, qualunque sia la dimensione del carattere; allo stesso modo, la percentuale è un ottimo sistema per descrivere la struttura generale della pagina, perché si mantiene costante a prescindere dalla dimensione dello schermo su cui il libro è visualizzato. Pixel e punti, invece, sono dimensioni fisse ed è bene utilizzarle solo per elementi che non dovranno mai cambiare, come ad esempio le linee di contorno di una tabella.
L’elemento body determina la struttura generale di una pagina; gli elementi div sono usati per dividere la pagina in più componenti (di solito, titolo e testo) e utilizzano id diversi, per distinguere le varie parti; gli elementi p servono a suddividere il testo in paragrafi e possono utilizzare class diverse, se vogliamo che alcuni paragrafi abbiano un aspetto differente. Per ognuna di queste voci, il foglio di stile presenterà una struttura apposita: capita spesso, ad esempio, di voler utilizzare una classe diversa per il primo paragrafo di ogni capitolo, così da formattarlo in modo differente rispetto ai successivi.
Per modificare un tag, avremo il nome del tag, seguito dalle parentesi graffe e dalla lista di attributi da modificare. In questo modo, la modifica si applicherà a tutti i tag di quel tipo.
p {
    attributo: valore;
}Per lavori di precisione, dovremo invece utilizzare id (nel caso del tag <div>) e class (in tutti gli altri casi). In questo modo, la modifica si applicherà ovunque sia usato quel valore di id o di class e potremo avere tag uguali che si comportano in modo differente.
Nel caso di un id, dovremo scrivere il suo nome preceduto da #:
#pagina {
    attributo: valore;
}Nel caso di class, dovremo scrivere il nome preceduto da un punto:
.paragrafo {
    attributo: valore;
}
Volendo essere più specifici, è anche possibile inserire il nome del tag, prima del punto, in una struttura del tipo: p.paragrafo. Per vederlo applicato in pratica, fate sempre riferimento allo EPUB che ho inserito come esempio, debitamente vivisezionabile con Sigil.
Detto questo, passiamo a vedere gli attributi specifici del foglio di stile.

Struttura della pagina

Abbiamo a disposizione diversi attributi, per specificare la struttura che avrà la pagina, e possiamo utilizzarli sia nell’elemento body, per la struttura  generale del libro, sia negli elementi dei singoli paragrafi.

margin: determina la dimensione del margine vuoto attorno alla pagina, su tutti e quattro i lati (sopra, sotto, destra, sinistra). Se vogliamo specificare il margine su un solo lato, o se vogliamo usare margini diversi per i vari lati, avremo a disposizione margin-top, margin-bottom, margin-right e margin-left. È preferibile indicare la dimensione dei margini in percentuale, oppure in em, così il dispositivo di lettura potrà adeguarli meglio alla larghezza dello schermo e al tipo di carattere usato.
Alcuni esempi:
margin: 0; (nessun margine)
margin: 4em; (tra il bordo della pagina e il bordo dello schermo c’è un margine pari a quattro caratteri, su tutti i lati)
margin-bottom: 2em; (il margine inferiore di questo elemento è pari a 2 caratteri)

padding: determinala dimensione dello spazio vuoto tra il margine della pagina e l’inizio del testo, mentre margin stabiliva lo spazio tra il margine della pagina e il bordo dello schermo. Per il resto, funziona come margin e ha gli stessi attributi (padding-top, padding-bottom, eccetera).

border: serve a disegnare una cornice attorno a un elemento. Per usarlo, dovremo prima di tutto specificare la dimensione del bordo (di solito in px), poi il tipo di bordo (dashed per un bordo tratteggiato, solid per un bordo continuo, dotted per un bordo punteggiato), quindi il colore del bordo. Alcuni esempi:
border: 2px dashed black;
disegnerà una cornice nera tratteggiata, larga due pixel, attorno all’elemento scelto.
border: 1px dotted red;
disegnerà una cornice rossa punteggiata, larga un pixel, attorno all’elemento scelto.
In alternativa al numero in pixel o altra unità di misura, si può esprimere lo spessore della cornice coi valori thin, medium e thick, per esempio:
border: medium solid blue;
che disegnerà una cornice blu e continua, di spessore medio.
Elementi di questo tipo sono di uso più comune nei manuali, ad esempio per mettere in evidenza formule, avvertimenti o concetti di particolare importanza.

text-align: serve a formattare il testo, allineandolo lungo uno dei margini; i suoi possibili valori sono left (allineato a sinistra), right (a destra), center (al centro), justify (giustificato).

text-indent: serve a specificare il rientro della prima riga di un paragrafo e possiede un valore espresso preferibilmente in em. Un paragrafo con text-indent: 3em; presenterà un rientro nella prima riga pari allo spazio di tre caratteri.

background-color: serve a specificare un colore per lo sfondo dell’elemento. Il colore può essere indicato con un nome inglese (se esiste un nome per quel colore), oppure col numero esadecimale che corrisponde a quel colore.

background-image: serve a specificare una immagine, da utilizzare come sfondo per un elemento. Non è una scelta che raccomando, soprattutto se progettate di usare immagini pesanti da caricare, ma in certi casi l’effetto può essere gradevole, se ad esempio avete preparato uno sfondo che simula l’aspetto di una pergamena. Si usa così:
background-image: url(“../Images/sfondo.jpg”);
dove ovviamente userete il nome della vostra immagine, al posto di “sfondo.jpg”.
Normalmente, una immagine di sfondo è ripetuta in orizzontale e verticale, fino a riempire tutto lo spazio della pagina. Se questo non vi va bene, dovrete modificare gli attributi background-repeat: ed eventualmente background-attachment: (per mantenerla sempre al centro dello schermo) e background-position: (per ottenere una migliore collocazione dell’immagine), ma un lavoro di questo tipo, normale in un sito web, può dare brutti risultati sugli schermi più piccoli di un lettore. Da usare con molta cautela.

Esistono poi svariati altri attributi, relativi alla struttura di una pagina, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.

Caratteristiche del testo

Possiamo specificare diversi attributi nel foglio di stile, per quanto riguarda il modo in cui sarà visualizzato il testo sullo schermo: possiamo specificare il font, la dimensione dei caratteri, il colore, ma anche lo stile, eccetera. Se non siamo soddisfatti del corsivo standard, ad esempio, ne possiamo definire uno nostro, nel foglio di stile, e poi utilizzarlo nella pagina, racchiudendo le parole in corsivo in un tag <span>, con un valore di class corrispondente a quello utilizzato per il nostro corsivo. C’è un esempio di questo uso nel modello di EPUB.

font-family: serve a specificare il font da utilizzare per il testo. Possiamo assegnare più valori  questo attributo e il lettore li proverà uno alla volta, da sinistra verso destra, fino a che non ne avrà trovato uno che sarà in grado di visualizzare: per questo motivo è meglio indicare per primo il nostro font di preferenza e poi, uno alla volta, i font alternativi, sempre in ordine di preferenza. Per indicare il tipo di font, basta scriverne il nome, eventualmente racchiuso tra virgolette se è formato da più di una parola. Ad esempio:
font-family: “Times New Roman”,  Times, serif;
Il lettore cercherà prima di tutto di caricare il font Times New Roman; se non possiede questo file, proverà col successivo, ossia Times; se anche questa volta fallisce, caricherà un qualunque font di tipo serif, presente nella sua memoria.
Come ultimo valore, è opportuno specificare una delle tre grandi famiglie di font, ossia serif, sans-serif e monospace: in questo modo, il lettore avrà almeno un appiglio sicuro, se tutto il resto dovesse fallire.

font-size: serve a specificare la dimensione di preferenza per i caratteri. Non è comune utilizzarlo in uno e-book, ma a volte possono esserci motivi per cui scegliere una dimensione specifica, invece di lasciar fare al lettore. La dimensione si può esprimere in tutte e quattro le unità di misura summenzionate. Esempio:
font-size: 1.5em; (il carattere sarà grande una volta e mezza la sua dimensiona standard).

font-style: serve a specificare che tipo di stile dovrà possedere quel carattere, se state lavorando su un corsivo, nel qual caso indicherete italic come valore per l’attributo.

font-weight: come sopra, ma usato quando si lavora su grassetti e simili; nel caso di un testo in grassetto, il suo valore sarà bold.

font-variant: come sopra, ma in questo caso si utilizza per ottenere un testo in maiuscoletto; il valore da assegnare sarà small-caps. Se si vuole esplicitamente rimuovere una di queste tre caratteristiche, le si dovrà assegnare il valore normal.

line-height: serve a specificare l’altezza di ogni riga di testo per quell’elemento. Il suo valore può essere espresso in una delle quattro unità di misura disponibili, ma per ovvie ragioni è preferibile utilizzare lo em, così da definire la dimensione della riga in rapporto a quella del carattere utilizzato. Ad esempio:
line-height: 2em; (la riga sarà alta il doppio del carattere utilizzato, in pratica avremo una interlinea doppia).

color: serve ad assegnare un colore al carattere utilizzato e funziona esattamente come il già visto background-color. Ad esempio:
color: green; (il testo avrà un colore verde).

text-transform: serve a modificare il testo, convertendolo in maiuscolo, minuscolo o rendendo maiuscola la prima lettera di ogni parola. I valori da assegnare sono, rispettivamente, uppercase (tutto maiuscolo), lowercase (tutto minuscolo), capitalize (prima lettera maiuscola), none. Esempio:
text-transform: uppercase; (il testo sarà interamente in maiuscolo).

text-decoration: serve ad assegnare una particolare decorazione alla parte di testo in esame. I suoi valori possibili sono underline (testo sottolineato), overline (linea al di sopra del testo), line-through (linea che attraversa il testo), none. Esempio:
text-decoration: line-through; (il testo sarà tagliato a metà in orizzontale da una linea).
Questo attributo può essere utile per il titolo di un capitolo: utilizzando un valore
text-decoration: underline overline;
il testo sarà racchiuso tra due linee, per evidenziarlo. Ne vedete un esempio nel modello di EPUB.

Anche in questo caso, esistono poi svariati altri attributi, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.

Come usare fogli di stile CSS negli EPUB (1)

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.