Mit dem Editor Sigil 1.4.2 fällt es leicht, eigene E-Books nach Belieben zu gestalten. Dazu brauchen Sie lediglich ein CSS-Stylesheet sowie etwas HTML-Kenntnisse.

Häufig kommt es vor, dass Verlage E-Books aufgrund eines schlechten Layouts ablehnen. Darunter fallen so banale Dinge wie Text, der über die Tabelle hinausragt, oder Bilder, die andere Elemente überlappen. Solche Fehler passieren zum Beispiel, wenn Sie Dokumente mittels LibreOffice Writer nach EPUB konvertieren.

Abhilfe schafft da ein Editor wie Sigil, mit dem Sie Zugriff auf den Quellcode erhalten und die Fehler von Hand beheben. Mit Sigil korrigieren Sie aber nicht nur fehlerhafte Syntax, sondern erzeugen außerdem ein Inhaltsverzeichnis mit Links auf die Kapitel.

Installation

Etliche Distributionen führen Sigil [1] bereits in den Paketquellen, sodass Sie es mit dem jeweiligen Paketmanager installieren. In der Regel lautet der Paketname sigil. Allerdings stellen die Distributionen verschiedene, teils sogar fehlerhafte Versionen von Sigil bereit. So kommt es etwa bei Sigil 1.4.1 zu einem Speicherzugriffsfehler, sodass der Aufruf vorzeitig abbricht.

Möchten Sie lieber die neueste Version einsetzen, installieren Sie die Software besser von Hand. Nach dem Herunterladen und Entpacken der Quellen [2] installieren Sie mit dem Paketmanager der Distribution die Abhängigkeiten, die zum Kompilieren von C++-Programmen erforderlich sind, also die Programme Cmake und Make sowie den Compiler GCC.

Im übergeordneten Ordner, in dem sich der Quelltext des Programms befindet, erstellen Sie ein Verzeichnis, das Sie etwa sigil-build/ nennen. Wichtig ist, dass sich die Sigil-Quellen sowie der entsprechende Ordner auf derselben Verzeichnisebene befinden. Auf der Konsole wechseln Sie anschließend in den Ordner sigil-build/ und kompilieren die Quellen mit den Befehlen aus Listing 1. Nach der Installation starten Sie mit dem Befehl sigil das Programm vom Terminal aus.

$ cd sigil-build/
$ cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE=Release ../Sigil-Quellen
$ make
# make install

Vorspann

Den Text des E-Books schreiben Sie in einem Editor Ihrer Wahl. Danach kopieren Sie ihn in die XHTML-Dateien hinein oder konvertieren ihn in dieses Format, falls Sie Ihr Werk in einem Markdown-Dialekt schreiben.

Haben Sie die Schreibarbeit erledigt, starten Sie Sigil und legen eine neue EPUB-Datei unter Datei | Neu an. Welches Format Sie dabei verwenden, hängt unter anderem davon ab, welche EPUB-Version der Online-Händler akzeptiert. Der Kasten “EPUB-Dateien” thematisiert die wichtigsten EPUB-Formate. Beim Bearbeiten einer bestehenden EPUB-Datei lesen Sie oben in der Titelliste von Sigil die Version der EPUB-Datei ab.

Im nächsten Schritt tragen Sie die Metadaten des E-Books ein. Diese Informationen bekommt der Leser des E-Books zuerst angezeigt. Zum Metadaten-Editor gelangen Sie durch Drücken der Taste [F8]. Der Editor erlaubt Ihnen die Tags individuell zu wählen, Sie müssen nicht jedes Feld mit Informationen füttern (Abbildung 1).

Abbildung 1: Im Metadaten-Editor legen Sie unter anderem das Datum der Veröffentlichung oder den Titel des E-Books fest.

Ebenso simpel gelingt das Einfügen eines Deckblatts. Dazu klicken Sie auf Werkzeuge | Cover hinzufügen und geben den Pfad zum Titelbild an (Abbildung 2). Sigil legt daraufhin die XHTML-Datei cover.xhtml an, die den Pfad zum Bild angibt, das zudem im Unterordner Images/ landet. Außerdem fügt Sigil bereits HTML-Code ein, sodass Sie nichts mehr daran zu ändern brauchen.

