Graphic Novels, Mangas und Comics (nachstehend unter dem Begriff „Graphic Novels“ zusammengefasst) sind die häufigsten Bücher mit festem Layout und Bild-Pop-ups oder Virtual Panels. eBooks für Kinder können als Bücher mit festem Layout und Bild-Pop-ups erstellt werden (auch bekannt als geführte Navigation, falls sie mit Kindle Create erstellt wurden), bei der Text und Bild zusammen in einem filmischen Leseerlebnis vergrößert werden. Die Leserinnen und Leser werden dabei von Panel zu Panel geführt. Weitere Informationen zur Vorbereitung von Comicbüchern und Büchern für Kinder mit geführter Navigation.

Graphic Novels enthalten sehr detaillierte Bilder, die auf einem Bildschirm mit 1 920 x 1 200 Pixeln dargestellt werden. Nutzen Sie individuell angepasste Inhalte sowie die Funktion „Kindle Panel View“, die den Inhalt für eine hochauflösende Darstellung optimiert, um diese und andere Probleme in Bezug auf die Barrierefreiheit zu vermeiden.

Dieses Format unterstützt den verbesserten Schriftsatz, vorausgesetzt, das eBook enthält keinen Hybridtext (siehe Details zum Hybridtext).

Wichtig: Verschachtelte Anker-Tags werden in Büchern mit festem Layout nicht unterstützt. Bücher mit festem Layout und verschachtelten Anker-Tags können daher nicht veröffentlicht werden.

Inhalt

• Metadatenrichtlinien
• Bildrichtlinien
• Panel View (Bereichsvergrößerung)
• Virtual Panels in Comics und Mangas
• Inhalte in Graphic Novels optimieren
• Textrichtlinien
• Geführte Navigation:

Metadatenrichtlinien

Die OPF-Datei definiert die Metadatenfelder, die für ein Buch mit festem Layout benötigt werden. Die verschiedenen Arten von Büchern mit festem Layout weisen neben Ähnlichkeiten auch signifikante Unterschiede auf. Sofern dies nicht ausdrücklich angegeben ist, sollten Richtlinien für Bücher mit festem Layout mit Bild-Pop-ups oder Virtual Panels nicht auf andere Formate, wie etwa Bücher mit festem Layout mit Text-Pop-ups, angewandt werden.

Bildrichtlinien

Graphic Novels, die für den Kindle Fire HD 8.9 (2013) optimiert werden, sollten ein Seitenverhältnis von 1 920 x 1 200 aufweisen. Die Bildauflösung hängt dabei vom Zoomfaktor ab, der für Kindle Panel View erforderlich ist.

Für eine hochwertige Leseerfahrung empfiehlt Amazon, eine Vergrößerung von 2x einzuplanen. Bilder müssen im JPEG-Format vorliegen. Amazon empfiehlt eine Bildauflösung von mindestens 300 ppi.

Es gibt fünf Standardzoomfaktoren.

Die Bildqualität für Graphic Novels muss den Auflösungsstandards entsprechen, die in diesem Abschnitt beschrieben werden. Außerdem müssen die Bildseitenverhältnisse erhalten bleiben. Besonders wichtig ist die Optimierung der Bilder für eine klare Darstellung von Hintergrundbildern und bestmögliche Lesbarkeit des Textes. Diese beiden Faktoren gewährleisten die höchste Darstellungsqualität für Graphic Novels.

Panel View (Bereichsvergrößerung)

Panel View für Graphic Novels ermöglicht eine einzigartige Leseerfahrung. Diese benutzerfreundliche Funktion verbessert die Zugänglichkeit der Inhalte und bietet Leserinnen und Lesern ein ansprechenderes Erlebnis des Aktionsflusses in hochauflösender Darstellung auf jeder Seite. Benutzerinnen und Benutzer können die Panel View jederzeit abbrechen und zur Darstellung der gesamten Seite zurückkehren. Die Bilder in diesem Abschnitt zeigen ein Beispiel für die Panel View.

Benutzerinnen und Benutzer aktivieren die Panel View durch Doppeltippen auf ein „Tippziel“. Der aktive Bereich (Quellelement) ist verborgen und die Panel View (Zielelement) wird angezeigt.

