XML-Know How

Text und Bild

Beim Einsatz von Bildern entstehen neue Anforderungen an die Seitengestaltung. Durch die Wechselwirkung zwischen Bild und Textinhalt kommt der Anordnung von Bildern auf der Doppelseite eine hohe Bedeutung zu. Bei einer klassischen Leseseite werden Bilder im oder in Bezug auf den Satzspiegel platziert, bei einer freien Seitengestaltung kann die Anordnung von Seite zu Seite variieren. Typografisch müssen Entscheidungen hinsichtlich Bildgröße und -positionierung, Weißraum und Abstände getroffen werden.

Eine solche individuelle Seitengestaltung lässt sich in dynamisch umbrechenden E-Books konzeptionell nicht umsetzen. Hinsichtlich der Positionierung von Bildern in Bezug auf den Text bestehen innerhalb des definierten Seitenbereichs jedoch Möglichkeiten, die mit den Layoutprinzipien im Buchsatz vergleichbar sind.

Grundsätzlich empfiehlt es sich, Abbildungen auf Blockebene mit einem figure-Blockcontainer zu strukturieren, die für das Styling unabhängig von dem Abbildungsaufruf selbst verwendet werden kann. Dasselbe wird für Inline-Grafiken mit einem span umgesetzt. Innerhalb des Abbildungscontainers kann mit dem Element figcaption auch eine Bildunterschrift hinzugefügt werden.


<figure class="abbildung">
    <img src="abbildungen/04_02_text_bild.jpg" alt="Text und Bild"/>
    <figcaption class="legende">Abb. 4.2 Text und Bild</figcaption>
</figure>
Listing 4.24 HTML-Struktur einer Abbildung mit Bildunterschrift

Für die horizontale Ausrichtung von Bildern auf der Seite kommt die CSS-Eigenschaft text-align zum Einsatz. Dabei wird der definierte bzw. vorgegebene Seitenbereich berücksichtigt. Um die Abbildung außerhalb der Seitenbereichsgrenzen zu platzieren, können negative margin-Werte verwendet werden, welche die Seitendefinition in @page bzw. body jedoch nicht überschreiten sollten.

Damit Grafiken nebeneinander platziert werden, kann der display-Wert inline-block in Kombination mit entsprechenden Abstandsangaben angegeben werden. Aufeinanderfolgende Container werden mit dieser Eigenschaft als Inline-Elemente in derselben Zeile dargestellt und bei kleiner Bildschirmgröße untereinander angeordnet. Um Abbildungscontainer von nachfolgenden Texten umfließen zu lassen, wird die Eigenschaft float mit den Werten left oder right deklariert. Durch diese Eigenschaft wird eine Struktur grundsätzlich aus dem normalen Elementfluss entfernt und von folgenden Elementen (auch über das aktuelle Elternelement hinaus) umflossen. Mit der clear: both-Deklaration werden zuvor definierte Floating-Zustände für folgende Elemente wieder aufgehoben.


figure.abbildung {
    margin-right: 1.0em;
    float: left;
}
Listing 4.25 Textumfluss mit der float-Eigenschaft
9209.png
Abb. 4.6 Darstellung des Textumflusses

Eine Abbildung kann per CSS mit einem Konturrahmen versehen werden. Hierzu werden die border-Eigenschaften verwendet, die immer direkt am jeweiligen img-Selektor stehen sollten. In Kombination mit Innenabständen kann zusätzlich ein Passepartout-Effekt erzielt werden.

Um die Größe der Original-Abbildung zu beeinflussen, können die Eigenschaften width und height innerhalb des img-Selektors deklariert werden. Mit diesen Eigenschaften werden die Breite bzw. Höhe der Grafik, bei relativen Prozentwerten in Bezug auf die Seitengröße, definiert. Nur wenige Lesegeräte bieten die Möglichkeit, die Abbildung durch Anklicken in Originalgröße darzustellen.

Grundsätzlich sollten Abbildungen für E-Books vorab hinsichtlich Farbraum, Auflösung und Bildgröße aufbereitet werden. Das gilt insbesondere für die Auflösung des Bildes, die unmittelbar die Dateigröße beeinflusst. Um sicherzustellen, dass Abbildungen, die größer als der Anzeigebereich sind, nicht abgeschnitten werden, sollte generell die Deklaration max-width: 100% notiert werden.


img {
    height: 6.0em;
    max-width: 100%
}
Listing 4.26 Größendefinition einer Abbildung

Marginalien

Marginalien werden für ergänzende Inhalte außerhalb des linearen Leseflusses eingesetzt, die in Bezug zum Text stehen. Im Buch stehen sie meist am äußeren Rand neben dem Satzspiegel auf Höhe der Zeile des zugeordneten Texts. Aufgrund der schmalen Spaltenbreite werden Marginalien grundsätzlich im Flattersatz gesetzt. Um Marginaltexte weiter vom Fließtext zu differenzieren werden sie in der Regel typografisch durch ein eigene Schrift bzw. Schriftschnitt oder einem kleineren Schriftgrad ausgezeichnet.