Abbildung 2: Für das Cover erzeugt Sigil eine XHTML-Datei. Darin definieren Sie dann zum Beispiel ein Titelbild.

Styling

Es gibt bereits fertige CSS-Stylesheets, die Sie in Sigil integrieren und anpassen können [3]. Unter Datei | Hinzufügen | Vorhandene Dateien binden Sie heruntergeladene Stylesheets in die EPUB-Datei ein. Sigil kopiert sie in den Unterordner Styles/.

Zusätzlich lässt sich das E-Book durch eine passende Schriftart verschönern. Dazu klicken Sie mit der rechten Maustaste auf den Ordner Fonts/ und wählen den Eintrag Vorhandene Dateien hinzufügen aus. Anschließend geben Sie den Pfad zur gewünschten Schriftart an. Den entsprechenden Font müssen Sie außerdem im Stylesheet definieren. Listing 2 demonstriert in den Zeilen 1 bis 9, wie Sie mehrere Schriftschnitte einer Familie hinzufügen.

@font-face {
  font-family: Baskerville;
  src: url(../Fonts/Baskerville-Italic.otf);
  font-style: italic;
}
@font-face {
  font-family: Baskerville;
  src: url(../Fonts/Baskerville-Regular.otf);
}
h1, h2, h3, h4, h5, h6 {
  font-family: Baskerville;
}

Darüber hinaus erlaubt das E-Book-Format, weitere Anpassungen am heruntergeladenen CSS-Stylesheet vorzunehmen, indem Sie die CSS-Style-Klassen durchgehen. Beispielsweise ändern Sie gezielt die Schriftart der einzelnen Überschriftenklassen (Listing 2, ab Zeile 10).

Zwar unterstützen viele E-Book-Reader keine Farbausgabe, dennoch lassen sich Elementen gezielt Farben zuweisen. Um dabei die größtmögliche Kompatibilität zu gewährleisten, sollten Sie vordefinierte HTML-Farben [4] verwenden (Listing 3, Zeile 2). Optional tragen Sie eine beliebige Farbe in Form eines Hex-Codes ein (Zeile 5). In diesem Fall müssen Sie allerdings damit rechnen, dass Geräte mit E-Paper-Bildschirm andere Farben verwenden, sofern sie überhaupt über ein farbiges Display verfügen.

h1, h2 {
  color: indianred;
}
h3, h4 {
  color: #FF7733;
}

XHTML-Dokumente

Grundsätzlich lässt sich der Inhalt eines E-Books in nur einer XHTML-Datei abspeichern. In der Praxis sollten Sie davon allerdings absehen: Die Leistung vieler E-Book-Reader bricht ein, sobald eine einzelne XHTML-Datei die Größe von 300 KByte überschreitet. Daher empfiehlt es sich, pro Unterkapitel eine XHTML-Datei anzulegen. Eine leere XHTML-Datei fügen Sie ein, indem Sie auf Datei | Hinzufügen | Leere HTML-Datei klicken.

Möchten Sie die CSS-Klassen aus Ihrem CSS-Stylesheet auf den Text anwenden, müssen Sie zunächst den Link zum Stylesheet einfügen. Der eigentliche Inhalt, wie die Kapitelüberschriften oder der Fließtext, steht im Body-Tag des leeren XHTML-Dokuments (Abbildung 3). Apropos Kapitelüberschriften: Diese sollten in einem <h1>– bis <h6>-Tag erscheinen, um später das Erstellen des Inhaltsverzeichnisses zu vereinfachen.

Abbildung 3: Beim Einfügen eines leeren XHTML-Dokuments müssen Sie lediglich das Body-Tag ändern.

Die eingefügten XHTML-Dokumente vermerkt Sigil außerdem in der Datei content.opf, die Sie nicht von Hand verändern sollten. Sofern Sie ein XHTML-Dokument nicht mehr brauchen, klicken Sie mit der rechten Maustaste links im Buch-Browser auf die entsprechende Datei und wählen den Eintrag Löschen aus. Sigil entfernt dann automatisch sämtliche Einträge aus der Content-Datei.

Verzeichnisse jeglicher Art

