Welcher eBook-Produktioner kennt die Situation nicht? Man hat sich ausführlich Gedanken über sein EPUB-Layout gemacht, strukturiertes HTML erstellt, ein sauberes CSS nach allen Regeln der Kunst erstellt – aber der eBook-Reader stellt die Inhalte einfach nicht so dar, wie man das gerne hätte. Neben echten Fehlern in den EPUB-Render-Engines kann ein Grund dafür sein, dass man sich gerade an einem Default-Stylesheet eines Readers abmüht. Eine Einführung für Produktioner, die gerne wissen möchten, gegen was sie da eigentlich arbeiten:
Default Stylesheet: das unbekannte Wesen
Natürlich gibt es auch heute noch haufenweise echte Fehler und Bugs in der CSS-Interpretation der gängigen EPUB-Reader, die jedem Produktioner die Haare zu Berge stehen lassen. Aber viel öfter arbeitet sich in der Praxis an den im Reader hinterlegten Default-Stylesheets ab. Neben dem Problem, dass in den eBook-Readern auch die Leser alle möglichen Parameter verstellen können, die Einfluss auf das Layout haben, werden die Einstellungen aus dem eigenen CSS gerne auch vom Reader selbst überschrieben.
Mit dem Default Stylesheet, einer Methode aus den frühesten Zeiten der Web-Browser-Entwicklung, wird zunächst schlicht das Problem gelöst, dass auch HTML-Dateien ohne jedes integrierte CSS irgendwie dargestellt werden müssen. Jeder Browser hat deswegen ein eigenes, versteckt hinterlegtes CSS, das immer dann verwendet wird, wenn der Browser gar keine andere Layout-Deklaration für ein HTML-Element findet.
Im Web-Bereich ist die Situation hier heutzutage schon einigermaßen komfortabel, denn a) beschränken sich die Browser-Hersteller in der Regel wirklich auf eine Art sinnvolles Minimal-Layout (sorgen z.B. dafür, dass Listen auch wirklich als Liste dargestellt werden und nicht als Fliesstext) und b) liegen die Default-Stylesheets zwar nicht vollkommen offen für jeden Nutzer, können aber jederzeit von Entwicklern eingesehen werden (mit einer Google-Suche nach „[Browsername] default stylesheet“ findet man hier recht schnell, was man wissen will).
Bei den EPUB-Readern ist die Situation noch einigermaßen unübersichtlich und das aus diversen Gründen:
- Die meisten eBook-Hersteller sind sich der Tatsache nicht oder nur ungenügend bewusst, dass der Mechanismus der Default Stylesheets verwendet wird.
- Die Default Stylesheets der EPUB-Reader liegen in der Regel nicht offen oder sind aus zugänglichen Quellen einsehbar.
- Die Einstellungen aus dem eigenen CSS und dem Default Stylesheet werden nach nicht immer nachvollziehbaren Regeln von den Nutzereinstellungen im Reader überschrieben.
- Die Reader-Hersteller beschränken sich eben nicht nur auf Basis-Formatierungen, sondern versuchen auch, Unschönheiten im EPUB gerade zu ziehen, verschlimmbessern das Ergebnis dadurch erst recht.
Jedem eBook-Produktioner sollte also zumindest klar sein, dass nicht nur sein eigenes Design wirkt, wenn ein EPUB im Reader gerendert wird, sondern immer eine Kaskade von Überschreibungen durch den EPUB-Reader ausgeführt wird:
In der Regel wird für die Überschreibung eine Mischung aus Techniken verwendet: Oft importiert das Default-Stylesheet das Verlags-Stylesheet zur Laufzeit über den @import-Mechanismus von CSS, dazu sind die zentralen Deklarationen im Default-CSS in der Regel mit „!important“ gekennzeichnet, damit der Browser sie auch sicher verwendet. Die Nutzer-Einstellungen werden in der Regel durch Programmcode des EPUB-Readers in die Darstellung integriert.
Mehr Transparenz, bitte!
Um in dieser unschönen Situation – man arbeitet letztlich immer „gegen ein CSS“, ohne dieses aber einsehen zu können – zumindest etwas Abhilfe zu schaffen, hat der französische eBook-Entwickler Jiminy Panoz aktuell ein GitHub-Repository aufgesetzt, in der das verfügbare Material gesammelt wird: Unter dem schönen Titel „Will that be overriden“ sind hier in zwei Sektionen – Lesesysteme und Produktionstools – alle CSS-Files und hinterlegten Default-Formate gesammelt, die aus irgendwelchen Quellen recherchiert werden konnten.
Grundsätzlich macht dies das Problem in einer Produktionssituation natürlich nur bedingt besser, denn am Überschreiben an sich kann man dadurch auch nichts ändern. Aber man bekommt beim Durchsehen zumindest ein gutes Gefühl dafür, was das jeweilige Lesesystem so versucht und bei welchen Formatierungen alle CSS-Deklarationen vergeblich sind. Das Repository deckt bereits fast alle gängigen eBook-Ökosysteme (mit Ausnahme von Tolino) ab: Wer also immer schon einmal wissen wollte, warum Kobo fast überall mehr Abstände in die Inhalte generiert als die anderen Reader, oder wie Apple in iBooks Linkfarben überschreibt, wird hier nach mehr oder weniger Recherche meist irgendwo fündig.
Was kann man tun?
Die Einflussmöglichkeiten gegen das, was die Reader im Layout eigenmächtig ändern, sind zugegeben nicht besonders viele. Aber einige Maßnahmen können dennoch helfen:
Immer eine gute Idee sind die aus der Web-Entwicklung gewohnten CSS Resets. Mit dieser Technik werden am Anfang eines CSS die wesentlichen Eigenschaften aller HTML-Elemente auf (dann bekannte) Einstellungen gesetzt und später wieder bewusst überschrieben. Ein Beispiel für ein CSS Reset für die Eigenschaften margin/padding wäre beispielsweise:
body, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li {margin: 0;padding: 0;}
Für eine gute Einführung in CSS Resets kann ich beispielsweise den Artikel „Tipps und Tricks zum CSS Reset“ von Elmastudio empfehlen.
Eine andere gute Idee ist es beispielsweise, soweit wie möglich sehr spezifische CSS-Deklarationen für die gewünschten Elemente zu verwenden, d.h. möglichst bei allen Elementen mit mindestens einer CSS-Formatklasse zu arbeiten und dann die CSS-Eigenschaften auf element.klasse zu setzen. Oft hilft das zumindest für spezielle Formatierungskontexte. Eine gute Übersicht über die CSS-Regeln für spezifische Deklarationen findet sich in diesem Artikel des Smashing Magazine.
Ein großes Problem beim EPUB-Debuggen ist auch, dass die allermeisten EPUB-Reader im Gegensatz zu modernen Browsern keine Web-Inspector-Tools kennen, mit denen man zur Laufzeit Layouts beobachten, analysieren und oft auch verändern kann. Eine rühmliche Ausnahme an dieser Stelle ist iBooks von Apple, das zumindest in seiner Desktop-Variante den Web-Inspector von Safari an Bord hat. Das Tool muss aktiv über die Optionen angeschaltet werden, dass Verfahren dazu ist hier bei epubsecrets.com beschrieben – ist dies erledigt, hat man ein wirklich schönes Analyse-Werkzeug für sein CSS im Haus.
Wo geht die Reise hin?
Wie so oft, wenn man von großen Herstellern abhängig ist, kann man für die Zukunft fast nur hoffen, dass die Entwickler und Strategen ein Einsehen haben.
Relativ übel sieht die Situation im Amazon-Ökosystem aus: Ebenfalls im oben genannten GitHub-Repository findet sich ein lesenswerter Text von Jiminy Panoz, der versucht hat, die Technologien rund um das neue Amazon KFX-Format einem Reverse Engineering zu unterziehen. Sein Fazit im großen und ganzen:
TL;DR: we’re screwed.
An anderen Stellen wird die Situation aber tatsächlich besser: Mit dem Update zu iOS 9.3 hat Apple z.B. die unselige Überschreibung von Link-Farben/Link-Styles durch iBooks wieder zurückgebaut. Die berühmt-berüchtigten Absatzabstände und line-height-Überschreibungen der Kobo-Engine sind tatsächlich nach Jahren des Ärgers in einem der letzten Firmware-Updates verschwunden. Und aus aktuellen Projekten kann ich insgesamt die Beobachtung weitergeben, dass die Qualität der EPUB-Engines gerade in den letzten 1-2 Jahren massiv besser geworden ist – das gilt vor allem für die mittlerweile fast überall integrierten Render-Engines für EPUB3.
Eine weitere, wünschenswerte Maßnahme wäre es, wenn die Reader-Hersteller transparenter mit diesem Thema umgehen und ihre Default-Stylesheets selber offenlegen würden, parallel mit technischen Dokumentationen, die in der Produktion dringend gebraucht werden. Auch interessant ist die Tatsache, dass aktuell beim IDPF die Diskussion geführt wird, für die nächste EPUB-Version ein Default-CSS für die Implementierung vorzugeben – im Web-Bereich ist damals etwas ähnliches passiert, was die Situation dort merklich verbessert hat.
Und ansonsten – hilft wahrscheinlich nur die Erinnerung daran, dass es die Web-Entwickler in den letzten 10 Jahren auch nicht immer leicht hatten:
Kindle is the IE6 of the modern era
— Micah (@micahsb) 16. März 2016
Sie wollen mehr wissen?
In der Serie EPUB-Praxis sind bisher folgende Artikel erschienen: