Prima di iniziare a creare un eBook a layout fisso si deve tenere in considerazione che il layout fisso permette più possibilità di visualizzazione. È infatti necessario dichiarare se costringere il lettore a una determinata visualizzazione o se potrà, attraverso le funzioni dell’applicazione o del dispositivo di lettura, scegliere lui stesso come fruire dei contenuti. Oltre all’orientamento verticale od orizzontale dei contenuti, è possibile dichiarare se, all’interno del canvas virtuale (la finestra di visualizzazione), debba essere visualizzata una pagina intera o due pagine affiancate, o spread — esperienza simile al libro cartaceo o a una rivista.
Queste informazioni, o valori, devono essere inserite all’interno del file .opf — solitamente porta il nome di ‘content’ — che descrive in xml la struttura del file .ePub. In particolare queste istruzioni per i dispositivi di lettura e per i software su come dovrà essere visualizzato l’eBook in questione vanno dichiarate all’interno del tag metadata.
<metadata xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:identifier id="BookId">urn:isbn:9788893202022</dc:identifier>
<dc:language>it</dc:language>
<dc:title>Incontri di viaggio. Il lato umano del reportage</dc:title>
<dc:creator>Angela Prati</dc:creator>
<dc:publisher>Simonelli editore</dc:publisher>
[…]
<dc:creator>Alessandro Bonalume</dc:creator>
<dc:creator>Nicoletta Salvatori</dc:creator>
<meta property="ibooks:specified-fonts">true</meta>
<meta property="ibooks:version">3.0</meta>
<meta property="dcterms:modified">2019-07-12T10:02:46Z</meta>
<meta property="rendition:spread">none</meta>
<meta property="rendition:layout">pre-paginated</meta>
[…]
</metadata>Esempio tratto da Incontri di viaggio. Il lato umano del reportage
Le proprietà dell’eBook a layout fisso
Sono quattro le proprietà che consentono ai sistemi di lettura di capire che devono eseguire il rendering dell’ePub a layout fisso. Sono:
Rendition:layout
Nel caso di un eBook a layout fisso, il file .opf svolge infatti la funzione fondamentale di comunicare al dispositivo di lettura – tra le altre cose –che il file ePub da visualizzare ha un impaginato fisso. In questo caso va utilizzato il metadata rendition:layout. Questa stringa è di per sé sufficiente affinché le pagine dell’ePub appaiano di dimensioni fisse.
<meta property="rendition:layout">reflowable</meta>
<meta property="rendition:layout">pre-paginated</meta>Rendition:orientation
Per quanto riguarda invece l’orientamento della schermata la proprietà da utilizzare è la rendition:orientation. Questa proprietà ci permette di ‘bloccare’ la rotazione automatica. Per esempio, se stiamo realizzando un ePub illustrato dal formato orizzontale, è preferibile che la schermata rimanga in modalità landscape (orizzontale) anche quando il lettore impugna il dispositivo in verticale (portrait), per evitare che la pagina appaia poco leggibile. Oltre ai valori landscape e portrait, è possibile assegnare auto per evitare blocchi alcuni.
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:orientation">portrait</meta>
<meta property="rendition:orientation">landscape</meta>Una volta impostato l’orientamento,va definita la viewport, ovvero la dimensione di ogni pagina. I valori da inserire sono due, la larghezza della pagine e la sua altezza. Non ci sono limiti ai valori che possono essere inseriti. Tuttavia, a causa della dimensione fisica dello schermo, vanno considerate le proporzioni della pagina e non le sue reali dimensione – per approfondire, Approcci al layout fisso.
La mia raccomandazione è di creare un eBook con tutte le pagine uguali.
<head>
<meta charset="utf-8"/>
<title>Titolo pagina</title>
<meta name="viewport" content="width=1024,height=768"/>
<link href="../Styles/default.css" rel="stylesheet" type="text/css"/>
<link href="../Styles/stile_grafico.css" rel="stylesheet" type="text/css"/>
<script src="../Misc/funzione_javascript.js" type="text/javascript"></script>
</head>
[…]Come vedete i valori della viewport, la stringa rossa, vanno inseriti all’interno del nodo genitore <head> – il blocco che appare in ogni pagina contenente i suoi metadati e i richiami agli stili etc. Questa stringa va ripetuta all’interno di ogni file .xhtml, ovvero ogni pagina del vostro eBook che sarà a layout fisso.
Rendition:spread
Per gestire infine l’affiancamento delle pagine, si utilizza invece la rendition:spread. Questa proprietà regola l’attivazione della visualizzazione a pagina doppia, che può rivelarsi essenziale per i testi o le immagini che si sviluppano su due pagine contigue. Lo spread può essere combinato con l’orientamento per ottenere particolari effetti di riempimento della pagina. La scelta del valore farà attivare lo spread:portrait nel caso si voglia uno spread in modalità verticale, landscape nel caso lo si voglia in orizzontale e both per entrambi. Nel caso in cui non si voglia alcuno spread, basterà dichiarare none.
<meta property="rendition:spread">auto</meta>
<meta property="rendition:spread">none</meta>
<meta property="rendition:spread">landscape</meta>
<meta property="rendition:spread">portrait</meta>
<meta property="rendition:spread">both</meta>Queste proprietà possono essere utilizzate in due differenti modalità. Quando dichiarate all’interno del pacchetto degli elementi meta, come descritto in precedenza, le proprietà vengono applicata all’interno eBook. Se invece si volesse creare un eBook con pagine diverse, ad esempio se si volessero includere pagine fluide all’interno di un eBook a layout fisso, è possibile dichiarare le suddette proprietà all’interno del pacchetto degli elementi spine. Attenzione! Qui iniziano a cadere un po’ di teste. Infatti molte applicazioni di lettura (come Gitden Reader) non leggono correttamente queste proprietà e, in alcuni casi, non viene visualizzato l’eBook.
Nel caso dello spread poi, è possibile dichiarare la posizione della pagina all’interno del canvas grazie alla proprietà page-spread-*.
page-spread-*
When a Reading System is rendering synthetic spreads, the default behavior is to populate the spread, which conceptually consists of two adjacent viewports, by rendering the next Content Document in the next available unpopulated viewport, where the location of “next” is determined by the given page progression direction, or by local declarations within content documents. By providing one of the page-spread-* properties on the spine itemref element, the author can override this automatic population behavior by forcing the given Content Document to be placed in a particular viewport.
Matthew, Fixed Layout in ePUB 3.0 Draft: Metadata Property Definitions
Se si volesse quindi visualizzare una singola immagine su due diverse pagine sarà possibile dichiarare per la pagina di sinistra la proprietà page-spread-left e per quella di destra page-spread-right. In aggiunta, esiste anche la possibilità di avere una sola pagina al centro del canvas.
<spine>
<itemref id="page01" properties="page-spread-left”/>
<itemref id="page02" properties="page-spread-right”/>
<itemref id="page03" properties="page-spread-center”/>
</spine>Matthews continua: «Which indicates that the synthetic spread mode should be overridden such that instead of two adjacent viewports, a single viewport must be used, and positioned at the center of the screen. Note that the presence of rendition:page-spread-center does not in itself affect the content dimensions.»
Solitamente io utilizzo solo le proprietà rendition:spread, con valore none, e rendition:layout, con valore pre-paginated, dichiarate all’interno del pacchetto degli elementi meta – come ho riportato nel primo esempio. Non ho inserito la proprietà rendition:orientation poiché ho verificato che l’applicazione Gitden Reader su tablet si bloccava a causa di questo.
Per i sistemi iOS
<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
<option name="fixed-layout">true</option>
<option name="interactive">true</option>
</platform>
</display_options>Struttura di un file com.apple.ibooks.display-options.xml
Elizabeth Castro suggerisce, per una corretta visualizzazione sui sistemi iOS degli ePub3, l’inserimento all’interno della cartella META-INF, di un file XML aggiuntivo denominato com.apple.ibooks.display-options.xml. Il file contiene poche righe in cui vengono elencate le proprietà già dichiarate nei metadati all’interno del file .ops e a quale dispositivo – platform – iOS dovranno essere applicate. Indicando ‘*’, verranno prese in considerazioni tutte le piattaforme.
Fonti
EPUB 3 Fixed-Layout Documents, idpf, 2012
Matthew, Fixed Layout in ePUB 3.0 Draft: Metadata Property Definitions, ePUBSecrets, 2012
Elizabeth Castro, EPub a layout fisso, goWare, 2012
Ciao scusa se ti disturbo, ho letto alcuni articoli del tuo sito e li trovo interessanti. Malgrado mi intenda abbastanza di html e css e mi aggiusti nel buttare giù o simulare un layout per un ebook in formato epub (utilizzo Sigil a tale scopo), molte terminologie di cui parli ne sono completamente all’oscuro. Girando per il web queste informazioni non ne visto nemmeno l’ombra, ma tu le avrai pure prese da qualche parte! In giro si trovano tanti tutorial su come utilizzare Sigil, ma mai un template di base ben strutturato da cui partire, ne esistono?
PS: ho scaricato il tuo layout a più lingue ma in Sigil a parte le parti di cui è composto, non si vede nulla in anteprima è tutto normale?
Ciao, nessun disturbo, anzi.
Purtroppo hai ragione, non ci sono molte fonti sul lato grafico degli eBook. Bisogna un po’ riadattare e rimescolare le informazioni che si possono trovare sul web design e sulla grafica editoriale cartacea. In fondo ai miei articoli puoi trovare le fonti specifiche rispetto agli argomenti trattati; il resto viene da studi generali sul web design e sulla grafica editoriale, appunto. È un mondo ancora in sviluppo e ancora molto confuso. Se si vuole creare qualcosa di nuovo, originale o comunque accattivante, bisogna procedere ancora un po’ a tentativi.
Per quanto riguarda i template per Sigil. Io non ne ho mai trovati, ed è anche per questo che sono nati “Prove di layout”. Per un approccio basico all’eBook design, meglio se vai sui primi numeri. L’ultimo è più per mostrare le possibilità di Javascript integrato agli eBook. A questo proposito, sì, è normale che non si veda nulla nell’anteprima. Lo script che ho inserito legge la lingua del dispositivo di lettura e fa apparire il testo in quella lingua; da Sigil non legge nulla perché è un editor testuale e quindi non riesce a determinarne la lingua. Se vai nel codice HTML del testo, vedrai una class CSS “invisibile”, se la modifichi in “visibile” ti apparirà il testo – che è il lavoro che fa lo script inserito. Per fare la prova invece sul dispositivo di lettura, prova a cambiare nelle tue impostazioni la lingua di default in inglese.
Se hai altre domande, anche specifiche, scrivimi pure. È sempre bello ricevere nuovi spunti.
Spero di averti risposto.