Obwohl HTML direkt Tabellen unterstützt, empfiehlt es sich heutzutage, auf DIV-Tags zurückzugreifen. So wird jede Zeile durch einen DIV-Container erzeugt, wobei eingenistete DIV-Elemente dann wiederum Spalten definieren. Abbildung 4 demonstriert die Darstellung von Zeilen, bei denen die Spalten direkt nebeneinander erscheinen. Für dieses Layout definiert man zunächst die Breite der Spaltenüberschrift mittels der Klasse .thirty (Listing 4).

Abbildung 4: Beim Erstellen von Tabellen sollten Sie nicht zur Tabellen-Funktion von HTML greifen, sondern DIV-Tags nutzen.

.thirty {width: 30%;}
.flowLeft {
  float: left;
}
.column-same-height {
  margin: 20px;
  padding-bottom: 100%;
  margin-bottom: -100%;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
}
.odd {
  background-color: #5ccd95;
  line-height: 140%;
}
.panelHeader {
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  font-family: Roboto;
  word-wrap: break-word;
}
.container {
  overflow: hidden;
  padding: 5px;
}

Die Formatierung der Spaltenüberschrift erfolgt durch die CSS-Klasse .panelHeader. Da der Inhalt der einzelnen Spalten unterschiedlich lang ausfällt, gleicht die CSS-Klasse .column-same-height diesen Umstand aus, indem die Spalten einer Zeile dieselbe Höhe erhalten. Nicht nur die Größe und Ausrichtung der Tabelle lässt sich über CSS umsetzen, auch die Farbe kann man über entsprechende Tags anpassen (siehe CSS-Klasse .odd).

Für den Fließtext, der in unserem Beispiel in der zweiten Spalte steht, kommen zum Teil dieselben CSS-Klassen zum Einsatz wie in der Spalte mit der Überschrift. Allerdings unterscheidet sich die zweite Spalte in der Breite sowie der Anordnung des Texts (Listing 5). Die Spalten einer Zeile können auch untereinander erscheinen. Bei diesem Layout gehen Sie wie in den zuvor erwähnten Listings vor, mit einer Ausnahme: Beide Spalten erhalten dieselbe Spaltenbreite (siehe CSS-Klasse .nine).

.nine {width: 90%;}
.flow-opposite {
  float: right;
}
.panelText {
  text-align: left;
  font-family: Roboto;
  word-wrap: break-word;
  vertical-align: middle;
  font-size: 1.2em;
}

E-Books besitzen gegenüber Print-Medien den Vorteil, dass die Bilder in einer höheren Qualität vorliegen als bei der gedruckten Variante. Enthält das E-Book mehrere Bilder, übertragen Sie zunächst alle in den Unterordner Images/, indem Sie durch einen Rechtsklick auf Images den Eintrag Vorhandene Dateien hinzufügen auswählen.

Sowohl das Bild als auch die dazugehörige Beschreibung definieren Sie dann innerhalb eines DIV-Containers. Zum Regeln der Spaltenbreite verwenden Sie auch hier die CSS-Klasse .nine. Die Klasse .figure beschreibt dann die Anzeige des Bilds im E-Book (Listing 6). Zusätzlich verwenden Sie das IMG-Tag, um den Pfad zum Bild sowie die Bildbeschreibung anzugeben. In diesem Beispiel erfolgt die Formatierung der Bildbeschreibung durch die CSS-Klasse .figcaption.

.figure {
  display: block;
  margin: 0;
  padding: 9px;
  text-align: center;
}
.figure img {
  border: 1px solid #d6d6d6;
}
.figcaption {
  margin: 0;
  widows: 2;
  orphans: 2;
  color: #352e2f;
  font-family: Baskerville;
  font-style: italic;
  font-size: 80%;
}

Interaktion

Ähnlich wie Webseiten unterstützt auch das E-Book-Format ein Verknüpfen von Inhalten über eingebettete Links. Durch ein entsprechendes CSS-Styling verändern Links im Text das Aussehen, sobald der Anwender mit dem Mauszeiger oder dem Finger auf die Verknüpfung fährt. Das Quellenverzeichnis in Abbildung 5 wird mittels DIV-Containern realisiert und ähnelt daher dem vorherigen Beispiel.

