Einige Bücher beinhalten Elemente mit festen Abmessungen und Textpositionen, deren Text- und Schriftgrößen nicht angepasst werden können. Beispielsweise werden unter anderem in Coffee Table Books und Bilderbüchern mit ganzseitigen Bildern häufig Texte präzise auf das Hintergrundbild platziert.

Bücher mit festem Layout unterstützen keinen mitfließenden Text und sollten nur verwendet werden, wenn das gesamte Buch sich für ein festes Layout eignet. Bücher können kein teilweise festes Layout oder keinen teilweise dynamischen Textfluss enthalten.

Bücher mit festem Layout und Text-Pop-ups bieten vergrößerbare Textbereiche für komfortables Lesen und geringer Interaktion bei Kinderbüchern. Falls Sie Ihren Text unabhängig vom Bildmaterial vergrößern möchten, empfehlen wir für Text-Pop-ups die Verwendung des EPUB-Formats.

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
• Richtlinien für Coverbilder
• Textrichtlinien
• Anforderungen an Inhalte
• HTML- und CSS-Richtlinien
• Bücher mit festem Layout und Text-Pop-ups mit mehrseitigen Hintergrundbildern sowie Text erstellen

---

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 Text-Pop-ups nicht auf andere Formate, wie etwa Bücher mit festem Layout mit Bild-Pop-ups oder Virtual Panel, angewandt werden.

Metadaten	Beschreibung
Das Layout kann unter Verwendung eines der folgenden Metadatenfelder spezifiziert werden: 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Erforderlich. Kennzeichnet das Buch als eines mit festem Layout. Gültige Werte für „rendition:layout“-Metadaten sind „reflowable“ und „pre-paginated“. Der Standardwert ist „reflowable“. Gültige Werte für „fixed-layout“-Metadaten sind „true“ und „false“. Der Standardwert ist „false“.
<meta name="original-resolution" content="1024x600"/>	Erforderlich. Kennzeichnet die ursprüngliche Designauflösung des Inhalts („1 024 x 600“ ist nur ein Beispiel). Den Pixelmaßen kann jeder ganzzahlige Wert zugewiesen werden. Diese Werte müssen den Seitenverhältnissen des Originalinhalts proportional entsprechen.
Die Ausrichtung kann unter Verwendung eines der folgenden Metadatenfelder spezifiziert werden: 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> Hinweis: Dies wird in iOS derzeit nicht unterstützt.	Optional (aber empfohlen). Gültige Werte für „rendition:layout“-Metadaten sind „portrait“, „landscape“ oder „auto“. Sperrt die Ausrichtung des Buchs entweder auf Hoch- oder Querformat. Beim Wert „auto“ werden sowohl das Hoch- als auch das Querformat unterstützt. Der Standardwert ist „auto“. Gültige Werte für „orientation-lock“-Metadaten sind „portrait“, „landscape“ oder „none“. Sperrt die Ausrichtung des Inhalts entweder auf Hoch- oder Querformat. Beim Wert „none“ werden sowohl das Hoch- als auch das Querformat unterstützt. Der Standardwert ist „none“.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Optional. Definiert die Reihenfolge der Seitendarstellung, den Lesemodus und die Navigation (einschließlich Kindle-Text-Pop-up, Kindle Panel View sowie Kindle Virtual Panel). Gültige Werte sind „horizontal-lr“, „horizontal-rl“, „vertical-lr“ und „vertical-rl“. Wenn die Seitenrichtung von links nach rechts oder nicht angegeben ist, wird standardmäßig „horizontal-lr“ verwendet. Um die Seitenrichtung auf von rechts nach links zu setzen, verwenden Sie den Wert „horizontal-rl“. Um die Seitenrichtung bei chinesischen, japanischen und koreanischen Büchern auf von rechts nach links zu setzen, verwenden Sie den Wert vertical-rl.
<meta name="book-type" content="children"/>	Optional bei Kinderbüchern. Entfernt Lesefunktionen (z. B. „Weiterempfehlen“), die für bestimmte Bücher wie zum Beispiel eBooks für Kinder nicht relevant sind. Gültige Werte sind „children“ und „comic“.

