Alcuni libri includono elementi con dimensioni e posizionamento del testo fissi, che non permettono di ridimensionare i caratteri o riadattare il testo. Ad esempio, i libri da consultazione e i libri illustrati per bambini includono immagini a tutta pagina con testo collocato esattamente in relazione all'illustrazione sullo sfondo. Questo formato, tuttavia, non è appannaggio esclusivo di questi tipi di libri.

I libri a impaginazione fissa non supportano il testo ridimensionabile e dovrebbero essere utilizzati solo quando l'intero libro è adatto al formato a impaginazione fissa. I libri non possono essere parzialmente ridimensionabili o avere un'impaginazione fissa parziale. Consulta i dettagli sulla creazione di questo tipo di eBook con Kindle Kids' Book Creator.

Al momento questo formato non supporta la composizione migliorata.

Importante: i tag di ancoraggio nidificati non sono supportati nei libri a impaginazione fissa. I libri a impaginazione fissa con tag di ancoraggio nidificati saranno eliminati.

Sommario

• Linee guida sui metadati
• Linee guida per l'immagine di copertina
• Linee guida per il testo
• Requisiti dei contenuti
• Linee guida per HTML e CSS
• Creazione di libri a impaginazione fissa con pop-up di testo e con testo e immagini di sfondo multipagina

---

Linee guida sui metadati

Il file OPF specifica i metadati necessari per i libri a impaginazione fissa. I vari tipi di formati a impaginazione fissa, benché simili, presentano alcune differenze sostanziali. A meno che non sia esplicitamente indicato, le istruzioni per i libri a impaginazione fissa con pop-up di testo non devono essere applicate ad altri formati, come i libri a impaginazione fissa con pop-up di immagini o vignette virtuali.

Metadati	Descrizione
Il layout può essere specificato utilizzando uno dei seguenti campi di metadati: 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Obbligatorio. Indica che il libro ha un layout fisso. I valori validi per i metadati rendition:layout sono reflowable o pre-paginated. Il valore di default è reflowable. I valori di default per i metadati fixed-layout sono true o false. Il valore di default è false.
<meta name="original-resolution" content="1024x600"/>	Obbligatorio. Identifica la risoluzione del design originale del contenuto ("1024 x 600" è solo un esempio). Le dimensioni dei pixel possono avere un valore intero positivo qualsiasi. Questi valori devono essere rapportati alle proporzioni generali del contenuto originale.
L'orientamento può essere specificato utilizzando uno dei seguenti campi di metadati: 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> Nota: questa funzione non è attualmente supportata in iOS.	Opzionale (ma consigliato). I valori validi per i metadati rendition:layout sono portrait, landscape o auto. Blocca l'orientamento del libro su orizzontale o verticale. Se il valore è auto, sono supportati sia l'orientamento orizzontale sia quello verticale. Il valore di default è auto. I valori validi per i metadati orientation-lock sono portrait, landscape o none. Blocca l'orientamento del contenuto su verticale o orizzontale. Se il valore è none, sono supportati sia l'orientamento orizzontale sia quello verticale. Il valore di default è none.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Opzionale. Definisce l'ordine di resa della pagina, la modalità di lettura e la navigazione del lettore (inclusi Kindle Text Pop-Up, Visualizzazione Vignette Kindle e Vignette Virtuali Kindle). I valori validi sono horizontal-lr, horizontal-rl, vertical-lr e vertical-rl. Il comportamento di default è horizontal-lr quando la direzione di avanzamento delle pagine è da sinistra a destra o non è specificata. Usa il valore horizontal-rl per impostare la direzione di avanzamento delle pagine da destra a sinistra. Usa il valore vertical-rl per impostare la direzione di avanzamento delle pagine da destra a sinistra per i libri in cinese, giapponese e coreano.
<meta name="book-type" content="children"/>	Opzionale per i libri per bambini. Rimuove le funzionalità del lettore (ad esempio la condivisione) che potrebbero non essere pertinenti per alcuni libri come gli eBook per bambini. I valori validi sono children o comic.

---

Linee guida per l'immagine di copertina

Sebbene i libri Kindle in formato adattabile non usino quarte di copertina, nei contenuti per bambini tali pagine comunicano il senso della conclusione della narrazione. È consigliabile includere una quarta di copertina nei libri per bambini. Per gli altri tipi di libri che usano questo formato non è necessario fornire una quarta di copertina. Rimuovi codici a barre, elenchi dei prezzi e contenuti promozionali dall'immagine della quarta di copertina. I pop-up di testo sono necessari e consigliati per la sintesi del contenuto nella quarta di copertina, ma non sono richiesti per testi di altro tipo della quarta di copertina.

