Digitale Bücher im Format EPUB selbst erstellen: Praxisbeispiele für Inhaltsdokumente

Inhalt

• Überblick
• Titelbild
• Eigene Datei mit Metadaten erstellen
• Literaturverzeichnis
• Abbildungen
• Gedichte
  • Gedichte als Dateninseln
  • Unerwünschte automatische Zeilenumbrüche
  • Gedichte in EPUB 3
• Literaturangaben

Bei der Realisation von Büchern treten an einigen Stellen natürlich immer wieder gleiche oder ähnliche Probleme auf, von denen hier auf ein paar eingegangen werden soll. Ausführlichere Praxisbeispiele aus eigener Produktion mit reichlich Text und Bildern (Vektorgraphik) sind auf meiner Literaturseite verfügbar [PUG] und weitere kostenlose Werke von Wilhelm Busch sind hier auf einer Unterseite verfügbar [WB].

Titelseite komplett mit Bild füllen

Statt wie beim Prototyp die Titelseite, Umschlag oder den Einband mit Text und einem Bild zu füllen, ist es wohl auch üblich, die komplette Seite mit einem einzigen Bild zu füllen. Einige Darstellungsprogramme erwarten dies wohl sogar, was aber nicht der Empfehlung zu EPUB 2 zu entnehmen ist, sondern eher ein sehr deutliches Anzeichen für eine mangelhafte Implementierung von EPUB 2 in dem jeweiligen Programm ist. Bei EPUB 3 gibt es hingegen explizit die Möglichkeit, ein Dokument als Einband oder Titelseite anzugeben.

Als Mangel von EPUB 2 ist allerdings anzuführen, daß darin steht, daß in der OPF-Datei Informationen zur Titelseite zwar in guide eindeutig und gemäß der Empfehlung auch von Darstellungsprogrammen interpretierbar notiert werden können, letztere sich aber nicht darum zu kümmern brauchen - eine Folge davon ist ein Wildwuchs von unspezifiziertem Verhalten, welches jedenfalls mit EPUB nichts zu tun hat. Daher wurde in EPUB 3 die Möglichkeit einer eindeutigen Kennzeichnung ergänzt.

Ein reines Titelbild bietet allerdings auch mehr Möglichkeiten als etwa XHTML, um das Titeldokument aufwendiger zu gestalten. Auch von daher ist es natürlich sinnvoll, diese Möglichkeit in Erwägung zu ziehen.

Da die Größe des Darstellungsbereiches beim jeweiligen Leser nicht bekannt ist und von Leser zu Leser stark variieren kann, empfiehlt es sich, die Skalierbarkeit von SVG auszunutzen, um das komplette Dokument mit dem Bild zu füllen, ohne häßliche Artefakte zu produzieren. Zudem läßt sich in der SVG-Datei auch sehr leicht eine Textalternative für jene Leser integrieren, die gar keine Graphik oder generell nichts sehen können oder wollen - etwa, weil sie sich das Buch vorlesen lassen.

EPUB fordert explizit, daß Darstellungsprogramme SVG 1.1 interpretieren müssen. EPUB 2 fordert aber gleichzeitig, daß Inhaltsdokumente in dem Format nicht bereitgestellt werden dürfen, ebensowenig wie in anderen Bildformaten. Dies ändert sich mit EPUB 3, wo Dokumente im Format SVG 1.1 eigenständige Inhaltsdokumente darstellen.

Mit SVG allein ist es sehr einfach, das Bild an die Größe des Darstellungsbereiches anzupassen, als Beispiel: Penrose-Vieleck.
Bei der Graphik wird einfach beim Wurzelelement svg das Attribut viewBox auf jenen Ausschnitt der Zeichenebene gesetzt, welcher mindestens dargestellt werden soll. Weil das Attribut preserveAspectRatio nicht gesetzt ist und width und height auf '100%' stehen, wird automatisch so skaliert, das der angegebene Ausschnitt komplett sichtbar ist und in einer Richtung auch nicht mehr als das. In der anderen Richtung wird zentriert. Mit anderen Attributwerten für preserveAspectRatio ist natürlich ein anderes Verhalten bei Bedarf einstellbar.
Um einen farbigen Hintergrund zu bekommen, wird ein sehr großes Rechteck mit dunkler Füllung als erstes darzustellendes Element im Quelltext notiert. Bei plausiblen Aspektverhältnissen wird das immer ausreichen, damit der Hintergrund komplett gefüllt ist.

