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

Nicht in der Erkenntnis liegt das Glück, sondern im Erwerben der Erkenntnis.
Edgar Allan Poe

Kurzanleitung; Tests von Darstellungsprogrammen (weitere Beispiele)

Inhalt

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.

Gedichte als Dateninseln

Immerhin, so könnte man denken, DTB hat ja Elemente zu Auszeichnung von Gedichten und EPUB 2 erlaubt DTB für Inhaltsdokumente - also Problem gelöst, (X)HTML vergessen, DTB nutzen.

Leider ist es nun aber so, daß die meisten Darstellungsprogramme, welche behaupten, EPUB 2 interpretieren zu können, sich bei Inhalten im Format DTB entweder komplett verweigern oder keine brauchbare Präsentation zustande bringen. Und dies, obwohl es nur geschätzte ein oder zwei Stunden dauern würde, um für jene relevanten Elemente von DTB, die über die hinausgehen, die ohnehin von XHTML übernommen wurden, wenigstens eine passable Stilvorlage zu erstellen, um dieses Format quasi als Erweiterung von XHTML um einige semantisch relevante Elemente immerhin passabel ohne weitere über die von XHTML hinausgehende Funktionalität präsentieren zu können.

Eine Dateninsel mit LML [LML] zu erstellen, ist eine weitere Alternative, erfordert allerdings die recht umständlichen Mechanismen, die EPUB 2 für Alternativen vorsieht, wenn es nur als Fragment in einem XHTML-Dokument verwendet wird. Wird es als eigenständiges Dokument verwendet, braucht es allerdings nur eine Stilvorlage als Alternative, um eine geeignete Präsentation bereitzustellen. Für die meisten Elemente bietet LML diese sogar selbst an, also eine sinnvolle Lösung, wenn das betroffene Dokument sonst keine Funktionalität aufweisen soll. Die Möglichkeit mit der Stilvorlage entfällt wiederum leider in EPUB 3, welches die Möglichkeiten von Autoren hier weiter drastisch einschränkt.

Auch eine DTB-Dateninsel als Fragment in XHTML mit einer passenden Stilvorlage für die verwendeten DTB-Elemente ist eine gute Lösung, weil EPUB 2 für DTB keine Alternativen fordert. Für EPUB 3 ist hingegen eine Alternative bereitzustellen. In der Praxis kann man es dann auch gleich bei der XHTML-Alternative belassen und DTB gar nicht notieren, weil es dann ohnehin von den allermeisten Darstellungsprogrammen zugunsten der XHTML-Alternative ignoriert wird.

Weil Dateninseln mit Elementen aus XML-Formaten auch in HTML 4 nicht möglich sind und in HTML5 auch in Zukunft mit beliebigen XML-Formaten nicht möglich sein werden, sofern man nicht die XML-Variante von HTML5 nutzt, wie sie ja übrigens auch für EPUB 3 vorgesehen ist, stellt allerdings LML eine Möglichkeit bereit, wenigstens für HTML 4, XHTML 1.1, XHTML 1.0 formal ein Schema anzugeben, mit dem man den Werten des Attributes class eine besondere semantische Äquivalenz zu LML-Elementen verleihen kann. Auch diese Methode eignet sich folglich für den Einsatz mit EPUB 2, nicht jedoch für EPUB 3. Letzteres liegt an einer rückwärtsinkompatiblen Änderung in den Entwürfen zu HTML5, die eine formale Angabe von eigenen Schemata für Metainformationen ausschließen. Für EPUB 3 gibt es aber eine gesonderte Lösung die in einem weiteren Abschnitt unten näher erläutert wird.

Lange Rede, kurzer Sinn, als erstes wird betrachtet, wie man ein per DTB ausgezeichnetes Gedicht als Dateninsel in ein XHTML-Dokument packt, und mit einer hinreichenden Stilvorlage zu einer passablen Präsentation bringt. Im Prototyp gibt es ja bereits ein Gedicht, welches mit DTB ausgezeichnet ist, dort als komplettes Dokument. Guckt man da rein, stellt man schnell fest, für Gedichte braucht man im Wesentlichen die für DTB spezifischen Elemente poem, title, author, byline, dateline, linegroup und line.
Auch nur um Anweisungen für diese muß man also eine Stilvorlage erweitern, damit eine DTB-Dateninsel in einem XHTML-Dokument passabel auch von jenen Programmen präsentiert werden kann, die selbst keine eigene Stilvorlage für DTB-Elemente haben.
Da title auch in XHTML vorkommt, muß man nur darauf achten, bei der Stilvorlage nur das title innerhalb von poem zu selektieren.

