Nach unseren vorherigen beiden Teilen, die sich mit den Unterschieden zwischen einem Printbuch und einem eBook sowie mit den besonderen Layoutanforderungen an ein eBook beschäftigt haben, wird es heute spannend, denn wir steigen endlich in den technischen Aufbau eines eBooks ein.
Eine Epub-Datei ist im Grunde nichts anderes als eine Zip-Datei. Benennt man die Dateiendung *.epub in *.zip um, kann man sie per Doppelklick öffnen und den Inhalt begutachten.
Im Archiv befinden sich zwei Ordner. Der erste Ordner „META-INF“ enthält meist nur eine Datei namens „container.xml“. In dieser Datei ist der genau Pfad vermerkt, unter demdie „Inventarliste“ des eBooks zu finden ist, also eine Datei, die sämtliche Einzeldateien des Epubs auflistet. Dabei handelt es sich um die Datei „content.opf“, und diese liegt im „OPS“-Ordner („Open Publication Structure“), genau wie alle anderen Inhalte des eBooks wie Texte, Layoutvorgaben und Bilder.
Die Inhalte eines Epubs im Einzelnen
In der content.opf-Datei werden alle Dateien aufgeführt, die im eBook enthalten sind. In der Regel sind das
- alle Bilder als JPG oder PNG (meist liegen diese in einem Unterordner „images“)
- das interaktive Inhaltsverzeichnis, das sich jederzeit im eBook über das Hauptmenü einblenden lässt, mit dem Namen „toc.ncx“ („Table of Contents“, dt. „Inhaltsverzeichnis“)
- der eigentliche Manuskripttext als HTML-oder XML-Dateien, wobei sich meist in je einer Datei jeweils ein Kapitel befindet
- eine eigene HTML- oder XML-Datei, die die Titelseite mit dem Cover enthält und oft als „cover.html“ oder „coverpage.html“ bezeichnetwird
- die Formatierungsrichtlinien (wie groß sind Fließtext und Überschriften im Verhältnis zueinander? Welchen Zeilenabstand nutzt das Buch standardmäßig? etc.) als ein sogenanntes „Stylesheet“, meist mit dem Namen „style.css“ oder „layout.css“
Für uns interessant sind die HTML- und XML-Dateien sowie das Stylesheet. HTML steht für „Hypertext Markup Language“, XML für für „Extensible Markup Language“. Beide Sprachen sind in ihrer Funktionsweise fast identisch. HTML wurde ursprünglich für das Web entwickelt und beschreibt, wie Inhalte aussehen sollen (z.B. fetter oder kursiver Text). XML beschreibt weniger das Aussehen von Elementen, als deren Typ (ist der Text eine Überschrift, ein normaler Fließtext oder eine Seitenzahl?) und erlaubt das Anlegen neuer eigener Befehl („Tags“), wohingegen man bei HTML auf bereits existierende Befehle zurückgreifen muss. Eine Mischform aus beiden Sprachen existiert mit XHTML ebenfalls und kann durchaus in einem eBook vorkommen. In diesem Fall hat eine Datei die Endung *.xhtml. Bei allen drei Sprachen handelt es sich umBeschreibungssprachen, da sie entweder die Art des Inhalts oder dessen Aussehen beschreiben. Im Gegensatz zu echtenProgrammiersprachen wird hier keine Interaktivität durch Berechnungen erzeugt.
Grundkurs HTML
In diesem Blogartikel konzentrieren wir uns beispielhaft auf HTML, die Erklärungen können aber analog auch auf XML und XHTML übertragen werden.
Befehle in HTML werden „Tags“ genannt und in spitze Klammern <> gesetzt. Nach einem Tag kommt der Inhalt, auf den sich das Tag bezieht, und nach dem Inhalt wird das Tag mit einem / wieder beendet.
Eine HTML-Datei beginnt immer mit dem Befehl <html>. Danach folgt der sogenannte <head>-Teil. Dieser enthält Metadaten (z.B. Suchwörter für Suchmaschinen oder den Titel), die auf der Web- oder eBook-Seite selbst nicht sichtbar sind. Nach dem <head>-Teil folgt der <body>-Abschnitt. Hier werden sämtliche Inhalte eingefügt, die der Leser sehen oder hören kann, d.h. im Falle eines eBooks vor allen Dingen Text und Bilder. Die Grundstruktur einer HTML-Seite sieht also wie folgt aus:
<html> <head></head> <body></body> </html>
Die obigen Befehle teilendas Dokument also inverschiedene Bereiche auf. HTML kann aber auch dazu verwendet werden, das Aussehen von Elementen zu beschreiben. Hier ein Beispiel:
<b>Dieser Text ist fett, weil er innerhalb des Befehls <b></b> für "bold" (fett) steht.</b> Dieser Text ist nicht mehr fett, da er außerhalb der Tags <b></b> steht.
Stehen mehrere Befehle ineinander und sind verschachtelt, werden deren Effekte aufsummiert und die Tags werden spiegelverkehrt wieder geschlossen.
<b><i>Dieser Text ist fett und kursiv.</i></b>
An diesem Beispiel lässt sich erkennen, dass der Einsatz mehrerer Textformatierungen schnell in sehr vielen Befehlen ausartet, die man immer und immer wieder eingeben muss, wenn ein weiterer Textabschnitt entsprechend formatiert werden soll. Das ist sehr zeitaufwändig und nicht besonders praktisch. Deshalb ist es inzwischen üblich, mit HTML bzw. XML den Text lediglich zu strukturieren (also in einzelne Abschnitte aufzuteilen) und das Layout in einer separaten Datei festzulegen. Hier handelt es sich um das zuvor erwähnte Stylesheet, das die Layoutangaben in der BeschreibungsspracheCascading Style Sheets (CSS) enthält.
Grundkurs CSS
CSS lässt sich am Ehesten als „Kaskadierende Formatvorlagen“ übersetzen. Kaskadierend bedeutet, dass die Layouteigenschaften wie in einem hierarchischen Stammbaum bzw. Diagramm weitervererbt werden. Mit CSS ist es möglich, Tags in HTML oder XML zusätzliche Funktionen zuzuweisen wie Abstände, Fettung oder Kursivierung, Farben, Schriftarten uvm. oder vorhandene Funktionen zu überschreiben.
Üblicher Weise verwendet man dazu das Tag <div>, das für sich genommen erst einmal keinerlei Effekt in einem HTML-Dokument hat, und das erst durch CSS plötzlich eine Wirkung bekommt. Selbstverständlich funktioniert das Prinzip auch mit jedem anderen HTML-Tag, z.B. mitden oben erwähnten <b> und <i>. Zu Beginn des Dokuments (meist im <head>-Teil) wird die CSS-Datei in das HTML-Dokument eingebunden, damit der E-Reader (bzw. Browser bei einer Website) sofort weiß, dass er sich sämtliche Formatierungsinformationen aus einer separaten Datei holen muss. Der Befehl dazu in der HTML-Datei lautet
<link rel="stylesheet" href="stylesheet.css">,
wobei „stylesheet.css“ der Name der CSS-Datei ist.
Im CSS-Dokument muss man keine Struktur beachten, man kann sofort mit dem ersten Befehl loslegen. Dazu wird zunächst ein Punkt vor den Namen des HTML-Tags gesetzt, dem neue Eigenschaften zugewiesen werden. Diese Eigenschaften werden in geschweifte Klammern {} gesetzt. Jede Eigenschaft wird dabei mit einem Semikolon ; beendet. Sehen wir uns ein Beispiel an.
.div { color: red; font-style: bold;}In diesem Beispiel haben wir dem vormals effektlosen <div>-Tag die Eigenschaften zugewiesen, dass es fortan Elemente fett (font-style: bold;) und rot (color: red;) darstellt. Setzen wir also einen Text in unserer Manuskriptdatei zwischen zwei <div></div>-Tags, wird dieser fett und rot angezeigt. Der Vorteil dieser Trennung von Layout (CSS-Datei) und Manuskripttext (HTML-Datei) besteht darin, dass man lediglich eine Änderung in der CSS-Datei vornehmen muss und sich sofort die Formatierung des gesamten Manuskripttexts ändert. Würde man den Text stattdessen direkt im HTML-Dokument mit obigen Befehlen wie <b> auszeichnen, müsste man all diese Befehle zu hunderten von Hand ändern. Das Arbeiten mit CSS ist also mit dem Arbeiten mit Formatvorlagen in Textverarbeitungsprogrammen wie Word vergleichbar.
Was benötige ich, um HTML- und CSS-Dateien selbst schreiben zu können?
HTML-, XHTML-, XML- und CSS-Dateien sind reine Textdateien. Mit dem mitgelieferten Editor von Windows (Start – Zubehör – Editor) können all diese Dateitypen ganz leicht geschrieben werden. Die abgespeicherte *.txt-Datei muss anschließend lediglich in *.html, *.xhtml, *.xml oder *.css umbenannt werden.
Da der Editor allerdings insbesondere bei Zeilenumbrüchen nicht sehr komfortabel ist, empfiehlt es sich, einen kostenlosen Code Editor wie beispielsweise Notepad++ zu verwenden.
Sigil ist zudem ein überaus nützliches Tool, mit dem Epub-Dateien direkt geöffnet und alle Einzelinhalte bearbeitet werden können, sowohl in Codeansicht, als auch in einer grafischen WYSIWYG-Benutzeroberfläche („What you see is what you get“, d.h. so, wie man das Dokument grafisch bearbeitet, so sieht es später auch beim Leser aus).
Wo kann ich mich eingehender mit HTML und CSS beschäftigen? Brauche ich dieses Wissen als Autor wirklich?
Es ist von Vorteil, auch als Autor die Grundgedanken und grundlegenden Funktionsweisen hinter HTML und CSS zu verstehen, denn so können eventuelle Probleme bei der eBook-Konvertierung mit wenigen Handgriffen selbst gelöst werden, ohne dass man externe Hilfe in Anspruch nehmen muss. Gerade bei der Umsetzung komplexer Layouts mit vielen Elementen sollte man verstehen, was technisch möglich ist und was nicht.
Die beste deutsche Seite zum Thema HTML und CSS ist SelfHTML. Auf der offiziellen Seite des W3-Konsortiums, das für die Weiterentwicklung von HTML und CSS verantwortlich ist, finden Sie eine Befehlsreferenz und zahlreiche Tutorials. Informationen speziell zum Aufbau eines Epubs gibt es zudem bei data2type sowiePagina, die auch den Epub-Checker zum Download bereitstellen, der Epubs auf fehlerfreien Code überprüft. Nur dann kann ein eBook auch erfolgreich bei uns hochgeladen werden.
Im vierten Teil der eBook Basics besprechen wir mit unserem neu erworbenen Hintergrundwissen Tipps und Tricks rund um die Nutzung unserer Konvertierungssoftware, die Word-Dokumente beim Upload in ein fertiges Epub umwandelt.
- Über
- Letzte Artikel
Daniel Seebacher
Daniel Seebacher ist gelernter Buchhändler und studierter Buchwissenschaftler. Bei tolino media kümmert er sich als Senior Plattform Manager um sämtliche Support-, Abrechnungs- und Technikthemen sowie um die Weiterentwicklung der Plattform mit Fehlerbehebungen und neuen Features. Privat liebt er es, Musik zu machen und mit Photoshop und verschiedenen 3D-Programmen virtuelle Welten zu kreieren.
Letzte Artikel von Daniel Seebacher (Alle anzeigen)
- Die perfekte Formatierung: Tipps für den Upload - 29. Januar 2020
- Neue Vertriebskanäle: DNB, Skoobe und Onleihe - 8. Oktober 2019
- Kommunikation ist alles – Rückblick zum Self-Publishing-Day 2018 - 30. Mai 2018