Würde jetzt EPUB 2 nicht fordern, daß man das Bild irgendwie in eine Inhaltsdatei, also praktisch in eine XHTML-Datei einbetten muß, wäre der Fall damit erledigt. EPUB 3 tut dies nicht, somit ist eine solche SVG-Datei ausgezeichnet dazu geeignet, das Titelbild oder den Einband eines Buches im Format EPUB 3 zu repräsentieren.

Bei EPUB 2 ist es allerdings notwendig, das SVG in ein XHTML-Dokument zu integrieren, entweder als Bild, Objekt oder als Dateninsel. Diese Notwendigkeit macht es allerdings wieder etwas komplizierter, denn in XHTML selbst ist nirgends festgelegt, wie man ein Bild an den kompletten verfügbaren Anzeigebereich anpassen könnte und gleichzeitig das Aspektverhältnis beibehalten. Immerhin kann man die Breite von Bildern und Objekten in Prozent angeben oder gleich eine Dateninsel verwenden.

Bei der Einbindung als Bild oder Objekt ergibt sich das Problem, daß sich die Größenangaben in Prozent auf die Breite des verfügbaren Platzes beziehen, es wird also Probleme geben, wenn die Höhe des Darstellungsbereiches nicht ausreicht, um bei vorgegebener Breite das Bild mit richtigem Aspektverhältnis komplett darzustellen. Auch die Angaben zur Höhe in Prozent beziehen sich übrigens auf die verfügbare Breite.
Das erfordert also zusätzlich den Einsatz von CSS. Da ein Bild oder Objekt immer in einem Blockelement stehen muß, sagen wir ein div, sind also dessen Breite und Höhe und die von body und html auf '100%' zu setzen, Außen- und Innenabstand werden auch auf '0' gesetzt und der Hintergrund auf dieselbe Farbe wie der Bildhintergrund.

Beispiel mit img
Beispiel mit object

Eine weitere Möglichkeit besteht darin, für das Bild oder Objekt direkt gar keine Abmessung anzugeben und stattdessen nur per CSS die maximale Höhe auf '100%' oder '99%' festzulegen.
Ist für das SVG-Dokument in diesem selbst die Größe auf '100%' festgelegt, wird es automatisch skaliert. Hat das EPUB-Darstellungsprogramm Probleme mit dieser automatischen Skalierung, stellt die CSS immerhin sicher, daß das Bild nicht nach unten übersteht, sondern gegebenenfalls verkleinert wird.

Mit einer SVG-Dateninsel läuft die Angelegenheit auch nicht besser, man spart sich nur ein paar Byte an Daten und eine zweite Datei:
Beispiel mit SVG-Dateninsel

Bei Pixelgraphik wird die Angelegenheit häßlicher und komplizierter. Häßlicher wird es, weil sich Pixel nicht gut skalieren lassen. Zumindest wenn man das Bild deutlich vergrößert, werden die Artefakte ziemlich schnell auffällig. Wenn man hingegen ein sehr großes Pixelbild nimmt, kann allein die Größe des Bildes die des gesamten Textes des sonstigen Buches locker übersteigen.
Komplizierter wird die Angelegenheit, weil solche Pixelgraphik selbst nicht festlegen kann, daß das Aspektverhältnis erhalten bleiben soll und was gegebenenfalls mit überstehendem Rand passiert. Um das festzulegen, wäre die Pixelgraphik wiederum in ein SVG einzubetten, welches dieses festlegt und im Falle von EPUB 2 dann in die XHTML-Datei eingebettet wird.

Für den Zweck eines Titelbildes eignen sich jedenfalls Bilder am besten, die am Rand eine einheitliche Farbe haben - diese Farbe kann man dann auch per CSS im XHTML-Dokument als Hintergrund setzen.

Es gilt also bei EPUB 2 zu improvisieren und zusätzliche Annahmen zu treffen. Anders als bei den normalen Monitoren gehen die Darstellungsprogramme für Bücher meist davon aus, daß die Höhe des Darstellungsbereiches größer als die Breite ist.
Da EPUB 2 nur die Verwendung von CSS 2.0 erlaubt, entfallen auch die Medienanfragen, mit denen man die Präsentation vom Aspektverhältnis des Darstellungsbereiches abhängig machen könnte.
Nun kann man etwa ein Aspektverhältnis für sein Pixelbild abschätzen, vielleicht von Höhe zu Breite von 4/3 oder etwa 1.2 bis 1.5.