Die Darstellung von Inhalten, die im Buch außerhalb des linearen Leseflusses fest auf der Seite angeordnet sind, muss beim Medienwechsel aufgrund des fließenden Seitenkonzepts konzeptionell überdacht werden.14 Die Anforderung an die Umsetzung von Marginalien ist eine direkte inhaltliche Zuordnung zur entsprechenden Textstelle, nicht mehr nur zur Textzeile. Im Folgenden wird eine mögliche Implementierung beschrieben.

In der HTML-Struktur des E-Books werden zunächst die Inhalte vor den Haupttext, auf den sie sich beziehen, in einem aside-Container platziert.


<aside class="marginalie" epub:type="marginalia">
    <p>Marginalien werden typografisch ausgezeichnet.</p>
</aside>
Listing 4.27 HTML-Struktur einer Marginalie in EPUB 3

Die CSS-Eigenschaft float kann auch für die Darstellung von Marginalien eingesetzt werden. Der wesentliche Unterschied zur Umsetzung im Buch ist dabei, dass die Marginalie nicht in einer eigenen Seitenspalte sondern innerhalb des Seitenbereichs des E-Books angeordnet ist. Dabei wird das regelmäßige Schriftbild des Fließtextes zwar gebrochen, die Marginalie steht jedoch in jedem Fall an der richtigen Textposition.


aside.marginalie {
    margin-left: 1.0em;
    margin-right: -1.0em;
    padding: 0.3em;
    padding-top: 0.25em;
    background-color: #ffe8e8;
    width: 22%;
    float: right;
    clear: both;
}
aside.marginalie p {
    font-family: DroidSans, sans-serif;
    font-sty
    font-size: 0.8em;
    line-height: 1.3em;
    text-align: right;
    text-indent: 0;
}
Listing 4.28 CSS-Styling einer vom Text umflossenen Marginalie

Mit diesen CSS-Blöcken wird die Marginalie in einem farbig unterlegten Kasten an der rechten Kante des Seitenbereichs dargestellt und vom nachfolgenden Haupttext links umflossen. Durch einen negativen Wert für ­margin-right wird die Box etwas außerhalb des Seitenbereichs positioniert [3]. Damit sich die Breite des Marginalkastens nicht am Inhalt orientiert und dadurch über die ganze Seite dargestellt wird, ist die Definition der Breite per width entscheidend [7] (alternativ ließen sich auch min-width- und max-width-Werte für eine flexible Breite angeben).

Innerhalb des Absatz-Selektors wird die Schriftformatierung des Inhalts festgelegt [11]. Das obere Beispiel definiert einen serifenlosen Schriftschnitt in kleinerem Schriftgrad.

04_07_marginalie.png
Abb. 4.7 Darstellung einer Marginalie

Kindle Format 8

Da das KF 8-Format keine automatische Silbentrennung unterstützt, werden lange Wörter, die über die ganze Zeilenbreite laufen, ohne Trennstrich umbrochen. Um dieses Darstellungsergebnis zu vermeiden, sollte die Breite der Marginalbox in diesen Situationen angepasst werden.

Fußnoten

Ebenso wie Marginalien beinhalten Fußnoten ergänzende Textinformationen, die nicht Bestandteil des zentralen Textflusses sind. Im Unterschied zu Marginalien, die dem Leser auffallen sollen, sind sie optionale Ergänzungen und folglich zurückhaltender am Fuß der Buchseite angeordnet. Der Bezug zur Textstelle wird durch ein hochgestelltes Fußnotenzeichen innerhalb des Haupttextes hergestellt, das auf die entsprechende Ergänzung im Fußnotenbereich der Seite verweist.

Typografisch werden Fußnoten im Buch in der Regel durch einen kleineren Schriftgrad, oft in Kombination mit einem schmalen Schriftschnitt vom Fließtext abgegrenzt. Vor allem bei umfangreichen Fußnoten wird zusätzlich eine Linie oberhalb der ersten Note gesetzt. Die Ziffer bzw. das Zeichen innerhalb der Fußnote wird durch einen Festabstand und einen Einzug oder einer Auszeichnung vom Fußnoteninhalt differenziert.

Da es aufgrund des Reflowable-Konzepts keine feste Seitengröße gibt, entfällt auch die Möglichkeit einer Anmerkung am Fuß der Seite. Fußnoten müssen im E-Book also grundsätzlich anders umgesetzt werden.

Nachfolgend wird die Umsetzung über ein Verweismodell vorgestellt. Dabei wird das E-Book um ein zusätzliches Inhaltsdokument ergänzt, das nicht Teil der Lesefolge ist. Dieses Dokument beinhaltet alle im E-Book vorkommenden Fußnoten, auf die über Referenzzeichen im Haupttext verwiesen wird. Auf diesem Weg sind die Fußnoten nicht integrierter Bestandteil des Seitenlayouts, das funktionale Konzept der Indexierung bleibt jedoch unverändert und ist durch automatische Verweise sogar komfortabler. Die Struktur des Fußnotenzeichens kann wie folgt aussehen.