---

Richtlinien für Coverbilder

Obwohl Kindle-Bücher mit dynamischem Textfluss keine hintere Coverseite enthalten, kann eine solche Seite für Kinder in gewisser Weise einen Abschluss von Erzählungen darstellen. Daher sollte eine hintere Coverseite als Teil des Designs für Kinderbücher eingefügt werden. (Bei Büchern für Erwachsene in diesem Format ist keine hintere Coverseite erforderlich.) Entfernen Sie Barcodes, Preislisten und Werbeinhalte aus dem Bild der hinteren Coverseite. Wenn die hintere Coverseite einen Teil der Geschichte enthält, sind dort Text-Pop-ups erforderlich. Für andere Texte auf der hinteren Coverseite sind keine Text-Pop-ups erforderlich.

---

Textrichtlinien

Bei Titeln mit festem Layout können Benutzerinnen und Benutzer die Schriftarten nicht festlegen oder ändern. Die Verwendung der CSS-Anweisung „@font-face“ und das Einbinden von Schriftarten in das eBook gewährleisten eine einheitliche Darstellung auf allen Geräten und Bildschirmen. Dies stellt nicht nur sicher, dass die gleichen Schriftarten, die im Quelldokument verwendet werden, auch im Titel mit festem Layout verwendet werden, sondern sorgt auch dafür, dass der HTML-Text zwischen der Seitenansicht und der Bereichsvergrößerungsansicht besser dargestellt wird.

Beispiel:

@font-face { Schriftart: "Arial"; /* weist den Namen der zu verwendenden Schriftart zu */ src: url(../fonts/arial.otf); /* enthält die Datei für die korrekte Schriftart */ }

Tipp zur Barrierefreiheit: Schmale Schriftarten sind schwerer zu lesen und können den wahrgenommenen Kontrast des Texts zum Hintergrund beeinträchtigen. Amazon empfiehlt, schmale Schriftarten für den Haupttext Ihres Manuskripts zu vermeiden.

---

Anforderungen an Inhalte

Anforderung Nr. 1: HTML-Dateistruktur verwenden

Für Inhalte mit festem Layout muss für jede Seite eine eigene HTML-Datei erstellt werden, die auf einem Kindle-Gerät angezeigt wird. Dazu können Sie ein Bild in der HTML-Datei verwenden oder in der HTML-Datei zwei Bilder verbinden, sodass sie als eine Seite angezeigt werden, wenn die Ausrichtungssperre auf Querformat gesetzt ist.

Hochformat-Ausrichtungssperre:

Druckseite = 1 HTML-Datei

Beispiel:

Querformat-Ausrichtungssperre:

2 Druckseiten (1 zweiseitiges Bild) = 1 HTML-Datei

Beispiel:

Anforderung Nr. 2: Bereichsvergrößerungen (Pop-ups)

Feste Layouts bieten den Benutzerinnen und Benutzern nicht die Möglichkeit, die Schriftgröße zu verändern, da andernfalls die Darstellung relevanter Inhalte beeinträchtigt werden könnte. Zur Vergrößerung von Text mit festem Layout ohne Veränderung des ursprünglichen Layouts unterstützt Kindle Bereichsvergrößerungen (Pop-ups). Ein Beispiel für Bereichsvergrößerungen finden Sie am Ende dieses Abschnitts.

Benutzerinnen und Benutzer aktivieren die Bereichsvergrößerung bei Touchscreen-Geräten durch einen Doppeltipp auf den „aktiven Bereich“. (Bei Geräten ohne Touchscreen wird der Seitenbereich aktiviert, indem die Pfeiltaste des Cursorpads nach oben betätigt wird. Durch Klicken der mittleren Taste wird die Funktion Kindle-Text-Pop-up bzw. Kindle Panel View aktiviert.) Bei der Bereichsvergrößerung ist der aktive Bereich (Quellelement) verborgen und der vergrößerte Bereich (Zielelement) wird angezeigt. Wenn ein eBook die Bereichsvergrößerung unterstützt, wird der Bereichsvergrößerungscode von Kindle automatisch erkannt und der entsprechende Metadatenwert wird in der OPF-Datei auf „true“ gesetzt.