Beispiel für ein Gedicht als DTB-Dateninsel in einem XHTML-Dokument.

Sinngemäß kann man als zweite Variante so vorgehen, daß man LML per Schema und Profil einbindet. Damit werden bestimmte Einträge in die Liste des Wertes des Attributes class in definierter Weise mit semantischer Bedeutung versehen. Die Einträge und die Bedeutung entspricht dann Elementnamen von LML. Entsprechend werden sodann bei der Stilvorlage diese Klassen verwendet, um eine angemessene Präsentation zu gewährleisten.

Beispiel für ein Gedicht als in einem XHTML-Dokument mit LML-Klassennamen per Schema und Profil.

Unerwünschte automatische Zeilenumbrüche

Hinsichtlich der visuellen Präsentation ist es bei klassischen Gedichten relevant, einen automatischen Zeilenumbruch bei Zeilen entweder zu unterbinden oder aber diesen eindeutig zu kennzeichnen. Üblich ist etwa eine Einrückung der unerwünscht automatisch erzeugten Pseudozeilen. Dazu dient zum Beispiel folgende Kombination von Anweisungen (Beispiel mit Elementen von DTB, funktioniert natürlich auch mit anderen Elementen):

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

Pauschal wird die Zeile per Außen- oder Innenabstand eingerückt, nur die erste Zeile wird mit einem entsprechenden negativen text-indent: -2em wieder zurückgenommen, Beispiel siehe oben und hier: Warum der Feldalp keine Radfahrer mehr verfolgt.

Alternativ oder zusätzlich ergibt sich die Möglichkeit, die erste Zeile besonders zu dekorieren. Die erste Zeile wird dazu mit dem Pseudoelement :first-line selektiert, um ihr bestimmte Eigenschaften zu geben, während der Rest der Zeile eine andere Zuweisung erhält. Das kann eine andere Einrückung sein, aber auch eine andere Farbe oder eine bestimmte Markierung. Wirkung hat das Element auf die erste Zeile eines Blockelementes. Folgende Eigenschaften können bezogen auf EPUB 2 verwendet werden: text-decoration, vertical-align, line-height, ferner Eigenschaften zu font-*, color und background-color.
Dazu folgendes Beispiel: Sprachecken legen kurze Brände (mit :first-line).

Solche Farbkodierungen allein sind noch nicht optimal, mit dem Pseudoelement :first-letter lassen sich dafür dann auch die eher etablierten Einrückungen umsetzen: Sprachecken legen kurze Brände (mit :first-letter) und die Farbkodierungen primär für etwas anderes nutzen. Anwendbar ist :first-letter ebenfalls auf Blockelemente.

Statt unerwünschte Zeilenumbrüche optisch zu kennzeichnen, kann man natürlich auch ganz anders vorgehen und sie verhindern. Allerdings muß der Leser dann den Anzeigebereich horizontal rollen oder verschieben, was oft als unangenehm empfunden wird, zur Vermeidung von ungewollten Zeilenumbrüchen in Gedichten aber ein angemessener Kompromiß sein mag.

Wenn man etwa weiß, daß keine Zeile eines Gedichtes mehr als 30 Zeichen hat, kann man die minimale Breite des Gedichtes auf 30 Zeichen festlegen, dazu dient die Eigenschaft min-width beziehungsweise auch einfach width: Sprachecken legen kurze Brände (mit fester Breite).

Nun gilt es noch den Fall abzudecken, daß das Darstellungsprogramm so mangelhaft ist, daß es gar kein CSS interpretiert oder die Interpretation deaktiviert ist. Statt normaler Leerzeichen verwendet man dann das Zeichen '&#160;': im Garten (mit festen Leerzeichen).

Für eine präzise Beibehaltung von Leerzeichen einschließlich Zeilenumbrüchen empfiehlt sich in XHTML das Element pre. Zwar hat das auch keine spezielle semantische Bedeutung, aber es erhält Zeilenumbrüche und andere Leerzeichen. Zur Kennzeichnung der semantischen Bedeutung muß man vorgehen wie bei div. pre kann allerdings nur inzeilige Elemente enthalten, für die semantische Kennzeichnung der Zeilen würde man folglich span mit einer entsprechenden Wert für das Attribut class verwenden.
Gedichte, wo die präzise Anordnung der Glyphen und die Anzahl der Leerzeichen relevant ist, haben allerdings nicht zwangsläufig eine Zeilenstruktur, welche eben durch die präzise Anordnung der Glyphen ersetzt wird: Sie - Sonne.

Will man es bei CSS belassen, kann man eine ähnliche Präsentation wie für pre erhalten, wenn man für die Eigenschaft white-space den Wert 'pre' verwendet. Kommt es nur darauf an, den automatischen Zeilenumbruch zu verbieten, so eignet sich auch der Wert 'nowrap'.

