The Greatest CSS Tricks Vol. I eBook (PDF und EPUB)

Als ich das „Buch“ The Greatest CSS Tricks Vol. I schrieb, setzte ich „Buch“ in Anführungszeichen, weil es nichts wirklich buchähnliches daran gab. Die einzige Möglichkeit, es zu lesen, war online, auf dieser Website angemeldet, mit einer MVP-Supporter-Mitgliedschaft (nicht mehr erforderlich). Keine gedruckte Version, nicht einmal digitale Kopien, wie man sie von einem digitalen Buch erwarten würde.

Das habe ich jetzt geändert und biete PDF- und EPUB-Versionen des Buches an. Sie sind kostenlose Downloads für Mitglieder – legen Sie sie einfach in Ihren Warenkorb und schließen Sie den Kauf ab.

All dieses Buchschreibzeug war und ist ein Experiment. Ich schreibe gerne auf dieser Website in einem Blogbeitrags-ähnlichen Format, bei dem alle Inhalte unter URLs abrufbar sind und interaktive Inhalte haben können. Da es digital ist, kann ich den Zugriff usw. steuern. Das bedeutet, ich kann so schreiben, wie es für mich angenehm ist, und vielleicht, nur vielleicht, kann ich dadurch produktiver sein. Vielleicht kann ich einen Vol. II fertigstellen, für den ich bereits jede Menge Ideen habe. Vielleicht kann ich einige andere Bücher schreiben, über die ich nachgedacht habe. Jetzt habe ich ein System! Einen Ort zum Schreiben, mehrere Orte zur Veröffentlichung und eine Möglichkeit, es zu verkaufen.

Erstellung der digitalen Versionen

Als ich ursprünglich die Entscheidung traf, das Buch online zu schreiben, dachte ich, PDF wäre unglaublich einfach. Ich würde den Inhalt auf eine „rohe“ Vorlage ausgeben (nur als sauberen Ausgangspunkt, der Bestand hat und leicht zu sehen ist), schönes, druckähnliches CSS anwenden und dann buchstäblich einfach ⌘P (Drucken) drücken und „Als PDF speichern“. Fertig.

Das funktioniert tatsächlich ganz gut. Man kann mit den Einstellungen herumspielen (z.B. „✔ Hintergrundgrafiken drucken“, um bei Codeblöcken weißen Text auf dunklem Hintergrund zu haben) und es ziemlich nett machen. Aber es gibt Probleme – zum Beispiel kann man Kopf- oder Fußzeilen jeder Seite nicht sehr gut steuern. Ganz zu schweigen davon, dass es nicht programmatisch ist, sondern ein sehr manueller Prozess.

Dinge programmatisch zu tun, war mein Ziel. Dann stieß ich auf diesen Blogbeitrag von Baldur Bjarnason, in dem er nach Arbeit suchte

• Müssen Sie eine oder mehrere Websites erstellen, die sich wie ein Buch verhalten, wie ein Buch sprechen und sich wie ein Buch lesen, aber alles, was Sie erstellen, sieht aus wie ein Blog?

• Haben Sie Schwierigkeiten, mit Dateiformaten wie PDF, DOCX oder EPUB mit Webtechnologien umzugehen?

• Versuchen Sie, PDFs oder E-Books von Ihrer Website oder Ihrem CMS zu erstellen?

Ja, *ja*, ***ja***!

Programmatische Erstellung eines eBooks

Ich habe Baldur kontaktiert und er konnte mir bei all dem helfen. Er hat ein automatisiertes System für mich erstellt, das eine lokale .html-Datei akzeptiert und automatisch PDF-, EPUB- und MOBI-Formate aus dieser einen Datei erstellt. Im Grunde kann ich make auf der Kommandozeile ausführen und es erledigt die ganze Arbeit, indem es Open-Source-Tools nutzt.

Ich brauchte aber trotzdem nahezu perfektes HTML, das für die Maschine bereit war, was einige Arbeit erforderte. Glücklicherweise war ich bereits einigermaßen bereit, dies zu produzieren, da ich eine spezielle URL habe, die den Rohinhalt ausgibt (diese können Sie immer noch sehen, wenn Sie kein Mitglied sind, nur mit gekürztem Inhalt) mit den leichten Druckstilen, die ich wollte.

Die Werkzeuge

Mit dem rohen HTML und einem programmatischen Ansatz in der Hand, hier sind die Werkzeuge, aus denen der Stack besteht

• Für die PDF-Erstellung haben wir sowohl Paged.js als auch WeasyPrint ausprobiert. Sie hatten beide ihre Eigenheiten und machten Dinge schlechter/besser als die anderen. Letztendlich haben wir uns für Paged.js entschieden.
• Für die EPUB-Erstellung haben wir pandoc verwendet.
• Für die MOBI-Erstellung (auf die wir uns überhaupt nicht konzentriert haben) haben wir Calibre verwendet. Es ist eine native Mac-App, aber sie hat ein ebook-convert-Tool, das versteckt ist und von der Kommandozeile aufgerufen werden kann.