Um Bereichsvergrößerungen zu unterstützen, sind folgende Schritte notwendig:

1. Definieren Sie den aktiven Bereich, indem Sie ein gut definiertes HTML-Anker-Element (<a>) um den Text herum setzen, der vergrößert werden soll. Dem Anker muss die Klasse „app-amzn-magnify“ zugewiesen werden. 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 Vergrößerungsbereichs (Position und Schriftgröße sind in der CSS-Datei definiert)
   2. "sourceId":"<string:elementId>" = eindeutige Element-ID der Quelle, die vergrößert werden soll
   3. "ordinal":<integer:reading order> = Lesereihenfolge des vergrößerten Bereichs (die Reihenfolge, in der die Bereiche als Teil des Leseflusses erscheinen). Diese Definitionen sind für alle Texte erforderlich, die Bereichsvergrößerungen unterstützen.
2. Bei aktivierter Vergrößerung wird der Quelltext nicht länger angezeigt. Erstellen Sie ein <div>-Zielelement und positionieren Sie es so, dass es den zu vergrößernden Text vollständig abdeckt und dabei die Abdeckung des Hintergrundbildes der Seite auf ein Minimum beschränkt. Dadurch wird gewährleistet, dass der Ausgangstext nicht aus der Seitenansicht verschwindet, wenn eine Leserin bzw. ein Leser die Bereichsvergrößerung aktiviert. Zudem ist es wichtig, ein Pop-up nicht unmittelbar am rechten oder unteren Bildschirmrand angrenzen zu lassen. Aufgrund von technischen Unterschieden zwischen den einzelnen Gerätetypen könnte dies zu Darstellungsfehlern führen. Prüfen Sie daher den Inhalt vor der Veröffentlichung auf so vielen unterschiedlichen Gerätetypen wie möglich.
3. Die Schriftgröße des Textes im <div>-Element für die Bereichsvergrößerung sollte auf 150 % der normalen Schriftgröße der Seite gesetzt werden. Für diese Regel bestehen einige Ausnahmen:
   • Wenn der Text auf der Seite so groß ist, dass er bei einer Vergrößerung auf 150 % nur schwer lesbar wäre anstatt die Lesbarkeit zu verbessern. Bei Inhalten für Kinder ist auf einem 7-Zoll-Gerät die Bereichsvergrößerung für Text mit einer Höhe von mindestens 4 mm nicht erforderlich. Das Gleiche gilt bei Inhalten für Erwachsene für Text mit einer Höhe von mindestens 2 mm.
   • Wenn der Text auf der Seite um mehr als 150 % vergrößert werden muss, um die Lesbarkeit des Inhalts im <div>-Element für die Bereichsvergrößerung zu verbessern. Wenn beispielsweise die Schriftgröße der Seite 45 % beträgt, muss die Schriftgröße des Textes im <div>-Element für die Bereichsvergrößerung auf 225 % gesetzt werden, damit er lesbar wird.

Beispielseite mit festem Layout

Beispielseite mit aktivierter Bereichsvergrößerung

Beispiel:

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

---

HTML- und CSS-Richtlinien

CSS-Reset anwenden

Auf Bücher mit festem Layout sollten Sie ein CSS-Reset anwenden. Ein CSS-Reset entfernt inkonsistente Stile, die von Browsern automatisch angewendet werden, wie beispielsweise Schriftgrößen, Abstände usw. Durch das Hinzufügen eines CSS-Reset, z. B. das YUI-Reset, werden diese Inkonsistenzen beseitigt, sodass Designer auf einer zuverlässigen Stilvorlage aufbauen können.

CSS-Dateien für Bücher mit festem Layout