Um die Panel View zu unterstützen, sind folgende Schritte notwendig:

1. Legen Sie das Tippziel fest, indem Sie ein gut definiertes Container-Element (<div>) erstellen, das ein Anker-Element (<a>) enthält. Das <div>-Element liefert die Größe und die Position des Tippziels. Das <a>-Element füllt das <div>-Element aus und muss der Klasse „app-amzn-magnify“ angehören. Für den Anker sollten zudem folgende Attribute in einem JSON-Objekt als Teil des „data-app-amzn-magnify“-Werts abgelegt werden:
   1. "targetId":"<string:elementId>" = eindeutige Element-ID des Panel View-HTML-Elements, die dem vergrößerten Bereich zugewiesen ist
   2. "ordinal":<integer:reading order> = Lesereihenfolge des vergrößerten Bereichs (die Reihenfolge, in der die Bereiche als Teil des Leseflusses erscheinen)
2. Erstellen Sie ein <div>-Element für das Panel der Zielansicht, und definieren Sie Größe sowie Position entsprechend so, dass die Aktion, die das Tippziel am besten widerspiegelt, angezeigt wird.
   
   

   Darstellung eines Inhalts mit festem Layout

   Darstellung desselben Inhalts mit aktivierter Panel View

   Beispiel:

   <div> <img src="images/page_002.jpg" alt="Comic-Bilder" 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-Bilder"/> </div> </div>

   
   

   ---

   Virtual Panels in Comics und Mangas

   Wenn der Verlag keine Panels erstellt hat, wird für Comic- und Manga-Bücher die Funktion „Virtual Panels“ aktiviert. Anhand der RegionMagnification-Metadaten wird geprüft, ob der Verlag Panel-Informationen bereitgestellt hat. Hat der Verlag auf einer Seite Panels mit Bereichsvergrößerung erstellt, wird das Kindle Virtual Panel nicht aktiviert.

   Standardmäßig wird jede Seite entsprechend dem Wert „primary-writing-mode“ in vier Panels unterteilt. Die folgenden Beispiele zeigen die Reihenfolge der Panels.

   Beispiel:

   Hochformat:

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Querformat:

   

   Vertical-lr und Horizontal-lr, Horizontal-rl und Vertical-rl

   Manche Geräte unterstützen synthetische Doppelseiten:

   

   Vertical-rl, Vertical-lr

   Anforderung Nr. 1: Synthetische Doppelseiten bei deaktivierter Ausrichtungssperre verwenden

   Wenn die Ausrichtung nicht gesperrt ist, muss der Inhalt sowohl für Hoch- als auch Querformat ausgelegt sein. Bei manchen Geräten wird im Querformat eine synthetische Doppelseite mit zwei nebeneinander positionierten Bildern angezeigt. Jede Seite, die für eine synthetische Doppelseite verwendet werden soll, sollte für die Darstellung im Querformat mit einer definierten Seite gepaart sein. Bei Ausrichtung im Hochformat werden diese Seitenpaare ignoriert.

   Seiten, die für eine synthetische Doppelseite verwendet werden sollen, sollten mit der Eigenschaft „page-spread-left“ oder „page-spread-right“ gekennzeichnet werden. Jeder linken Seite wird eine rechte Seite zugeordnet und umgekehrt. Einzelseiten können im Querformat auf der Seite zentriert werden, indem die Eigenschaft „page-spread-center“ verwendet wird.

   

   Im Hochformat werden die beiden Seiten einzeln angezeigt:

   

   Wenn keine der Eigenschaften angegeben ist oder eine Seite als „page-spread-left“ gekennzeichnet ist, ohne dass ein entsprechendes „page-spread-right“ vorhanden ist (oder umgekehrt), wird „page-spread-center“ verwendet und Seiten ohne „page-spread“-Eigenschaft werden im Querformat zentriert.

   Im folgenden Beispiel wird davon ausgegangen, dass für das Attribut „primary-writing-mode“ entweder der Wert „horizontal-lr“ oder „vertical-lr“ vergeben ist.

   Beispiel:

   <spine> <itemref idref="page1" /> <!--HINWEIS: Annahme von properties="page-spread-center" --> <itemref idref="page2" /> <!-- HINWEIS: Annahme von properties="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!-- HINWEIS: linkes Ansichtsfenster der synthetischen Doppelseite --> <itemref idref="page4" properties="page-spread-right"/> <!-- HINWEIS: rechtes Ansichtsfenster der synthetischen Doppelseite --> </spine>

   Im folgenden Beispiel wird davon ausgegangen, dass für das Attribut „primary-writing-mode“ entweder der Wert „horizontal-rl“ oder „vertical-rl“ vergeben ist.

   Beispiel:

   <spine> <itemref idref="page1" /> <!-- HINWEIS: Annahme von properties="facing-page-right" --> <itemref idref="page2" /> <!-- HINWEIS: Annahme von properties="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!-- HINWEIS: rechtes Ansichtsfenster der synthetischen Doppelseite --> <itemref idref="page4" properties="page-spread-left"/> <!-- HINWEIS: linkes Ansichtsfenster der synthetischen Doppelseite --> </spine>

   In Fällen, in denen einer linken Seite keine äquivalente rechte Seite zugeordnet ist (oder umgekehrt), kann der Verlag eine leere HTML-Seite einfügen und dieser die Eigenschaft „layout-blank“ hinzufügen, sofern es sich nicht um die letzte Seite handelt. Optional kann die leere Seite den Buchtitel und das Wasserzeichen enthalten.

   Seiten mit der Eigenschaft „layout-blank“ werden nur im Querformat dargestellt und im Hochformat ignoriert.

   In bestimmten Fällen kann es sinnvoll sein, dass der Verlag eine leere Seite einfügt, die immer im Hoch- und im Querformat angezeigt wird. Die Eigenschaft „layout-blank“ sollte in diesen Fällen nicht zugewiesen werden. Verfahren Sie ebenso wie mit synthetischen Doppelseiten (siehe Regeln oben) und verweisen Sie auf eine Bilddatei, die ein „leeres“ JPEG-Bild enthält.

   Im folgenden Beispiel wird davon ausgegangen, dass für das Attribut „primary-writing-mode“ entweder der Wert „horizontal-lr“ oder „vertical-lr“ vergeben ist.

   Beispiel:

   <spine> <itemref idref="page1" /> <!-- HINWEIS: Annahme von properties="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!-- HINWEIS: Annahme von properties="page-spread-right". Im Hochformat ignoriert. --> <itemref idref="page2" properties="page-spread-left"/> <!-- HINWEIS: linkes Ansichtsfenster der synthetischen Doppelseite --> <itemref idref="page3" properties="page-spread-right"/> <!--HINWEIS: rechtes Ansichtsfenster der synthetischen Doppelseite --> </spine>

   
   

   ---

   Inhalte in Graphic Novels optimieren

   Tippziele optimieren

   Die Tippziele sollten 100 % des Bildschirms abdecken. Auf diese Weise ist gewährleistet, dass den Leserinnen und Lesern ein vergrößerter Bereich angezeigt wird, wenn diese auf die Graphic Novel doppeltippen.

   
   

   Panel-Ansichten optimieren

   Panel-Ansichten sollten standardmäßig 150 % des Tippziels umfassen. Den Panel-Ansichten können verschiedene Größen zugewiesen werden, um eine spezifische Actionszene innerhalb des Tippziels besonders hervorzuheben.

   Positionieren Sie die Panel-Ansichten über dem entsprechenden Bild im Hintergrund. Sie sollten über dem Ausgangsbild platziert werden und nach Möglichkeit an den Rändern ausgerichtet sein.

   Soll der Kontext über mehrere Panels hinweg erhalten bleiben, ist eine leichte Überlappung mit anderen Panel-Ansichten zulässig.

   

   Zur Verwendung des Standardzoomfaktors von 150 %, müssen manche Actionszenen in zwei Panel-Ansichten unterteilt werden (normalerweise links und rechts oder oben und unten). Hierdurch wird eine bessere Benutzererfahrung als bei der Verwendung eines geringeren Zoomfaktors ermöglicht. Die Barrierefreiheit bleibt erhalten und die Benutzerinnen und Benutzer profitieren von einer höheren Auflösung beim Lesen.

   Teilen Sie die Tippziele, sodass das dem ersten Tippziel zwischen 50 % und 75 % der Gesamtbreite und dem zweiten Tippziel der entsprechende verbleibende Prozentsatz auf 100 % zugewiesen wird. Auf diese Weise wird sichergestellt, dass bei einem Doppeltipp auf einen Bereich nahe der Mitte des Action-Panels zunächst die erste Panel-Ansicht und dann die zweite Panel-Ansicht geöffnet wird.

   Um den Aktionsfluss zu erhalten, sollten Panel-Ansichten einen kleinen Bereich überlappender Aktion zeigen.

   Erste Panel-Ansichten einer in zwei Panel-Ansichten unterteilten Actionszene

   Zweite Panel-Ansicht einer Actionszene

   
   

   ---

   Textrichtlinien

   Für Bücher mit festem Layout mit Bild-Pop-ups: Bilder sollten mindestens 300 ppi aufweisen. Texte sollten scharf und lesbar sein, ohne Pixelbildung oder Unschärfe. Großbuchstaben müssen in Pop-ups mindestens 2 mm hoch sein, wenn sie auf einem 7-Zoll-Gerät angezeigt werden. In der Regel bedeutet dies eine Vergrößerung von 150 % oder mehr.

   Für feste Layouts mit Virtual Panels: Bilder sollten mindestens 300 ppi aufweisen. Texte sollten scharf und lesbar sein, ohne Pixelbildung oder Unschärfe, wenn sie auf einem 7-Zoll-Gerät auf 2 mm vergrößert werden.

   Um größere Textmengen darzustellen, rät Amazon zu einer hybriden Textbehandlung, in der Darstellungsformen von Graphic Novels und Kinderbüchern kombiniert werden. Amazon empfiehlt eine solche hybride Textbehandlung ausschließlich für Textabschnitte, die zu groß für eine effektive Vergrößerung sind. Die hybride Textbehandlung sollte die Textformatierung des darzustellenden Textes in Bezug auf Zeilenhöhe, Kursiv- und/oder Fettschrift und allgemeines Erscheinungsbild nachempfinden. Dadurch wird den Leserinnen und Lesern eine bessere Leseerfahrung geboten.

   Um Ihre Inhalte zukunftssicher zu machen, empfiehlt Amazon die Verwendung von Pixeln für die Textgröße und für die Positionierung von Textblöcken. Die Angabe der Schriftgröße oder der Textposition in Prozentwerten kann dazu führen, dass der Pixelwert als Bruchzahl angegeben wird. Dies kann auf verschiedenen Geräten unterschiedlich interpretiert werden.

   Der verbesserte Schriftsatz unterstützt keine Graphic Novels mit Hybridtext.

   

   HTML-Beispiel eines Hybridtextes:

   <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>

   CSS-Beispiel eines Hybridtextes:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; Schriftgröße: 150%; Schriftart: "Arial"; }

   
   

   ---

   Geführte Navigation:

   Die geführte Navigation umfasst verschiedene Optimierungen für die Leseerfahrung von Comic-eBooks, die jetzt für einige Kindle-Comics verfügbar sind. Diese Optimierungen ermöglichen den Leserinnen und Lesern eine Panel-für-Panel-Anzeige des Comics, die für Mobilgeräte geeignet und der natürlichen Bewegung des Auges beim Lesen eines Comics nachempfunden ist. Die geführte Navigation animiert die Bewegung von einem Panel zu einem anderen Panel bei jedem Wischen. Dies ermöglicht eine klare Anzeige des Verlaufs der Geschichte auf jeder Seite. Funktionen der geführten Navigation:

   • Eine geführte Panel-für-Panel-Leseerfahrung mit der vom Verlag festgelegten Panel-Reihenfolge.
   • Auf die Vollbildansicht vergrößerte und zentrierte Panels
   • Benutzerdefinierte Maskierungsfarbe um jedes Panel bei der Vergrößerung

   
   

   Die geführte Navigation wird automatisch auf kompatible Kindle-Comics angewendet. Zur korrekten Positionierung wird der vorhandene Panel View-Code genutzt. Amazon arbeitet kontinuierlich daran, die geführte Navigation für mehr Titel kompatibel zu machen. Sofern möglich, werden Optimierungen der geführten Navigation automatisch für Ihren Kindle-Comic aktiviert.