Bei komplizierteren Anordnungen der Glyphen empfiehlt es sich jedenfalls, auf SVG auszuweichen, wo man derartige Probleme der Anordnung von Text viel flexibler handhaben kann. Auch da gibt es zwar keine passenden Elemente mit semantischer Bedeutung für Gedichte, aber zumindest die korrekte Präsentation ist leicht sicherzustellen. Die Kennzeichnung der Semantik kann ganz ähnlich wie bei XHTML mit LML erfolgen.
Die Einbindung kann dann natürlich sinngemäß wie für das Titelbild vorgenommen werden.

Gedichte in EPUB 3

In EPUB 3 ergeben sich zwar etwas andere Möglichkeiten, Gedichte ordentlich auszuzeichnen, allerdings entfällt durch den Wegfall des Formates DTB formal auch die Möglichkeit, Gedichte überhaupt allein mit einem Inhaltsdokument korrekt zu kennzeichnen. Da DTB aber ohnehin in der Praxis von keinem Darstellungsprogramm anständig oder überhaupt interpretiert wurde, war dies ohnehin in EPUB 2 keine wirklich praktikable Möglichkeit.

Durch den Wechsel von XHTML 1.1 zur XML-Variante der Arbeitsentwürfe zu HTML5 in EPUB 3 ergeben sich zudem einige weitere inhaltliche Einschränkungen bei der Wahl passender Elemente. In Frage kommen primär die Elemente div und section. Ausgeschlossen sind hier nunmehr Definitionslisten. Für Strophen könnte sich ansonsten noch eine angeordnete Liste mit dem Element ol eignen, was dann zumindest den Vorteil hätte, daß selbst ohne Interpretation von Stilvorlagen eine Kennzeichnung der Zeilenanfänge auch dann gewährleistet ist, wenn bei den Kindelementen li ein automatischer Zeilenumbruch stattfindet. Da es bei Strophen auf die Reihenfolge der Zeilen ankommt, ist eine ungeordnete Liste mit ul sicher nicht geeignet. Die angeordneten Liste ist ebenfalls eher für Prosa gedacht, also auch keine wirklich gute Wahl, aber vermutlich ist neben div das Element ol jenes, welches in HTML5 der Struktur und Bedeutung einer Strophe noch am nächsten kommt und beinhaltet eben die Funktion der Kennzeichnung von Zeilenanfängen im Unterschied zu automatischen Zeilenumbrüchen. ul bietet diese Funktion auch, ist aber von der Bedeutung her eher schlechter geeignet. div bietet die Funktion nicht, hat aber den Vorteil, von HTML5 mit keiner semantischen Bedeutung vorbelastet zu sein. section eignet sich dabei in ähnlicher Weise, allerdings eher für die Strophe als für einzelne Zeilen einer Strophe.

Um die semantische Funktion oder Rolle von Elementen zu kennzeichnen, bietet EPUB 3 im eigenen Namensraum für Inhaltsdokumente 'http://www.idpf.org/2007/ops' das Attribut type, welches sich dann eignet, um Gedichtstrukturen semantisch als solche kenntlich zu machen. Allerdings bietet das Vokabularium von EPUB 3 dafür keine geeigneten Einträge und auch das von XHTML nicht. Es ist also notwendig, Einträge aus einem anderen Vokabularium zu verwenden. Zwar könnte man hier nun die Elementnamen von DTB als Vokabularium verwenden, aber auch da ist die Auswahl sehr beschränkt, so daß sich auch hier wieder das praktikablere Sortiment von LML anbietet.

Ein Beispiel unter Verwendung des Elementes ol für Strophen und LML zur Kennzeichnung der semantischen Funktion: im Garten.
Ein entsprechendes Beispiel, welches div und section verwendet: im Garten.
Entscheidend ist in beiden Fällen die konsequente Verwendung des Attributes type zur Angabe der Semantik. Da LML in EPUB 3 kein vordefiniertes Präfix hat, wird diese mit dem Attribut prefix von EPUB 3 definiert und dann in den Attributwerten von type verwendet.
Da in EPUB 3 auch das Namensraummodul von CSS verwendbar ist, wird damit dann in der Stilvorlage auch eine entsprechende Selektion vorgenommen.

Eine relevante Verbesserung ergibt sich bei EPUB 3 dadurch, daß auch einfach Dokumente im Format SVG als Inhaltsdokumente verwendet werden können - dies ist das Mittel der Wahl auch für Gedichte, wenn ihre Struktur über einfache Strophen und Zeilen hinausgeht.

Literaturangaben