Nun kann man sich aussuchen, ob man lieber die Höhe oder die Breite des Bildes auf '100%' setzt, dafür kann man dann per CSS das Bild zusätzlich zentrieren. Ebenfalls mit CSS kann man zudem dafür sorgen, daß das Bild nicht übersteht, indem man eine maximale Breite beziehungsweise Höhe von '100%' setzt. Wird die unterschritten, wird das Bild dann verzerrt, bleibt aber komplett sichtbar.

Die Höhe auf '100%' gesetzt:
Beispiel mit PNG
Beispiel mit JPEG/JFIF
Die Breite auf '100%' gesetzt:
Beispiel mit PNG
Beispiel mit JPEG/JFIF

Ein alternativer Ansatz besteht natürlich darin, das Bild nicht auf die volle Größe des Anzeigebereiches zu skalieren. Als Hintergrundfarbe des XHTML-Dokumentes wählt man wieder eine geeignete Farbe: Beispiel mit fester Bildgröße.
Dieser Ansatz eignet sich sowohl für Pixelgraphik als auch für SVG-Dateien mit fester Größe in anderen Einheiten als Prozent.

Maximale Höhe und Breite können auch beide auf '100%' gesetzt werden, Höhe und Breite dazu auf 'auto', das vermeidet dann Überstände oder Verzerrungen: Beispiel mit PNG, ähnliche Skalierung wie mit SVG. Die Methode funktioniert allerdings nur solange, wie das Bild größer als der verfügbare Anzeigebereich ist. Das Bild wird also nie größer präsentiert als seine Pixelabmessungen sind. Gebenüber dem direkten Einsatz von SVG hat das natürlich den weiteren Nachteil der relativ großen Pixelgraphik-Datei, die oftmals größer sein kann als der gesamte Textinhalt des Buches.

Eigene Datei mit Metadaten erstellen

Da einige Darstellungsprogramme die Metainformationen aus der OPS-Datei dem Leser nicht komplett zugänglich machen, der Autor die Darstellung vielleicht aber auch selbst gewährleisten will, kann es sinnvoll sein, alle Metainformationen noch einmal in einer Inhaltsdatei aufzuführen.

Zur Strukturierung bietet sich in XHTML eine Definitionsliste oder eine einfache Tabelle an. Da man strenggenommen nichts definiert, sondern Elementen nur Inhalt zuweist oder Eigenschaften mit Werten auflistet, ist eine Definitionsliste natürlich nicht genau passend. Andere Listen bieten allerdings nicht genügend Struktur. Tabellarischer Inhalt ist es auch nicht notwendig, läßt sich aber so interpretieren. Da einige EPUB-Programme Probleme mit der Präsentation von größeren Tabellen haben, kann es sinnvoller sein, bei einer Definitionsliste zu bleiben.

Innerhalb von XHTML sind Elemente von Dublin Core kein Inhalt, der erforderlich darstellbar ist, obwohl es hier natürlich ausreichen würde, eine angemessene Stilvorlage bereitzustellen. RDFa ist auch nicht innerhalb von EPUB vorgesehen, was aber auch nicht so relevant ist, weil die Metainformationen ja bereits in der OPS-Datei maschinenlesbar notiert sind.

Also dazu Beispiele für EPUB 2:
Metainformationen eines Beispiel-Buches (als Definitionsliste);
Metainformationen eines Beispiel-Buches (als Tabelle).

Bei EPUB 3 sieht die Struktur etwas anders aus, weil nicht mehr XHTML 1.1 zu verwenden ist, sondern die XML-Variante von HTML5. Zudem kann mit dem Attribut type aus dem Namensraum von EPUB 'http://www.idpf.org/2007/ops' die semantische Bedeutung der Struktur besser angegeben werden:
Metainformationen eines Beispiel-Buches (als Definitionsliste);
Metainformationen eines Beispiel-Buches (als Tabelle).

Literaturverzeichnis

Im laufenden Text wird man einen Quellennachweis vermutlich als Verweis auf ein Literaturverzeichnis umsetzen. Dazu wird dem Verweis eine eindeutige Abkürzung für die Quelle als Text gegeben. Zusätzlich wird ein eindeutiger Fragmentidentifizierer notiert, damit man vom Eintrag im Literaturverzeichnis auch wieder zurück zur Textstelle gelangen kann, etwa so:

