Graphic novel, manga e fumetti (di seguito definiti graphic novel) sono i più comuni libri a impaginazione fissa con pop-up di immagini o vignette virtuali. Sono simili ai libri per bambini, ma presentano una sfida a sé in quanto generalmente sono più lunghi e hanno contenuti più complessi.

I graphic novel comprendono una grande quantità di dettagli in immagini visualizzate su uno schermo 1920 x 1200. Per ovviare a questo e ad altri problemi di accessibilità, Amazon suggerisce l'uso di contenuti personalizzati e della funzionalità Visualizzazione Vignette Kindle, che ottimizza i contenuti per un'esperienza di lettura ad alta risoluzione. Consulta i dettagli su Kindle Comic Creator.

Questo formato supporta la composizione migliorata, a condizione che nell'eBook non sia presente testo ibrido (consulta i dettagli sul testo ibrido).

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 sulle immagini
• Visualizzazione Vignette (ingrandimento dell'area)
• Vignette virtuali nei fumetti e nei manga
• Ottimizzazione del contenuto per l'esperienza di lettura di un graphic novel
• Linee guida per il testo
• Visualizzazione guidata

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é siano simili, presentano alcune differenze fondamentali. A meno che non sia esplicitamente indicato, le istruzioni per i libri a impaginazione fissa con pop-up di immagini o vignette virtuali non devono essere applicate ad altri formati, come i libri a impaginazione fissa con pop-up di testo.

Linee guida sulle immagini

Quando sono ottimizzati per Kindle Fire HD 8,9" 2013, i graphic novel dovrebbero mantenere le proporzioni 1920 x 1200. La risoluzione dell'immagine sarà differente a seconda del fattore di ingrandimento richiesto per Visualizzazione Vignette Kindle.

Tuttavia, Amazon consiglia di pianificare un'esperienza di lettura di alta qualità con ingrandimento 2x. Le immagini devono essere nel formato JPEG. Amazon consiglia di usare una risoluzione di almeno 300 ppi.

Ci sono cinque fattori di ingrandimento standard:

Per ottenere immagini di qualità nei graphic novel, è necessario rispettare gli standard di risoluzione elencati in questa sezione e mantenere proporzioni coerenti. Più di ogni altra cosa, tuttavia, è importante ottimizzare le immagini in termini di chiarezza dell'immagine di sfondo e di leggibilità del testo. Questi due fattori garantiscono la massima qualità per il formato del graphic novel.

Visualizzazione Vignette (ingrandimento dell'area)

La Visualizzazione Vignette per i graphic novel offre un'esperienza di lettura unica. Favorisce l'accessibilità e permette agli utenti di provare il flusso d'azione ad alta risoluzione in ogni pagina, in modo semplice. Per visualizzare l'intera pagina, gli utenti possono abbandonare la Visualizzazione Vignette in qualsiasi momento. Per un esempio di Visualizzazione Vignette, fai riferimento alle immagini di questa sezione.

L'utente attiva la Visualizzazione Vignette toccando due volte un "target tocco". L'area attiva (elemento sorgente) viene nascosta e viene mostrata la Visualizzazione Vignette (elemento target).

Per supportare la Visualizzazione Vignette, sono necessari i seguenti passaggi:

1. Imposta il target tocco creando un elemento contenitore (<div>) ben definito con un elemento di ancoraggio (<a>) al suo interno. L'elemento <div> fornisce la dimensione e la posizione del target tocco. L'elemento <a> è dimensionato per riempire l'elemento <div> e deve specificare 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 univoco dell'elemento HTML della Visualizzazione Vignette che rappresenta l'area ingrandita
   2. "ordinal":<integer:reading order> = ordine di lettura delle aree di ingrandimento (l'ordine in cui i riquadri compaiono nel flusso di lettura)
2. Crea un elemento target <div> dei riquadri di visualizzazione, dimensionato e posizionato per rappresentare l'azione che riflette meglio il target tocco.
   
   

   Istantanea di contenuto a impaginazione fissa

   Istantanea dello stesso contenuto con la Visualizzazione Vignette attivata

   Esempio:

   <div> <img src="images/page_002.jpg" alt="Comic Book Images" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="Comic Book Images"/> </div> </div>

   
   

   ---

   Vignette virtuali nei fumetti e nei manga

   La funzionalità Vignette virtuali viene attivata per i fumetti e i manga in assenza di riquadri forniti dall'editore. I metadati RegionMagnification sono usati per verificare se l'editore ha fornito informazioni sui riquadri. Se l'editore ha incluso i riquadri di ingrandimento dell'area su una pagina qualsiasi, la vista Visualizzazione Vignette Kindle non viene abilitata.

   Per default, ogni pagina è divisa in quattro riquadri in base al valore primary-writing-mode. Gli esempi seguenti indicano l'ordine dei riquadri.

   Esempio:

   Orientamento verticale:

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Orientamento orizzontale:

   

   Vertical-lr e Horizontal-lr, Horizontal-rl e Vertical-rl

   Alcuni dispositivi si adattano alla disposizione sintetica:

   

   Vertical-rl, Vertical-lr

   Requisito n° 1: uso di una disposizione sintetica quando il blocco dell'orientamento è disattivato

   Se l'orientamento non è bloccato, il contenuto dovrebbe essere progettato per l'orientamento orizzontale e verticale. Alcuni dispositivi mostrano una disposizione sintetica con due pagine affiancate con orientamento orizzontale. Tutte le pagine da utilizzare in una disposizione sintetica dovrebbero avere una pagina abbinata definita nell'orientamento orizzontale. Nell'orientamento verticale, le coppie sono ignorate.

   Le pagine da utilizzare nelle disposizioni sintetiche dovrebbero essere codificate con le proprietà page-spread-left o page-spread-right. Ogni pagina sinistra dovrebbe avere una pagina destra associata e viceversa. Le pagine singole possono essere centrate sul dispositivo con orientamento orizzontale utilizzando la proprietà page-spread-center.

   

   Con l'orientamento verticale, le due pagine saranno visualizzate separatamente:

   

   Se nessuna delle proprietà viene specificata, o se una pagina è codificata con la proprietà page-spread-left senza una proprietà page-spread-right corrispondente (o viceversa), Kindle utilizza page-spread-center e centra le pagine senza proprietà page-spread quando il dispositivo è in 'orientamento orizzontale.

   L'esempio seguente presume che primary-writing-mode corrisponda a horizontal-lr o vertical-lr.

   Esempio:

   <spine> <itemref idref="page1" /> <!--NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page4" properties="page-spread-right"/> <!-- NOTE: synthetic spread's; right viewport --> </spine>

   L'esempio seguente presume che primary-writing-mode corrisponda a horizontal-rl o vertical-rl.

   Esempio:

   <spine> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="facing-page-right" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!-- NOTE: synthetic spread's right viewport --> <itemref idref="page4" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> </spine>

   Nei casi in cui a una pagina sinistra non abbia una pagina destra equivalente (o viceversa), l'editore può inserire una pagina HTML vuota e aggiungere la proprietà layout-blank alla pagina, a meno che non si tratti dell'ultima pagina. Facoltativamente, la pagina vuota può includere il titolo e la filigrana del libro.

   Le pagine con la proprietà layout-blank sono visualizzate solo con orientamento orizzontale e sono ignorate nell'orientamento verticale.

   In alcuni casi, l'editore potrebbe inserire una pagina vuota, che viene sempre visualizzata in entrambi gli orientamenti, verticale e orizzontale. In questo caso, non usare la proprietà layout-blank. Usa le stesse regole per le disposizioni sintetiche precedentemente indicate e fai riferimento a un file immagine che contiene un JPEG "vuoto".

   L'esempio seguente presume che primary-writing-mode corrisponda a horizontal-lr o vertical-lr.

   Esempio:

   <spine> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!-- NOTE: assumed to be properties="page-spread-right". Ignored in portrait mode. --> <itemref idref="page2" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page3" properties="page-spread-right"/> <!--NOTE: synthetic spread's right viewport --> </spine>

   
   

   ---

   Ottimizzazione del contenuto per l'esperienza di lettura di un graphic novel

   Ottimizzazione dei target tocco

   I target tocco dovrebbero coprire completamente lo schermo per consentire agli utenti di ingrandire l'area desiderata toccando due volte il graphic novel.

   
   

   Ottimizzazione dei riquadri di visualizzazione

   Per default, i riquadri di visualizzazione dovrebbero corrispondere al 150% dei target tocco. È accettabile usare riquadri di dimensioni diverse per mettere in evidenza una scena di azione specifica all'interno del target tocco.

   Posiziona i riquadri di visualizzazione in modo che coprano l'immagine corrispondente sullo sfondo, sistemandoli su riquadri di base e allineandoli ai margini ove possibile.

   Quando si mantiene il contesto su più riquadri, una leggera sovrapposizione con gli altri riquadri di visualizzazione è accettabile.

   

   Per usare il fattore di ingrandimento di default del 150%, spesso è necessario dividere una scena di azione in due riquadri di visualizzazione (solitamente, uno a sinistra e uno a destra oppure uno sopra e uno sotto). Ciò garantisce un'esperienza migliore per l'utente rispetto all'uso di un fattore di ingrandimento più piccolo, poiché permette di mantenere l'accessibilità e garantisce una risoluzione migliore per la lettura.

   Dividi i target tocco in modo che il primo rappresenti tra il 50% e il 75% della larghezza dell'intera area e il secondo rappresenti il restante valore necessario per arrivare al 100%. In questo modo, quando un utente tocca due volte un'area vicina al centro del riquadro di azione, visualizza il primo riquadro e, successivamente, il secondo.

   Per mantenere il flusso dell'azione, è richiesto un minimo di sovrapposizione delle azioni tra i riquadri di visualizzazione.

   Primo riquadro di visualizzazione di una scena di azione divisa in due riquadri

   Secondo riquadro di visualizzazione di una scena di azione divisa in due riquadri

   
   

   ---

   Linee guida per il testo

   Per i libri a impaginazione fissa con pop-up di immagini: Le immagini devono avere una risoluzione di almeno 300 ppi e il testo al loro interno deve essere nitido e leggibile, senza pixelizzazione o sfocature; le lettere maiuscole devono avere un'altezza di almeno 2 mm nei pop-up, se visualizzate su un dispositivo da 7". Come best practice, va applicato un fattore di ingrandimento pari al 150% o superiore.

   Per le vignette virtuali a impaginazione fissa: Le immagini devono avere una risoluzione di almeno 300 ppi e il testo al loro interno deve essere nitido e leggibile, senza pixelizzazione o sfocature se ingrandite a 2 mm di altezza e visualizzate su un dispositivo da 7".

   Per visualizzare grandi quantità di testo, Amazon suggerisce una gestione ibrida del testo, a metà tra graphic novel e libri per bambini. Amazon consiglia di limitare l'uso della gestione ibrida alle sezioni del testo troppo ampie per essere ingrandite in modo efficace. La gestione ibrida del testo dovrebbe imitare la formattazione del testo che rappresenta in relazione all'altezza delle righe, all'uso del corsivo e/o del grassetto e all'aspetto generale. Questo offre una migliore esperienza utente.

   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 carattere o la posizione del testo in percentuali può produrre frazioni di pixel che possono essere interpretate in modo diverso nei vari dispositivi.

   La funzione di composizione migliorata non supporta i graphic novel con testo ibrido.

   

   Esempio di testo ibrido HTML:

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ab aquiline regem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   Esempio di testo ibrido CSS:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color font-size: 150%; font-family: "Arial"; }

   
   

   ---

   Visualizzazione guidata

   La visualizzazione guidata consiste in una serie di funzionalità che permettono di ottimizzare la lettura di un eBook di fumetti e sono ora disponibili per alcuni fumetti Kindle. Queste funzionalità consentono di visualizzare un fumetto vignetta per vignetta sui dispositivi mobili imitando il movimento naturale dell'occhio del lettore. La visualizzazione guidata anima il movimento da vignetta a vignetta con ciascun trascinamento per fornire una chiara indicazione sull'avanzamento della storia di pagina in pagina. Le funzionalità della visualizzazione guidata includono:

   • Un'esperienza di lettura guidata vignetta per vignetta usando l'ordine stabilito dall'editore
   • Vignette ingrandite a tutto schermo e centrate
   • Personalizzazione dei colori di mascheramento intorno a ciascuna vignetta ingrandita

   
   

   La visualizzazione guidata è applicata automaticamente ai fumetti Kindle compatibili e utilizza il codice Visualizzazione Vignette esistente per posizionare in modo corretto le vignette nella visualizzazione guidata. Lavoriamo assiduamente per rendere la visualizzazione guidata compatibile con più titoli e abiliteremo automaticamente tale funzionalità ai tuoi fumetti Kindle laddove possibile.