Um zu dem Punkt zu gelangen, an dem wir diese Werkzeuge über die Kommandozeile verwenden konnten, mussten all sorts von anderer Software installiert und einsatzbereit sein, wie Python, pango, libffi und mehr. Baldurs Skript machte die Verwaltung davon einfach, was großartig war.

Es sieht so aus, als gäbe es einen neuen Player namens Percollate für diese Dinge, aber wir haben das nicht erkundet.

Ein öffentliches Repository, das all diese Tools für die HTML-zu-eBook-Erstellung kombiniert

Nachdem wir diesen Prozess gemeinsam durchlaufen hatten, erstellte Baldur großzügigerweise ein quelloffenes, gestrafftes öffentliches Repository (book-tricks) für Ihre Referenz. Es gibt viel nützliche Magie in diesem Makefile, bei dem ich schockiert wäre, wenn es nicht nützlich für jemanden in der gleichen Situation wäre, in der ich war: der Notwendigkeit, eBooks aus einfachem HTML zu erstellen.

Vorschau von Builds

PDFs sind natürlich einfach anzusehen (man kann sogar einfach einen Webbrowser verwenden), aber ich öffnete sie normalerweise in Preview.app.

EPUB ist auf einem Mac ebenfalls einfach, da man es einfach in Books.app öffnen kann, um es anzusehen.

Für MOBI ist die Hauptfunktion von Calibre, diese anzuzeigen, also ist das der Trick dabei.

Der schmerzhafteste Teil ist die Feedback-Schleife. Es gibt einen ganzen Prozess des Aktualisierens von Code (hauptsächlich CSS) und dann des Ausführens des gesamten Builds, um zu sehen, wie alles aussieht. Ich bin sicher, ich habe es 100 Mal oder öfter gemacht, um die Dinge richtig zu machen. Dafür sollte es wirklich eine bessere Lösung geben, mit Live-Vorschauen.

Web-exklusive vs. eBook-exklusive Inhalte

Früh im Buchschreibprozess hatte ich sowohl Papier- als auch digitale Versionen aufgegeben. Ich hörte auf, mich so sehr auf Bilder im Text zu verlassen, und begann, eingebettete CodePen-Demos zu verwenden, um Ausgaben und Code zu zeigen. Das ist sowieso die ideale Erfahrung für das Web. Aber ich kann keine eingebetteten Pens in eBooks verwenden. eBooks können einige interaktive Dinge tun (z.B. EPUB unterstützt animierte GIFs und Links, natürlich), aber JavaScript auszuführen und <iframe>s zu verwenden, sind Dinge, auf die ich mich nicht verlassen wollte nicht verlassen wollte. Wenn ich für alles richtige Bilder hätte, dann wäre es *vielleicht* eines Tages auch eher für Papier bereit.

Es ist einfach genug, Dinge mit display: none vor der eBook-Ausgabe zu verstecken, also habe ich das für alle eingebetteten Pens gemacht. (Sie sind ein bisschen HTML, bevor sie in das iframe umgewandelt werden.) Dann habe ich für „alternative“ Inhalte, die nur für die eBook-Version bestimmt sind, diese im Grunde nur in <div class="print-only"> eingewickelt, was online versteckt und in den Druckstilen angezeigt wird. Ich habe benutzerdefinierte Blöcke im WordPress-Blockeditor erstellt, um die Erstellung dieser Blöcke zu erleichtern. So konnte ich wirklich sehen, was ich tat.

Ein interessanter Punkt ist, dass ich, da ich hier auf eBook-exklusive Inhalte abzielte, nicht die Art von CSS-Tricksen anwenden musste, die ich von Druckstilen gewohnt bin, bei denen die Ausgabe wahrscheinlich auf Papier erfolgt. Zum Beispiel würde ich in einem Druckstil normalerweise tun

main a[href]::after {
  content: " (" attr(href) ") ";
}

Auf diese Weise können die Leute die URLs von Links im Inhalt sehen. Aber bei diesen digitalen eBooks stelle ich einfach sicher, dass die Links blau sind, und sie sind in allen digitalen Formaten klickbar.

---

Das war eine lustige Reise! Ich bin hauptsächlich begeistert, dass ich mein Verständnis in all diesen Dingen erweitert habe, besonders weil das Rendern von Dingen auf digitalen Leinwänden irgendwie mein Spezialgebiet ist. Ich bin aber nur ein paar Stufen höher, da diese Dinge eine ziemlich steile Lernkurve haben!