<p>
Bei <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
1.1 werden einige Module ausgeschlossen,
die für <abbr title="electronic publication">EPUB</abbr>
als nicht relevant eingestuft werden.
Ausgenommen sind in <abbr>EPUB</abbr> 2 von <abbr>XHTML</abbr> 1.1
<a href="literaturverzeichnis.xhtml#XHTML" id="a_XHTML">[XHTML]</a>
die Module "ruby", "forms", "server-side-image-map", "intrinsic-events",
"applet", "frames", "target", "iframe", "scripting", "legacy". <br />
Auch <abbr title="Resource Description Framework in Attributes">RDFa</abbr>
<a href="literaturverzeichnis.xhtml#RDFa" id="a_RDFa">[RDFa]</a>
als neuere semantische Erweiterung ist leider noch nicht
in <abbr>EPUB</abbr> 2 integriert.
</p>

Sei dies im Dokument namens 'kapitel3.xhtml' geschrieben, so kann man zum Beispiel im Literaturverzeichnis 'literaturverzeichnis.xhtml' eine große Liste mit allen Quellen angeben, etwa so:

<div class="abschnitt" id="literatur">
<h2>Literaturangaben</h2>
<ul class="quellen">
<li> ... viele Einträge anderer Quellen ...</li>

<li> <span class="a"> <a href="kapitel3.xhtml#a_XHTML" id="XHTML" title="XHTML">⇑</a> </span>
    [XHTML] <cite><a hreflang="en" href="http://www.w3.org/TR/xhtml-modularization/">XHTML 1.1</a>;
    http://www.w3.org/TR/xhtml-modularization/
    </cite></li>
<li> <span class="a"> <a href="kapitel3.xhtml#a_RDFa" id="RDFa" title="Format XHTML+RDFa">⇑</a> </span>
    [RDFa] <cite><a hreflang="en" href="http://www.w3.org/TR/2012/REC-xhtml-rdfa-20120607/">XHTML+RDFa 1.1</a>;
    http://www.w3.org/TR/2012/REC-xhtml-rdfa-20120607/
    </cite></li>

<li> ... viele Einträge anderer Quellen ...</li>
</ul>
</div>

Für jede Quelle gibt es also einen Listenpunkt. Und für jeden Verweis auf diesen Listenpunkt gibt es im span mit dem Attribut für Klassen class mit dem Wert 'a' als Klassennamen jeweils einen Verweis mit einem Pfeil nach oben '⇑' als Rückverweis zur Referenz im Text. Gegebenenfalls ist der Wert des Attributes title bei mangelhaften EPUB-Programmen nicht zugänglich, daher kann es notwendig sein, mehr passenden Text zu spendieren.

Dazu hat jeder Listenpunkt natürlich einen Eintrag mit der eindeutigen Abkürzung für die Quelle und die Quellenangabe selbst. Da Verweise nach außerhalb des Buches funktionieren können, aber nicht immer müssen, ist es ferner sinnvoll, die URI auch als Klartext anzugeben, damit sie einfach aus dem Buch kopiert werden kann, falls das Darstellungsprogramm Verweise aus dem Buch verweigert, auch wenn eine Netzverbindung vorhanden ist.

Bei veränderlichen Inhalten bei der URI ist es natürlich auch sinnvoll, ein Datum des Abrufs anzugeben. Sofern die Quelle ein Wiki-System ist, kann ja bei Bedarf sogar der Zustand der Quelle zum Zeitpunkt des Abrufes angesehen werden.

Bei nicht veränderlichen Quellen lohnt es sich natürlich auch, soweit vorhanden eine URN oder DOI zu notieren.

Bei Quellen ohne URI macht man natürlich eine Quellenangabe wie gehabt, sofern vorhanden auch mit ISBN, URN oder DOI, um das eindeutige Auffinden zu erleichtern.

Auch hier läßt sich bei EPUB 3 mit dem Attribut type aus dem Namensraum von EPUB 'http://www.idpf.org/2007/ops' die semantische Bedeutung der Struktur besser angeben, dazu gehören die Werte 'bibliography' und 'biblioentry'. Etwa für Glossare gibt es entsprechende Werte 'glossary', 'glossterm', 'glossdef'. Entsprechend gibt es für zahlreiche weitere Buchstrukturen passende Werte.

Abbildungen

