XML-Know How

Fixed Layout-CSS

Über das CSS-Stylesheet wird die fixe Positionierung der einzelnen Inhalts­elemente festgelegt. Hierbei kommt vor allem der position-Eigenschaft mit den Werten absolute und relative sowie den Eigenschaften top, bottom, left und right eine zentrale Bedeutung zu. Mit den letztgenannten können relative oder absolute Außenabstände zum Seitenbereich angegeben werden. Diese Deklarationen sind essentiell für die feste Seitenbeschreibung.


section.textkasten1 {
  position: absolute;
  top: 100px;
  left: 60px;
  margin: 0;
}
Listing 5.5 Absolute Positionierung eines HTML-Elements per CSS

Da bereits der gesamte darzustellende Seitenbereich des Fixed Layouts im Pixelmaß definiert wird, empfiehlt sich die Verwendung der absoluten Einheit px für die Maßangaben wie Element- und Schriftgrößen und Abstände.

Im oberen Beispiel wird ein Textkasten mit einem Abstand von 100 Pixel nach oben und 60 Pixel nach links absolut positioniert. Bezugspunkt ist dabei grundsätzlich die obere linke Ecke des Viewports.

EPUB 3

Die Viewport-Dimensionen, die jeweils in der HTML-Datei angegeben sind, sollten sich in der CSS-Deklaration des body-Elements wiederfinden.


body {
  width: 1200px;
  height: 1500px;
  font-family: DroidSans, sans-serif;
  font-size: 30px;
}
Listing 5.6 Eine body-Deklaration für EPUB 3-Fixed Layout

Kindle Format 8

Bei der Fixed Layout-Umsetzung des Kindle-Formats erfolgt durch die Festlegung des Querformats (landscape) in den Metadaten eine Doppelseitenansicht. Der Inhalt der beiden Seiten ist dabei innerhalb einer einzelnen HTML-Datei strukturiert. Im Folgenden wird ein knappes Beispiel der CSS-Deklarationen zur Festlegung der einzelnen Seitenbereiche gegeben.


div.doppelseite {
  position: absolute;
  height: 600px;
  width: 1024px;
}
div.linke_seite {
  position: absolute;
  height: 600px;
  width: 512px;
}
div.rechte_seite {
  position: absolute;
  height: 600px;
  width: 512px;
  left: 512px;
}
Listing 5.7 Deklarationen der KF 8-Seitenbereiche im Querformat

Der Viewport (1024 x 600 Pixel) der Doppelseite wird in einer Deklaration des div-Elements, das beide Seiten umfassen soll, per height und width festgelegt [1]. Anschließend folgt die Definition der einzelnen Seitenboxen ebenfalls mithilfe von div-Elementselektoren [6 und 11]. Im Unterschied zur Doppelseite wird in width jeweils die halbe Breite des Viewports (512 Pixel), also die Breite einer einzelnen Seite angegeben [9 und 14]. Für die zweite Box muss mit left nun zusätzlich ein Abstand zum linken Außenrahmen definiert werden, dessen Wert genau dieser Seitenbreite entspricht [15]. Erst dann wird das div-Element und dessen Inhalt auf der rechten Seite dargestellt.

Innerhalb dieser Einzelseiten-Container können auf gleiche Weise die einzelnen Seitenelemente absolut platziert werden.

In den Amazon Formatierungsrichtlinien wird grundsätzlich die Verwendung von Prozent- oder em-Angaben für die Textpositionierung und Schriftgrößen empfohlen. Hintergrund ist, dass Fixed Layout-Dokumente des KF 8-Formats gegebenenfalls skalieren, wenn die Displaygröße des Kindle-Readers von den Viewportangaben in den Metadaten abweicht. Pixelmaße werden von einer solchen Skalierung ignoriert, was zu einer inkonsistenten Darstellung führen kann.

Genügt für die Erstellung normaler E-Book-Inhalte und -Layouts praktisch ein einfacher Texteditor, ist für die Produktion von Fixed Layouts ein optischer HTML-Editor wie Adobe Dreamweaver oder eine Layout-Anwendung, die Pixel als Einheit unterstützt und einen Export der Layoutinformationen nach CSS ermöglicht, das richtige Werkzeug. Stand Ende 2012 ist die Unterstützung durch Anwendungen in diesem Bereich leider noch sehr rudimentär.

Die Produktion von Fixed Layout-E-Books ist in aller Regel wesentlich zeitaufwändiger und teurer als das klassische, dynamisch umbrechende Pendant. Es fällt individueller und in aller Regel manueller Aufwand für die Erstellung der Seitengestaltungen an. Eine Optimierung für unterschiedliche Displaygrößen erhöht diesen Aufwand zusätzlich.