<p>Im E-Book<span class="fussnotenaufruf"><a href="fussnoten.xhtml#fussnote1" id="fussnotenverweis1" epub:type="noteref">1
</a></span> werden Fußnoten über Verweismodelle umgesetzt.</p>

Listing 4.29 Fußnotenaufruf in EPUB

Das span-Element dient lediglich dem Styling der Fußnotenreferenz. Der eigentliche Verweis auf die Fußnote ist im Ankerelement a enthalten, welches das Dokument fussnoten.xhtml (genauer, die ID fussnote1 innerhalb dieser Datei) referenziert. Mit Hilfe des id-Attributs kann von der Fußnote an die entsprechende Stelle im Haupttext zurückverlinkt werden. Alternativ zu einem separaten Zeichen, könnte auch ein Textabschnitt (im Beispiel-Listing das Wort „E-Book“) selbst als Fußnotenaufruf dienen und verlinkt werden.

Im HTML-Dokument, das die Fußnoten enthält, kann das Verweisziel wie folgt ausgezeichnet sein:


<aside class="fussnote" epub:type="footnote" id="fussnote1">
  <p><span class="fussnotenzaehler1">1</span> Ein E-Book bezeichnet eine digitale Publikation von Inhalten. <a href="kapitel4_14.xhtml#fussnotenverweis1">[zurück]</a></p>
</aside>
Listing 4.30 Fußnote in EPUB

Das aside-Element ist das Sprungziel der Fußnotenziffer und enthält den Inhalt der Fußnote [1]. Zu Beginn des Absatzes steht der Zähler, der mit Hilfe des span und eigener Klasse gestaltet werden kann. Bei umfangreichen Texten könnte der Zähler auch in einem div-Block stehen. Auf diesem Weg könnten die Ziffern außerhalb des Textes als Listenpunkte dargestellt werden.

Da durch den Aufruf einer neuen Inhaltsdatei der Bezug zum Haupttext, auf den sich die Ergänzung bezieht, verloren geht, ist ein Rückverweis auf die entsprechende Textposition zwingend notwendig . Im oberen Listing wird dies durch einen textlichen Verweis implementiert („[zurück]“), mit dem zurück zum Fußnotenaufruf (mit der ID fussnotenverweis1) gesprungen werden kann [2].

Die allgemeine Darstellung von Verweisen wird in CSS mit dem Element-Selektor a deklariert. Um darüber hinaus eine Hochstellung des Referenzzeichens zu erzielen, werden die Eigenschaften font-size und vertical-align kombiniert:


span.fussnotenaufruf {
  margin-left: 0.1em;
  vertical-align: 15%;
  font-size: 80%;
}
Listing 4.31 Styling der Fußnotenziffer

In Folge der Implementierung über eine eigene Inhaltsseite stehen Fuß­noten nicht in einem direkten typografischen Bezug zum Hauptinhalt. ­Dennoch kann es sinnvoll sein, die Fußnotenabsätze durch eine eigene Schriftgestaltung, zum Beispiel einem kleineren Schriftgrad, als solche kenntlich zu machen.

EPUB 3

Eine Alternative zu Fußnoten über integrierte Verweise auf ein eigenes Inhaltsdokument ist im EPUB-Format die Implementierung von Popup-Elementen mit Hilfe von JavaScript. Die Inhalte werden hierbei bei Aufruf der Fußnotenziffer in einem eigenen kleinen Fenster eingeblendet, ohne die aktuelle Seite zu verlassen.

Da eine JavaScript-Unterstützung durch Lesegeräte optional ist, müssen die Inhalte in jedem Fall alternativ auch ohne Skripting zugänglich sein.

Kindle Format 8

Bei der Verwendung von Fragment-Bezeichnern in Verweisen, also Verlinkungen auf Dokumentteile einer HTML-Datei, hat das KF 8-Format in der Ausgabe aktuell eine Eigenheit. Alle Dokumentinhalte, die vor dem Dokumentteil, auf den verlinkt wird, stehen, werden nicht dargestellt. Dies ist bei der Rückverlinkung zum Haupttext ein entscheidender Nachteil, da der Kontext zum Inhalt für den Leser verloren geht und die Seite anders aussieht.

Eine Behelfslösung ist ein Rückverweis auf die gesamte Datei, gerade bei umfangreichen Dokumenten fehlt hier jedoch der Bezug zur exakten Textstelle, die auf einer ganz anderen Seite stehen kann. Es bleibt zu hoffen, dass der Umgang mit Verweisen auf Dokumentteile vom Hersteller in Zukunft technisch verbessert wird.


14 Der Herausforderung der digitalen Seitenbereiche widmet sich ein aktueller Entwurf eines „Paged Media“-CSS 3-Moduls des W3C mit Stand Juni 2012.