In XHTML sind img und object ja inzeilige Elemente, die mitten im Text auftreten und dort den angegebenen Text ersetzen, falls das Bild statt dieses Textes dargestellt wird. Der zu ersetzende Text wird bei img mittels des Attributes alt notiert, bei object ist hingegen der Elementinhalt selbst eine Alternative zum referenzierten Inhalt.

So eingebettete Bilder eignen sich recht gut für Logos und kleinere Piktogramme, die im normalen Textfluß auftreten, nicht für eigenständige Graphiken und Bilder, die deutlich vom Textfluß abgesetzt sind. Solche eigenständigen Abbildungen haben oft auch eine Bildunterschrift, insbesondere in Büchern.

Die Arbeitsentwürfe für HTML5 schlagen für solch eigenständige Abbildungen mit Bildunterschrift zwei neue Elemente vor, die in XHTML 1.1 und damit auch in EPUB 2 noch nicht verfügbar sind.

In EPUB 3 sind diese Elemente verfügbar, was dann etwa zu folgender Struktur führt:

<figure>
  <img src="penrose01.svg"
       type="image/svg+xml"
       alt=""
       height="500"
       width="500" /><br />
  <figcaption><strong>Abbildung 17:</strong>
  Penrose-Fünfeck mit Farbverlauf,
  welcher die räumliche Täuschung weiter verstärkt.
  Durch die geschickte zweidimensionale Anordnung
  von Linien und Flächen entsteht der Eindruck einer
  unmöglichen räumlichen geometrischen Figur.
  </figcaption>
</figure>

Was ist also zu tun, um eine ähnliche Struktur in EPUB 2 zu bekommen, wenn auch mit unspezifischeren Elementen? Die semantische Bedeutung kann man ja bei Bedarf über ein Schema angeben, welches definiert, welche Bedeutung die angegebenen Klassennamen haben, die etwa LML-Elementen entsprechen.

Eine Möglichkeit der Auszeichnung besteht dann darin, die Abbildung samt Unterschrift als einen eigenständigen und abgeschlossenen Gedankengang aufzufassen, dann kommt natürlich ein Element p in Frage, in welchem img oder object zusammen mit der Bildunterschrift notiert werden, zum Beispiel so:

<p class="abbildung">
  <img src="penrose01.svg"
       type="image/svg+xml"
       alt=""
       height="500"
       width="500" /><br />
  <em><strong>Abbildung 17:</strong>
  Penrose-Fünfeck mit Farbverlauf,
  welcher die räumliche Täuschung weiter verstärkt.
  Durch die geschickte zweidimensionale Anordnung
  von Linien und Flächen entsteht der Eindruck einer
  unmöglichen räumlichen geometrischen Figur.
  </em>
</p>

Per CSS kann nun zum Beispiel die Abbildung zentriert werden, zudem kann die maximale Größe des Bildes an den verfügbaren Platz angepaßt werden:

p.abbildung {text-align: center; margin: 2em}
p.abbildung img {max-width: 90%; height: auto}

Eine andere Möglichkeit:

p.abbildung {margin: 2em}
p.abbildung img {max-width: 90%;
                 height: auto;
                 display:block;
                 margin: auto
                }
p.abbildung em  {max-width: 90%;
                 display:block;
                 margin: auto
                }

Nun kann man die Abbildung aber auch so interpretieren, daß das Bild und die Bildunterschrift beides abgeschlossene, eigenständige Gedankengänge sind. Dann fehlt aber eine übergeordnete Struktur, um beides zusammenzufassen. Da XHTML 1.1 dafür kein passendes spezifisches Element hat, bleibt dafür nur ein div mit einer passenden Klassenangabe:

<div class="abbildung">
  <div class="bild"><img src="penrose01.svg"
       type="image/svg+xml"
       alt=""
       height="500"
       width="500" /></div>
  <p><strong>Abbildung 17:</strong>
  <em>Penrose-Fünfeck mit Farbverlauf,
  welcher die räumliche Täuschung weiter verstärkt.
  Durch die geschickte zweidimensionale Anordnung
  von Linien und Flächen entsteht der Eindruck einer
  unmöglichen räumlichen geometrischen Figur.
  </em></p>
</div>

Hier ist dann das CSS noch wichtiger, um die Abbildung in der Darstellung vom restlichen Inhalt abzuheben, was bei einem Absatz automatisch erfolgt. Ansonsten ist das CSS ähnlich wie zuvor:

div.abbildung {margin: 2em}
div.abbildung div.bild {text-align: center}
div.abbildung img {max-width: 90%; height: auto}
div.abbildung p {margin-top: 1ex; max-width: 90%}