Um die Seitenblätterfunktion bei Büchern mit festem Layout zu verbessern, können Sie CSS-Dateien aufteilen, sodass für jede Gruppe von HTML-Seiten eine eigene CSS-Datei verwendet wird. Die CSS-Dateien sollten nur Informationen enthalten, auf die direkt von den verknüpften HTML-Dateien verwiesen wird.

Inhalt für Vollbildansicht optimieren

Kindle-Bücher werden auf einer Vielzahl verschiedener Geräte (darunter Fire-Tablets sowie Smartphones und Tablets anderer Hersteller) und einer Vielzahl von Bildschirmgrößen gelesen. Der im Jahr 2013 erschienene Kindle Fire HD 8.9 bietet eine Auflösung von 1 920 x 1 200 Pixeln. Gestalten Sie den Inhalt so, dass dieses Seitenverhältnis möglichst beibehalten wird.

Für die bestmögliche Benutzererfahrung empfiehlt Amazon die Gestaltung von Inhalten mit festem Layout, um den verfügbaren Platz auf dem Bildschirm optimal zu nutzen. Falls der Inhalt ein abweichendes Seitenverhältnis oder eine abweichende Größe aufweist, wird er bei Kindle-Geräten und -anwendungen auf die jeweilige Bildschirmgröße skaliert, zentriert und mit einem weißen Rahmen (Letterbox) versehen.

Bei einem festen Layout und bildlastigen Inhalten ist eine Vergrößerung wahrscheinlicher, da Kundinnen und Kunden bevorzugt in Kindle Panel View oder auf Geräten mit größeren Bildschirmen lesen. Eine bewährte Vorgehensweise ist die Verwendung von Bildern mit der höchstmöglichen Auflösung. Amazon empfiehlt, die Bilder vor dem Import so zu skalieren, dass eine qualitativ hochwertige Vergrößerung mit einem Zoomfaktor von mindestens 2x möglich ist. Planen Sie beispielsweise für den Kindle Fire HD 8.9 (2013), sollten die Pixelabmessungen des Bildes mindestens 3 840 x 2 400 betragen (dies entspricht dem Seitenverhältnis und unterstützt einen Zoomfaktor von 2x). Verwenden Sie grundsätzlich den Kindle Previewer, um die Qualität der Inhalte zu prüfen.

Tippziele für Bereichsvergrößerungen in Büchern mit festem Layout mit Text-Pop-ups verwenden

Der Hauptzweck der Bereichsvergrößerung ist die Barrierefreiheit der Inhalte. Um diese weiter zu verbessern, kann das Tippziel größer als der Vergrößerungsbereich sein. Um einen größeren Bereich zu definieren, fügen Sie einen Innenabstand von 20 bis 40 Pixeln zu Ihren „app-amzn-magnify“-Anker-Elementen hinzu. Dabei dürfen die Tippziele jedoch nicht überlappen.

„position:absolute“ zur Darstellung von Text auf einem Bild verwenden

Um einen Text präzise auf einem Bild zu positionieren, können Sie auf das Attribut „position:absolute“ zurückgreifen. Dieses Attribut sollte nur für Bücher verwendet werden, die ein festes Layout erfordern, wie etwa Bilderbücher mit Texten, die in bestimmten Bereichen des Hintergrundbildes platziert werden müssen.

Inhalte mit festem Layout mit Text-Pop-ups zukunftssicher machen

Ein festes Layout ist per Definition auf eine einzige Bildschirmgröße ausgelegt. 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.

---

Bücher mit festem Layout und Text-Pop-ups mit mehrseitigen Hintergrundbildern sowie Text erstellen

Dieser Abschnitt beschreibt, wie Seiten mit einem Hintergrundbild und Text korrekt erstellt werden. Obwohl verschiedene Vorgehensweisen möglich sind, legt Amazon Wert auf ein portierbares Markup mit minimalem Aufwand. Die bereitgestellte Vorlage erfüllt dieses Ziel, da die CSS-Befehle ohne HTML-Änderung aktualisiert werden können.

