Una della principali ragioni per cui il layout fisso è la scelta migliore per gli eBook contenenti fotografie, è la possibilità di poter controllare la loro posizione e la loro dimensione all’interno di una pagina.
Il primo passo è creare l’immagine che si vuole inserire nel libro. Non è possibile controllare la risoluzione delle immagini, ma è possibile controllare le dimensioni assolute in pixel. Lo spazio della pagina occupato dall’immagine dipende dalla sua dimensione relativa con riferimento al viewport e al body (valori che dovrebbero essere uguali). Potete inserire nella pagina il numero d’immagini che volete. Dato che si lavora con uno spazio a dimensione fissa, probabilmente vorrete anche posizionare le immagini esattamente in quel determinato spazio.1
È comunque necessario porre attenzione alla dimensione totale della pagina. Purtroppo per alcune applicazioni, come Digital Edition di Adobe o iBooks su vecchi modelli di iPad, una pagina troppo pesante, oltre a creare rallentamenti durante il caricamento della stessa, può bloccare la pagina, impedendo la visualizzazione di elementi interattivi o altro, fino a far chiudere l’applicazione. Raccomando dunque di avvicinare il più possibile la dimensione delle immagini a quelle scelte per la viewport così da diminuire il peso della pagina. L’applicazione Gitden Reader, invece, blocca la funzione ‘sfoglia’ attraverso lo swipe delle pagine, costringendo il lettore a dover utilizzare i tasti volume per proseguire nella lettura — riguardo a questa problematica si sono contattati gli sviluppatori dell’app i quali hanno risposto che avrebbero rimediato.
Grazie a Sigil, è possibile inserire un’immagine direttamente nel flusso dell’HTML utilizzando l’apposito bottone e selezionando il file opportuno.
Non specificate i valori di width e height. È obbligatorio includere anche le informazioni nel tag alt, anche se sono informazioni che, dato il formato, non si useranno mai.2
Successivamente, si devono aggiungere all’interno del CSS le informazioni necessarie in modo da poter collocare l’immagine con precisione nella parte desiderata della pagina. Consiglio di inserire l’elemento img in un blocco div nell’HTML. Questo permette di riempire una pagina con un’immagine. Per farlo, va data al blocco div una larghezza e un’altezza assoluta — il 100% a entrambe le proprietà. Si assegna poi la proprietà position:absolute, così da collocarlo automaticamente nell’angolo in alto a sinistra della pagina – consiglio comunque di dichiarare left e top uguali a 0. In questo modo il blocco occupa l’intera pagina. Sempre nel CSS, va assegnata all’immagine una max-height — o una max-width nel caso invece di un orientamento dell’immagine in verticale — pari a 100%. In questo modo l’immagine non andrà mai oltre il lato più corto del canvas, così da risultare non solo sempre proporzionata, ma anche nelle sue dimensioni massime possibili. Gli spazi bianchi che potrebbero presentarsi nel caso in cui le dimensioni dell’immagine non siano proporzionali a quelle del canvas dell’applicazione, potranno essere riempiti o di colore (come ad esempio il nero), oppure diminuendo in percentuale le dimensioni dell’immagine, creando così una cornice attorno a essa.
È poi possibile sovrapporre all’immagine i testi, come il titolo della fotografia o le didascalie. In questo caso è necessario posizionare l’immagine alla base della pila (stack) di oggetti, paragonabile a un livello controllato dalla proprietà z-index — il valore di default è 0, un qualsiasi valore negativo porterebbe l’immagine al di sotto degli altri elementi.
È più semplice farlo che descriverlo.
Fonti
1 Castro Elizabeth, EPub a layout fisso, goWare, 2012
2 Ibidem