Oft ist es auch erwünscht, daß der normale Text um die Abbildungen herumfließt. Mit den Eigenschaften float und clear von CSS ist dies auch recht schnell zu erreichen, siehe dazu auch folgendes Beispiel (und dazu auch in dessen Quelltext):
Vom Text umflossene Abbildungen.
Bei einer Änderung der Breite des Darstellungsbereiches zeigt sich auch, daß sich bei dieser Stilvorlage der Inhalt recht flexibel an die Gegebenheiten anpaßt.

Je nachdem ob man im Quelltext erst das Bild und dann den Text stehen hat oder umgedreht, kann sich hinsichtlich des Umfließens jeweils eine andere Problematik ergeben. Dazu ein Beispiel von Wilhelm Busch, ein Gedicht mit Abbildung, hier bereits für EPUB 3 ausgelegt. Im Original ist das Bild kleiner als das Gedicht und rechts unten neben dem Text angeordnet.
Da das Inhaltsdokument nur relevanten Inhalt beinhalten soll und die Dekoration zu CSS ausgelagert werden soll, es sich ferner auch nicht um tabellenartigen Inhalt handelt, steht hier entweder das Bild vor dem Text oder umgedreht. Dabei läßt sich allenfalls noch diskutieren, ob im ersteren Falle die Überschrift vor oder nach dem Bild kommen soll, denn das Bild gehört ja zum Text dazu. Wenn allerdings beides in einem eigenständigen Dokument steht, sollte das ausreichen, um die Zusammengehörigkeit klarzustellen, sonst müßte man dafür einen geeignetes Element vorsehen, welches beides umschließt.

Da es sich bei dem Bild um eine Vektorgraphik im Format SVG handelt und ich bei dieser selbst keine Abmessungen festgelegt habe, beziehungsweise Höhe und Breite auf 100%, richtet sich die Größe nach dem verfügbaren Platz, auch von daher ergibt sich Bedarf, Anordnung und Größe der Figur mit der Graphik per CSS angemessen festzulegen.
Abbildung vor Text
Abbildung nach Text
Wie man Gedichte sinnvoll auszeichnet, wird im nächsten Abschnitt genauer erläutert, darauf wird hier nicht weiter eingegangen. Stillschweigend werden hier dazu bereits sinnvolle CSS-Angaben notiert, weil das in EPUB 3 verwendete HTML5 keine sinnvolle Auszeichnung und Präsentation von Gedichten erlaubt.

Das besondere an der Kombination von Gedicht und Graphik ist hier aber, daß man eigentlich nicht möchte, daß das Gedicht die Graphik in dem Sinne umfließt, man möchte beides schlicht nebeneinander haben, jedenfalls wenn genug Platz nebeneinander ist, von daher ist es schon einmal gut, daß beide Strukturen in gesonderten Elementen untergebracht sind. Gedichte sind zudem nicht besonders breit, nach Möglichkeit aber immer so breit, daß die längste Zeile nicht umgebrochen wird. Nach kurzen Versuch zeigt sich, daß dieses Gedicht in dem Sinne eine Breite von mindestens etwa 22em hat. Auf ungefähr diese Breite kann man nun das Gedicht auch festlegen und als ersten Versuch legt man die Breite des Bildes etwa auf 33% fest, jedoch mindestens 5em.
Weil die abgebildete Person auf der Graphik nach links guckt, wird man sie rechts neben dem Text haben wollen, also bekommt die Figur float: 'right' und das Gedicht float: 'left'. Solange die beiden nebeneinander stehen, ist es dann egal, ob im Quelltext erst das Gedicht oder erst die Graphik steht, diese Anordnung fällt erst dann auf, wenn der Platz für die beiden nebeneinander nicht mehr reicht und float sie wieder automatisch übereinander anordnet:
Abbildung vor Text
Abbildung nach Text