---

Linee guida per il testo

I titoli a impaginazione fissa non consentono agli utenti di selezionare e variare i caratteri. L'uso di @font-face di CSS e la creazione di pacchetti di caratteri con il titolo conferisce al libro un aspetto uniforme su tutti i dispositivi e gli schermi. Questo assicura non soltanto che siano utilizzati gli stessi caratteri nel documento di origine e nel titolo a impaginazione fissa, ma garantisce anche una resa più fluida del testo HTML tra la visualizzazione della pagina e la visualizzazione con ingrandimento dell'area.

Esempio:

@font-face { font-family: "Arial"; /* assigns the name of the font to use */ src: url(../fonts/arial.otf); /* includes the file for the correct font */ }

Suggerimento per l'accessibilità: i caratteri sottili sono più difficili da leggere e possono influire sul contrasto percepito del testo con lo sfondo. Amazon consiglia di evitare l'uso di caratteri sottili per il corpo del testo.

---

Requisiti dei contenuti

Requisito n° 1: uso della struttura dei file HTML

I contenuti con impaginazione fissa devono avere un unico file HTML per ogni pagina rappresentata su un dispositivo Kindle. A tal fine, è necessario usare un'immagine nel file HTML o utilizzare il file HTML per collegare due immagini e visualizzarle come pagina singola quando il blocco dell'orientamento è impostato su orizzontale.

Blocco dell'orientamento verticale:

1 pagina di stampa = 1 file HTML

Esempio:

Blocco dell'orientamento orizzontale:

2 pagine di stampa (1 immagine su due pagine) = 1 file HTML

Esempio:

Requisito n° 2: uso dell'ingrandimento dell'area (pop-up)

Il contenuto a impaginazione fissa non permette all'utente di modificare la dimensione del carattere; tale operazione potrebbe oscurare i contenuti rilevanti per la narrazione. Kindle usa l'ingrandimento dell'area (pop-up) per ingrandire il testo a impaginazione fissa senza alterare il layout originale. L'immagine in fondo a questa sezione è un esempio di ingrandimento dell'area.

L'utente attiva l'ingrandimento dell'area toccando due volte un'"area attiva" sui dispositivi touchscreen. Sui dispositivi non touchscreen, facendo clic sulla freccia in alto del pulsante di navigazione si seleziona l'area e facendo clic sul pulsane centrale si attiva Kindle Text Pop-Up o Visualizzazione Vignette Kindle. Durante l'ingrandimento dell'area, l'area attiva (elemento sorgente) è nascosta e l'area di ingrandimento (elemento di destinazione) è visualizzata. Quando un eBook è configurato per supportare l'ingrandimento dell'area, KindleGen rileva automaticamente il codice di ingrandimento e imposta il valore dei metadati di tale opzione nel file OPF su "true".

Per supportare l'ingrandimento dell'area, è necessario attenersi alla seguente procedura:

