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 Bildbändern 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. Weitere Informationen über das Erstellen solcher eBooks mit Kindle Kid's Book Creator.

Dieses Format unterstützt den verbesserten Schriftsatz derzeit nicht.

Wichtig: Verschachtelte Anker-Tags werden in Büchern mit festem Layout nicht unterstützt. Bücher mit festem Layout und verschachtelten Anker-Tags werden unterdrückt.

Inhalt

• Metadatenrichtlinien
• Richtlinien für Coverbilder
• Textrichtlinien
• Anforderungen an Inhalte
• HTML- und CSS-Richtlinien
• Bücher mit festem Layout mit Text-Pop-ups mit mehrseitigen Hintergrundbildern und Texten erstellen

---

Metadatenrichtlinien

Die OPF-Datei definiert die Metadaten-Felder, 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. Identifiziert 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. Identifiziert die ursprüngliche Designauflösung des Inhalts („1024 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 Buches entweder auf Hoch- oder Querformat. Beim Wert auto wird 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 wird 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 und 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 Kinderbücher 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 Umschlagseite. Text-Pop-ups sind auf der hinteren Coverseite erforderlich, wenn diese einen Teil der Geschichte enthält. Für andere Texte auf der hinteren Coverseite sind keine Text-Pop-ups erforderlich.

---

Textrichtlinien

Bei Titeln mit festem Layout können Benutzer die Schriftarten nicht auswählen und ä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); /* schließt die Datei für die korrekte Schriftart ein */ }

Zugänglichkeitstipp: 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 dem Benutzer 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.

Der Benutzer aktiviert die Bereichsvergrößerung, indem er bei Touchscreen-Geräten zweimal auf den „aktiven Bereich“ tippt. (Bei Geräten ohne Touchscreen wird der Seitenbereich aktiviert, indem die Pfeiltaste nach oben des Cursorpads betätigt wird. Durch Klicken der mittleren Taste wird 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 KindleGen 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. Im Anker muss die Klasse app-amzn-magnify angegeben werden. Für den Anker sollten außerdem 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 ein Leser die Bereichsvergrößerung aktiviert. Es ist außerdem 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 in der Bereichsvergrößerung <div> sollte auf 150 % der normalen Schriftgröße der Seite gesetzt werden. Für diese Regel bestehen mehrere Ausnahmen:
   • Wenn der Text auf der Seite so groß ist, dass er bei einer Vergrößerung auf 150 % nur schwer lesbar wäre und die Lesbarkeit nicht verbessert würde. 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 der Bereichsvergrößerung <div> zu verbessern. Wenn beispielsweise die Schriftgröße der Seite 45 % beträgt, muss die Schriftgröße im Text in der Bereichsvergrößerung <div> auf 225 % gesetzt werden, um lesbar zu sein.

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, z. B. Schriftgrößen, Ränder usw. Durch das Hinzufügen eines CSS-Reset, z. B. des 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 Vollbild-Ansicht 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 1920 x 1200 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 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. Falls Sie beispielsweise für den Kindle Fire HD 8.9 (2013) planen, sollten die Pixelabmessungen des Bildes mindestens 3840 x 2400 betragen (dies entspricht dem Seitenverhältnis und unterstützt einen Zoomfaktor von 2x). Verwenden Sie grundsätzlich 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 Zugänglichkeit der Inhalte. Um sie 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, 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 ausgelegt werden.

---

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

In diesem Abschnitt wird beschrieben, 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-Anweisungen 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-Format für die Breite des linken Bildes definiert 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:

/* 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 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.

Sehen Sie sich ein Beispiel an, das auf dem Doppelseiten-Beispiel aufbaut und illustriert, wie Text auf einem Hintergrundbild positioniert werden kann: Der Text wird in einen festen Doppelseiten-Block platziert, wobei dem Margin-Attribut Prozentsätze 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 nützlich.