Da ließe sich jetzt zweifellos noch einiges optimieren, wenn man wüßte, wie groß der Darstellungsbereich ist. Zum Beispiel würde man den Platz gerne besser ausnutzen und eventuell das Bild automatisch so skalieren lassen, daß bei ausreichender Breite die Höhe die der Höhe des Anzeigebereiches nicht überschreitet, damit man das Bild wenigstens auf einmal sehen kann. Die Möglichkeiten, mit Einheiten zu rechnen, gibt es leider zur Zeit der Veröffentlichung von EPUB 3 erst als Arbeitsentwurf für CSS 3, ist also nicht zulässig. Immerhin erlaubt EPUB 3 die Verwendung von CSS-Medienanfragen. Damit kann man sich wenigstens grob behelfen. Bei Medienanfragen wird allerdings umgekehrt vorgegangen, für verschiedene Medien oder Abmessungen des Darstellungsbereiches kann man verschiedene CSS-Angaben notieren. Das wird dann schnell recht umfangreich, weil man praktisch für viele Möglichkeiten von Darstellungsbereich-Größen jeweils anderen Angaben machen darf, statt Abmessungen direkt auf die tatsächliche Bildschirmgröße beziehen zu können.
Sofern man Größenangaben nicht in der SVG-Graphik macht, ist diese zwar skalierbar, einige Darstellungsprogramme haben allerdings einen Fehler, der es erforderlich macht, bei inzeilig eingebetteten SVG-Fragmenten die Attribute width und height des äußersten Elementes svg explizit auf 100% zu setzen, um eine sinnvolle Skalierbarkeit zu erreichen.
Möchte man dies nicht tun, gibt SVG 1.1 allerdings eine weitere Möglichkeit an, einige eigentlich für SVG selbst nicht anwendbare CSSEigenschaften verwendet zu werden, um für ein äußerste svg eines inzeiligen SVG-Fragmentes den Darstellungsbereich festzulegen, unter anderem auch dessen Größe, also Höhe und Breite. Diese Angabe deckt sich dann inhaltlich nicht exakt mit den gleichnamigen Attributen für Höhe und Breite bei eigenständigen SVG-Dokumenten, hat aber den gleichen Effekt.

Zusätzlich kann es notwendig oder sinnvoll sein, per CSS das Element zu dimensionieren, in welchem die SVG-Graphik steht - oder sofern man sie nur als eigenständige Datei durch Referenzierung einbettet - ist das referenzierende Element img oder object passend per CSS zu dimensionieren. Dabei kann es notwendig sein, diese Strukturen absolut zu positionieren, wenn man die Graphik relativ zum Anzeigebereich skalieren will.

Ohne solch einen Bezug hat man es mit dem generellen Problem von CSS zu tun, Angaben zur Höhe direkt bezogen auf den aktuell verfügbaren Darstellungsbereich zu machen. Das ergibt dann Schwierigkeiten, ein skalierbares Bild nicht größer als die Höhe des Darstellungsbereiches werden zu lassen. Effektiv ist es dazu notwendig, das Aspektverhältnis jeder einzelnen Graphik zu kennen und die entsprechenden CSS-Medienanfragen daran anzupassen. Bei vielen Bildern ist das nur praktikabel, wenn man es hinbekommt, die Bilder in wenige Klassen einzuteilen, die jeweils Bilder mit demselben Aspektverhältnis enthält. Dann ist es noch plausibel, für jede Klasse eine entsprechende Kaskade von CSS-Medienanfragen bereitzustellen.
Beispiel mit CSS-Medienanfragen:
Abbildung vor Text
Abbildung nach Text

CSS position: 'fixed' ist in EPUB 2/3 nicht zulässig, daher ist es damit nicht möglich, das Bild beim Rollen des Textes immer sichtbar zu halten. Man kann aber Gedicht und Graphik mittels CSS position: 'absolute' unabhängig voneinander machen. Weil das Bild aber rechts vom Text ist und Rollbalken auch meist rechts vom zugehörigen Inhalt angeordnet sind, bekäme man dann den Rollbalken für das Gedicht zwischen diesem und der Graphik angezeigt, was mehrheitlich vermutlich auch als suboptimal eingeschätzt wird.
Beispiel mit absoluter Positionierung und mittigem Rollbalken:
Abbildung vor Text
Abbildung nach Text
Ist nicht genug Platz, werden hier Bild und Text wieder übereinander angeordnet.

Positioniert man hingegen nur das Bild absolut und sorgt mit Medienanfragen dafür, daß das Bild nicht mit dem Text bekannter Breite überlappt, so bekommt man eine etwas einfachere näherungsweise Lösung: Beispiel mit absolut positioniertem, skalierbaren Bild:
Abbildung vor Text
Abbildung nach Text
Ist nicht genug Platz, werden auch hier Bild und Text wieder übereinander angeordnet.

