Come si è più volte menzionato, gli eBook a layout fisso non scorrono. Il contenuto di una pagina specifica viene sempre e solo mostrato in quella pagina. È dunque necessario creare un documento XHTML per ogni pagina del libro inserendo, per ognuna, la stessa dimensione.
È la viewport a determinare le proporzioni di una pagina (ma non sempre la sua esatta dimensione) così come le dimensioni degli oggetti rispetto alla pagina.1
In caso di eBook fotografico, con fotografie pensate a tutto schermo, si cerchi di rispettare il più possibile le proporzioni delle fotografie. Così facendo non si correrà il rischio di avere parti delle immagini fuori dal canvas oppure che vangano ridimensionate in modo sproporzionato — provocando perdite di qualità o deformazioni. Ovviamente non è sempre possibile farlo; per questo vengono in soccorso alcuni comandi del CSS, di cui si parlerà nel prossimo articolo.
In generale, comunque, si cerchi di rispettare le dimensioni delle risoluzioni più popolari al momento della creazione dell’eBook. Come riportato da deviceAtlas,
Many new phones released in 2015 featured a Full HD resolution, even in mid-range price categories. Some flagship phones, such as Samsung Galaxy S6, Samsung Galaxy Note 5, Sony Xperia Z5 Premium, featured a qHD (1440 x 2560) screen resolution. Again the iPhone was an exception with the 750 x 1334 (6S) and 1080 x 1920 px (6S Plus) screen resolutions.2
Una volta scelte le dimensioni della pagina si può procedere a specificarle nel codice. In particolare, nella sezione head di ogni singolo documento XHTML dell’eBook, va aggiunto un elemento meta con name viewport il cui content specifichi la larghezza (width) e l’altezza (height) in pixel in questo modo:
[sourcecode language=”html” wraplines=”false” light=”true”]
<meta name="viewport" content="width=1024, height=768"/>
[/sourcecode]
Si noti che le virgolette includono contemporaneamente, e non separatamente, entrambe le misure. È poi possibile, per una più corretta scrittura del codice, aggiungete le misure della pagina all’interno della pagina CSS, in px al body. È importante che la dichiarazione sia presente in ciascuna pagina XHTML e che risulti sempre uguale — diversamente verranno riscontrati errori durante la validazione o all’apertura per alcune app, per esempio Gitden Reader.
Dopo che aver inserito il meta tag riguardante la viewport, si può iniziare con l’inserimento dei contenuti. Anche in questo caso Sigil offre alcuni strumenti per l’inserimento di file come immagini, audio, video, tag di chiusura, id o caratteri speciali. In questo modo le possibilità di commettere errori di battitura o di sintassi si abbassano notevolmente. Sempre Sigil, ogni volta che viene creato un nuovo file XHTML, genera automaticamente la dichiarazione e la sua codifica3, e si occupata del suo corretto inserimento, come di ogni altro file, all’interno delle cartelle apposite.
Nell’intestazione del file —nei metadati del foglio XHTML —, è sufficiente inserire il titolo del file — più che altro per vostra comodità, perché il titolo che verrà visualizzato sarà quello mostrato nei file .opf; dare un titolo a ogni pagina è utile per organizzare il contenuto e orientarsi —, il riferimento al foglio stile o ad altri eventuali file. La path di questi file è relativa, quindi se è contenuta in una sottocartella è necessario indicarla.
[sourcecode language=”html” wraplines=”false” light=”true”]
<title>titolo pagina</title>
<link rel="stylesheet" href="../Styles/stile.css" type="text/css"/>
<script src="../Misc/myscripts.js" type="text/javascript">
</script>
[/sourcecode]
Le specifiche XML/XHMTL richiedono che in questo file vi siano solamente i contenuti e le indicazioni strutturali, mentre ogni particolare o indicazione sulla forma, deve essere demandato al foglio stile. Sia per una corretta riproduzione, sia per una buona compatibilità con i diversi reader e software di lettura, sia per un’interpretazione del codice per eventuali modifiche, è importante che la pagina sia chiaramente strutturata e che le diverse parti siano chiaramente contrassegnate. Occorre anche che la struttura sia omogenea in tutto l’eBook, quindi in tutti i file.4
Un utile consiglio riguardante il testo è di evitare l’uso del tag <br/> come fine di paragrafo. I diversi paragrafi devono essere contenuti in diversi tag <p>, con gli id o le classi opportune, e i diversi tipi di testo devono essere compresi nei <div> che li qualificano per posizione e funzione; il tutto con le opportune formattazioni all’interno del foglio di stile.
Quindi, quando inizierete a creare le diverse pagine, è utile creare un elenco ordinato di quali e quanti tipi di testo dovrete inserire. Ciascun tipo di testo e ciascun insieme di formattazione porta alla definizione di una ‘class’ differente.
Ad esempio, abbiamo un testo corrente che ha determinate caratteristiche, ma abbiamo bisogno che, ad un certo punto, vi sia uno spazio bianco nel testo che separi il testo anche senza la presenza di alcun sottoparagrafo. Non possiamo usare, come faremmo nell’HTML od in “Word”, dei ritorni a capo con paragrafo vuoti, perché potrebbero essere interpretati in modo diversi da diversi software o reader, od addirittura ignorati. Dobbiamo creare nel foglio stile una “class” apposita che preveda un “margin-top” od un “margin-bottom” a seconda se vogliamo lo spazio sopra o sotto.5
A questo proposito, nel prossimo articolo descriverò brevemente come creare un corretto file CSS — Sigil in questo non ci viene in aiuto.
Fonti
1 Elizabeth Castro, EPUB a layout fisso (Digitalissimo)
, goWare, 2012
2 Pawel Piejko, Most popular viewport size statistics for 2016, deviceatlas, 2016
3 In Realizzare il contenuto di un ePub, Guida eBook, 2012, si legge: “La codifica da usare è ‘UTF-8’ o ‘UTF-16’, anche se non è garantita la resa dell’intero set di caratteri, e non vanno usate altre codifiche (come la codifica ‘iso-8859-1’ che viene usata spesso nei file HTML).”
4 Per un utilizzo corretto del codice HTML e CSS si rimanda a W3S
5 Realizzare il contenuto di un ePub, Guida eBook, url cit.