Abbildung 5: Links lassen das E-Book interaktiver wirken. Wie beim Browser ändert sich die Farbe, sobald der Leser den Link ansteuert.

Allerdings kommen im Quellenverzeichnis Links zu externen Webseiten vor. Solche Links lassen sich in HTML mittels des A-Tags umsetzen. In Beispiel aus Listing 7 befindet sich das A-Tag innerhalb eines SPAN-Tags; alternativ betten Sie es in ein DIV- oder P-Element ein. Das Verhalten des Links in Listing 8 wird durch die CSS-Klasse .sourceLink sowie durch a:hover geregelt.

<span class="sourceLink"><a href="http://em%20class="replaceable">URL">Anzeigename</a></span>

span.sourceLink a {
  color: #352e2f;
}
div a:hover {
  color: #df5f1d;
}

Querverweise innerhalb des E-Books lassen sich ganz ähnlich realisieren wie Links zu externen Webseiten. Sie versehen das Kapitel dazu in der dazugehörigen XHTML-Datei mit einer ID, und zwar an der Stelle, die zuerst eingeblendet wird, sobald der Leser auf den Link klickt oder tippt. In diesem Beispiel trifft das auf die Kapitelüberschrift zu:

<h1 id="ID-Verweis">Kapitelüberschrift</h1>

Auf der Seite, wo der Querverweis steht, geben Sie den Link zur ID an (Listing 9). Das Ergebnis sieht dann wie in Abbildung 6 aus. Das Styling des internen Links entnehmen Sie Listing 10.

<span class="b backgroundLink"><a href="http://em%20class="replaceable">Datei.xhtml#ID-Verweis">Anzeigenname</a></span>

Abbildung 6: Querverweise innerhalb des E-Books, also interne Links, werden ähnlich wie externe Links implementiert.

span.backgroundLink a {
  color: whitesmoke;
  text-decoration: none;
}
div span.backgroundLink a:hover {
  color: #df5f1d;
}

Abspann

An das Inhaltsverzeichnis machen Sie sich erst, sobald Sie den Text im Kasten haben. Dabei übernimmt Sigil die Kapitelüberschriften, die Sie in den üblichen Überschriften-Tags wie <h1>, h2 und so weiter eintragen. Damit das Programm das Inhaltsverzeichnis baut, klicken Sie auf Werkzeuge | Inhaltsverzeichnis | Inhaltsverzeichnis erstellen. Dort wählen Sie anschließend die gewünschten Kapitelebenen aus (Abbildung 7).

Abbildung 7: Sigil enthält einen Assistenten zum Erstellen von Inhaltsverzeichnissen mit anklickbaren Querverweisen.

Online-Händler akzeptieren E-Books nur, wenn sie keine Fehler aufweisen. Für eine entsprechende Prüfung stellt Sigil das von der Community gepflegte Plugin EpubCheck [5] zur Verfügung. Es lässt sich über Plugins | Plugins verwalten und einem Klick auf Plugin hinzufügen in Sigil einbinden (Abbildung 8). Das Überprüfen der EPUB-Datei stoßen Sie dann durch einen Klick auf Plugins | Überprüfung | EpubCheck an. Das Ergebnis blendet Sigil dann am unteren Fensterrand ein (Abbildung 9).

Abbildung 8: Der Funktionsumfang von Sigil lässt sich mithilfe von Plugins erweitern. Die Community pflegt dabei eine reiche Auswahl.

Abbildung 9: Das Plugin EpubCheck überprüft die EPUB-Datei auf typische Fehler, die auch den Prüfroutinen gängiger Online-Händler auffallen.

Fazit

Mit Sigil lässt sich ein komplettes E-Book erstellen. Ansehnliche Ergebnisse setzen jedoch zumindest grundlegende HTML- und CSS-Kenntnisse voraus. Nichtsdestoweniger kann sich das Ergebnis sehen lassen. Sigil punktet zudem in Sachen Nachbesserung: Selbst wenn die Konvertierung eines Textdokuments ins EPUB-Format glatt über die Bühne geht, entstehen dabei oft noch jede Menge überflüssiger HTML-Tags. Die entfernt Sigil zuverlässig und mit geringem Aufwand. (cla)