Nebeneinander positionierte Bilder verwenden, wenn die Ausrichtungssperre auf Querformat gesetzt ist

Viele Bücher enthalten Querformat-Doppelseiten, die aus einem einzigen Bild bestehen. Andere Bücher enthalten Querformat-Doppelseiten, die aus zwei nebeneinander liegenden Bildern zusammengesetzt sind.

Im unten gezeigten Beispiel besteht die Doppelseite im Querformat aus 1 024 x 600 Pixeln, was der Vollbildansicht im Kindle Fire (erste Generation) entspricht. Die Bilder jeder Seite sollten genau die Hälfte dieser Pixelwerte aufweisen: 512 x 600 Pixel. Den individuellen Teilen des Elements werden CSS-IDs und den gemeinsamen Teilen CSS-Klassen zugewiesen. Das linke Bild wird auf der linken Hälfte der Doppelseite dargestellt. Das rechte Bild wird auf die rechte Seite verschoben, indem ein „margin-left“-Attribut für die Breite des linken Bildes gesetzt wird.

Das Ergebnis sind zwei Seiten, die zu einem Bild verbunden sind, das im Querformat angezeigt wird. Dies unterscheidet sich von einer synthetischen Doppelseite, bei der im Hochformat eine Seite sichtbar ist und im Querformat zwei nebeneinander positionierte Seiten. Dies gibt es nur bei Comics.

HTML:

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

CSS:

/* Bereichsgröße für beide Seiten */ #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 Seitenbreite */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x Bildschirmbreite */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x Bildschirmbreite / margin-left: 512px; /* Dieser Wert entspricht dem Wert der Bildbreite auf der linken Seite. */ }

Textblöcke positionieren

Definieren Sie die Position und Schriftgröße in Prozentsätzen, um eine einheitliche Skalierung der Position in unterschiedlichen Auflösungen zu ermöglichen. Dadurch wird die Kompatibilität mit einer größeren Anzahl von Geräten und Bildschirmen sichergestellt. Jeder Absatz sollte durch ein <div>-Element eingeschlossen sein, wobei mehrere Zeilen mit <br/>-Elementen umgebrochen werden. Falls ein spezieller Zeilenabstand notwendig ist, sollte dieser in Deklarationen von CSS-Formatvorlagen definiert und nicht durch zusätzliche Markups wie mehrfache <div>-Container oder zusätzliche Zeilenumbruch-Tags codiert werden.

In diesem auf dem Doppelseiten-Beispiel basierenden Beispiel wird dargestellt, wie Text auf einem Hintergrundbild positioniert werden kann. Der Text wird in einen festen Doppelseiten-Block platziert, wobei dem Margin-Attribut Prozentwerte zugewiesen und Ausrichtung und Abstände mithilfe von CSS definiert werden. Text-Pop-ups sollten so positioniert werden, dass sie den entsprechenden Text im Hintergrund verdecken.

Text ausrichten

Standardmäßig wird der Text auf die obere linke Ecke des einschließenden HTML-Elements ausgerichtet. Viele Bücher enthalten Texte, die zum rechten oder unteren Rand ausgerichtet oder im Blocksatz dargestellt sind. Die Ausrichtung lässt sich am einfachsten identifizieren, wenn man sich einen Umriss um den Text vorstellt und erkennt, welche Kanten des Absatzes am Rand (oben, links, rechts, unten) anliegen.

Verwenden Sie zur Textausrichtung niemals geschützte Leerzeichen (&nbsp;). Stattdessen sollten Sie die CSS-Attribute „top”, „right”, „bottom” und „left” zur Positionierung von <div>-Elementen nutzen, die absolut positionierten Text enthalten. Definieren Sie zwei angrenzende Seiten zur Positionierung der <div>-Elemente. Beispielsweise „top“ und „left“, jedoch niemals „top“, „left“ und „bottom“. Die CSS-Attribute „text-indent“ und „line-height“ sind bei der Ausrichtung von Texten innerhalb von HTML-Blockelementen hilfreich.