Wenn es in Zukunft zulässig sein wird, mit Einheiten zu rechnen, ist die Lösung deutlich eleganter und kommt mit einer Medienanfrage aus:
Abbildung vor Text
Abbildung nach Text
Weil diese Lösung recht einfach ist, ist hier auch eine zweispaltige Darstellung für das Gedicht ergänzt, falls dafür genug Platz vorhanden ist.

Das vorherige Beispiel verwendet absolute Positionierung auch für den Fall, daß Text und Bild übereinander angeordnet werden. Daher ist dann das Bild immer über dem Text, egal in welcher Reihenfolge die Inhalte im Quelltext stehen. Der Entwurf zum Einheitenmodul von CSS 3, der auch das Rechnen mit Einheiten zuläßt, definiert auch neue Einheiten, welche sich auf den Darstellungsbereich beziehen. Wenn die Verwendung dieses Moduls zulässig sein wird, wird es dann auch recht einfach sein, ohne absolute Positionierung zu arbeiten und trotzdem eine Anpassung an die Höhe des verfügbaren Anzeigebereiches vorzunehmen:
Abbildung vor Text
Abbildung nach Text

Gedichte

Bekanntlich hat ja XHTML keine geeigneten Elemente zur fachgerechten Auszeichnung von Gedichten und auch die Arbeitsentwürfe für HTML5 bieten da trotz Hinweis und längerer Diskussion des Problems keine sinnvollen Elemente mit semantischer Bedeutung, um Gedichte mit XHTML zu veröffentlichen.
Natürlich gibt es da gravierendere Mängel, Lücken und Fehler in den HTML5-Arbeitsentwürfen, aber da der Autor dieses Artikels selbst an der Diskussion beteiligt war und im größeren Umfange Vorschläge gemacht hat, um das Problem zu beheben, ist das sozusagen inzwischen ein Lieblingsthema hinsichtlich (X)HTML. Von daher gibt es dazu auch einen ausführlichen Artikel [Aus].

Als Faustformel sollte man sich als Autor schon einmal verinnerlichen: Sofern die Strukturierung eines Gedichtes über Strophen und Zeilen hinausgeht und eine spezielle Anordnung relevant ist, ist (X)HTML ungeeignet und man sollte direkt auf SVG ausweichen, was einem nervenaufreibende Enttäuschungen erspart. Zwar hat auch SVG keine Elemente, die spezifisch für die Auszeichnung von Gedichten sind, die Elemente für Text haben anders als bei (X)HTML gar keine semantische Bedeutung. Aber es läßt sich präzise bestimmen, wo welche Zeichen oder Glyphen dargestellt werden sollen und auch wie sie dargestellt werden sollen. In EPUB 3 können Inhaltsdokumente direkt im Format SVG geschrieben werden. Bei EPUB 2 empfiehlt es sich für diesen Zweck, eine SVG-Dateninsel in einem ansonsten leeren XHTML-Inhaltsdokument unterzubringen.

Nun mag man sich natürlich auch der Ansicht (mehrerer Mitglieder der HTML5-Arbeitsgruppe des W3C) anschließen, daß ernsthafte Menschen heute sowieso keine Gedichte mehr schreiben, also selber schuld, wenn es dann Probleme damit gibt, wenn man das auch noch in digitaler Form veröffentlichen will - wer ließt heute schon noch Gedichte?
Andererseits wächst man natürlich an seinen Aufgaben, daher soll das Thema hier nicht ausgelassen werden, auch wenn es nur eine Randgruppe von nahezu vernachlässigbar wenigen Autoren betreffen mag, zu denen der Autor dieses Artikels allerdings auch zählt.

Da wiederum EPUB 2 die Möglichkeiten eines Autors noch weiter drastisch einschränkt, kommen auch nicht die schönsten Möglichkeiten aus dem referenzierten Artikel in Betracht, es ist also notwendig zu improvisieren. EPUB 3 bietet wiederum deutlich davon abweichende, damit inkompatible Möglichkeiten, es ist aber ebenfalls notwendig zu improvisieren.

poem line {
  margin-left: 2em;
  text-indent: -2.0em
 }

poem line {
 padding-left: 2em;
 text-indent: -2em
}

Literaturangaben

• ⇑ [PUG] Der Prinz und der Gloeckner: Kostenlose digitale Bücher im Format EPUB
• ⇑ [WB] Kostenlose digitale Bücher von Wilhelm Busch
• ⇑ [Aus] Ausgedichtet
• ⇑ [LML] LML