1. Configura l'area attiva creando un elemento di ancoraggio HTML (<a>) ben definito intorno al testo da ampliare, che specifichi la classe app-amzn-magnify. L'ancoraggio dovrebbe inoltre avere i seguenti attributi archiviati in un oggetto JSON come parte del valore data-app-amzn-magnify:
   1. "targetId":"<string:elementId>" = ID elemento univoco dell'area di ingrandimento (posizione e dimensione carattere sono configurate nel file CSS)
   2. "sourceId":"<string:elementId>" = ID elemento univoco della sorgente che sarà ingrandita
   3. "ordinal":<integer:reading order> = ordine di lettura delle aree di ingrandimento (l'ordine in cui i riquadri compaiono nel flusso di lettura). È obbligatorio per tutto il testo in cui viene applicato l'ingrandimento dell'area.
2. Quando è attivato l'ingrandimento, il testo sorgente non è più visualizzato. Crea un elemento <div> di destinazione allineato in modo da coprire completamente il testo da ingrandire e posizionato in modo da ridurre al minimo la copertura dell'immagine di sfondo della pagina. Questo garantisce che, una volta attivato l'ingrandimento dell'area, il testo sorgente non scomparirà dalla visualizzazione della pagina. È importante anche non posizionare finestre pop-up direttamente sul bordo destro o inferiore dello schermo. Le differenze tra le varie tipologie di dispositivi possono creare errori di overflow del contenuto se i pop-up sono troppo vicini a questi bordi. Controlla il contenuto su tutte le tipologie di dispositivi possibili prima della pubblicazione.
3. La dimensione del carattere del testo nell'elemento <div> dell'ingrandimento dell'area deve essere pari al 150% della dimensione carattere normale sulla pagina. Esistono varie eccezioni:
   • Un'eccezione è quando il testo nella pagina è così grande che ingrandirlo al 150% lo renderebbe difficile da leggere invece di migliorarne la leggibilità. L'ingrandimento dell'area non è necessario per il testo con un'altezza di almeno 4 mm nei contenuti per bambini o un'altezza di almeno 2 mm nei contenuti di altro tipo sui dispositivi da 7".
   • Un'altra eccezione è quando il testo nella pagina deve essere ingrandito più del 150% per migliorare la leggibilità nell'elemento <div> dell'ingrandimento dell'area. Ad esempio, se nella pagina la dimensione carattere è del 45%, nell'elemento <div> dell'ingrandimento dell'area potrebbe essere necessario ingrandirla al 225% affinché sia leggibile.

Pagina di esempio di impaginazione fissa

Stessa pagina di esempio con ingrandimento dell'area attivato

Esempio:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

Linee guida per HTML e CSS

Ripristino CSS

Applicare il ripristino CSS per ripristinare i libri a impaginazione fissa. Un ripristino CSS rimuove gli stili incoerenti applicati automaticamente dai browser, come dimensioni carattere, margini ecc. L'aggiunta di un ripristino CSS, come il ripristino YUI, rimuove queste incoerenze e consente ai progettisti di utilizzare modelli di applicazione dello stile affidabili.

File CSS per libri a impaginazione fissa

Per migliorare le prestazioni quando si sfogliano le pagine sui libri a impaginazione fissa, è possibile dividere i file CSS in modo che ogni gruppo di pagine HTML sia associato a un proprio file CSS. I file CSS dovrebbero contenere esclusivamente informazioni consultate direttamente dai file HTML associati.

Ottimizzazione dei contenuti per lo schermo intero

I libri Kindle vengono letti su una grande varietà di dispositivi (come tablet Fire e smartphone e tablet di altri produttori) e su schermi di molteplici dimensioni. Kindle Fire HD 8,9" 2013 ha una risoluzione di 1920 x 1200 pixel. Elabora i contenuti in modo da mantenere queste proporzioni, se possibile.

Per un'esperienza utente ottimale, Amazon consiglia vivamente agli editori di progettare contenuti a impaginazione fissa per sfruttare al massimo lo spazio disponibile sullo schermo. Se i contenuti hanno proporzioni o dimensioni diverse, i dispositivi e le applicazioni Kindle li mostreranno ridimensionati per adattarli allo schermo, centrati o circondati da un bordo bianco (letterbox).

I libri a impaginazione fissa e altri contenuti ricchi di immagini avranno maggiori probabilità di essere ingranditi in quanto i clienti preferiscono leggere con la Visualizzazione Vignette Kindle o su dispositivi con schermi di grandi dimensioni. La best pratice consiste nell'utilizzare immagini con la massima risoluzione possibile. Amazon consiglia di inviare immagini di qualità elevata ridimensionate in modo da supportare un ingrandimento di almeno 2x. Ad esempio, per la lettura su Kindle Fire HD 8,9" 2013, le dimensioni in pixel dell'immagine dovrebbero essere di almeno 3840 x 2400 (ciò corrisponde alle proporzioni e supporta lo zoom 2x). Usa sempre Kindle Previewer per verificare la qualità del contenuto.

Uso di grandi target tocco per l'ingrandimento dell'area nei libri a impaginazione fissa con pop-up di testo

L'ingrandimento dell'area ha come scopo principale agevolare l'accessibilità ed è più efficace quando il target tocco è più grande dell'area da ingrandire. Per attivare un'area più ampia, considera la possibilità di aggiungere un riempimento di 20-40 pixel agli elementi di ancoraggio app-amzn-magnify, ma tieni presente che i target tocco non devono sovrapporsi.

Uso di position:absolute per il testo su un'immagine

Per posizionare con precisione il testo su un'immagine, usa l'attributo position:absolute. Utilizza questo attributo solo per i libri in cui è richiesta un'impaginazione fissa, come i libri illustrati per bambini con testo posizionato specificamente in relazione agli elementi dell'immagine di sfondo.

Contenuti a impaginazione fissa per dispositivi futuri con pop-up di testo

Per definizione, l'impaginazione fissa è concepita per una sola grandezza di schermo. Per garantire che i contenuti siano utilizzabili in futuro, Amazon consiglia di usare i pixel per la dimensione del testo e il posizionamento dei blocchi di testo. Specificare la dimensione del carattere o la posizione del testo in percentuali può produrre frazioni di pixel che possono essere interpretate in modo diverso nei vari dispositivi.

---

Creazione di libri a impaginazione fissa con pop-up di testo e con testo e immagini di sfondo multipagina

Questa sezione spiega come creare correttamente pagine contenenti un'immagine di sfondo singola e del testo. Benché le soluzioni a disposizione siano numerose, l'obiettivo di Amazon è quello di rendere il markup facilmente trasferibile con il minimo sforzo. Il modello fornito permette di raggiungere questo obiettivo aggiornando le regole CSS senza alcun impatto sull'HTML.

Utilizzo delle immagini adiacenti quando il blocco dell'orientamento è impostato su orizzontale

Molti libri presentano una disposizione orizzontale che consiste in un'immagine singola. Altri libri presentano una disposizione orizzontale che consiste in due immagini adiacenti messe assieme.

Nell'esempio sottostante la disposizione orizzontale è di 1024 x 600 pixel, cioè la risoluzione a schermo intero di Kindle Fire (1a generazione). Le immagini per ciascuna pagina dovrebbero misurare esattamente la metà della larghezza dello schermo intero: 512 x 600 pixel. Le parti univoche di ogni elemento sono etichettate usando ID CSS; le parti comuni utilizzano classi CSS. L'immagine di sinistra è visualizzata a sinistra. L'immagine di destra viene spostata verso la parte destra della pagina definendo uno stile margin-left impostato sulla larghezza dell'immagine a sinistra.

Il risultato finale consiste in due pagine adiacenti, messe insieme in modo da creare un'unica immagine da visualizzare con orientamento orizzontale. Questo formato è diverso dalla disposizione sintetica, esclusiva dei book-type fumetto, in cui una pagina è visibile con orientamento verticale e due pagine adiacenti sono visibili con orientamento orizzontale.

HTML:

<div class="fs"> <div id="fs9-img" class="lPage"></div> <div id="fs10-img" class="rPage"></div> </div>

CSS:

/* Region sized for both pages */ #fs9-img { background-image: url("../images/005a.jpg"); background-size:100% 100%; } #fs10-img { background-image: url("../images/005b.jpg"); background-size:100% 100%; } div.fs { height: 600px; width: 1024px; /* 2 x page width */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x screen width */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x screen width / margin-left: 512px; /* this value equals the value of the left side image width */ }

Posizionamento dei blocchi di testo

Specifica la posizione e la dimensione carattere corrette utilizzando valori percentuali. Ciò consente un ridimensionamento coerente a diverse risoluzioni, garantendo la compatibilità con un un'ampia gamma di dispositivi e schermi. Ogni paragrafo dovrebbe essere raggruppato all'interno di un unico elemento <div> con righe multiple interrotte da elementi <br/>. Se è richiesta un'interlinea personalizzata, assegnala tramite le dichiarazioni di stile CSS anziché aggiungere markup extra come contenitori <div> multipli o tag di interruzione di riga aggiuntivi.

Consulta un esempio di immagine su due pagine in cui viene illustrato come posizionare il testo sopra un'immagine di sfondo: il testo viene collocato all'interno di un blocco di distribuzione fisso, utilizza le percentuali per gli attributi dei margini e viene allineato e spostato tramite CSS. I pop-up di testo devono essere posizionati in modo da coprire il testo corrispondente sullo sfondo.

Allineamento del testo

Per default, il testo viene allineato con l'angolo in alto a sinistra dell'elemento HTML che lo contiene. In molti libri il testo è allineato a destra, in basso o giustificato. Il modo più semplice per identificare l'allineamento è immaginare una cornice intorno al testo e individuare quali bordi del paragrafo sono associati al margine (sinistro, destro, superiore, inferiore).

Non usare mai lo spazio unificatore (&nbsp;) per l'allineamento del testo. Prediligi l'uso di CSS in alto, a destra, in basso e a sinistra per collocare gli elementi <div> che contengono testo posizionato in maniera assoluta. Usa due lati adiacenti per posizionare ogni elemento <div>. Ad esempio in alto e a sinistra ma mai in alto, a sinistra e in basso. Le proprietà CSS text-indent e line-height sono utili per allineare il testo all'interno dei blocchi HTML.