PDF aus HTML erstellen – Dokumente mit CSS Paged Media formatieren

von Martin Fiebig am 14. März 2023

Zugehörige Leistungen: DITA-XML für die Technische Dokumentation und Automatische Publikation über Pipelines

Um aus einer technischen Dokumentation in DITA-XML oder einer Website in HTML ein PDF zu erstellen, gibt es verschiedene Wege und Tools. In diesem Wissensartikel stelle ich zunächst die Vor- und Nachteile der dabei zur Anwendung kommenden Sprachen XSL-FO und CSS Paged Media gegenüber. Im zweiten Teil vergleiche ich Programme für das Rendering von HTML-Dateien zu PDF-Dateien über CSS und deren Funktionen.

Dieser Wissensartikel entstand im Rahmen meiner Bachelorarbeit im Studiengang Technisches Informationsdesign und Technische Redaktion an der Hochschule Hannover.

Ausgangspunkt: PDF-Formatierung mit XSL-FO oder CSS Paged Media

In DITA-XML erstellte Dokumentation wird häufig nach dem Prinzip des Single-Sourcing in verschiedenen Formaten ausgegeben, wie HTML oder PDF. Für die Formatierung einer PDF-Datei wird dabei oft die Sprache XSL-FO (Extensible Stylesheet Language – Formatting Objects) benutzt (s. Abb. 1). Doch XSL-FO ist recht komplex und benötigt für individuelle Anpassungen der Formatierung tiefgreifende Kenntnisse in XSLT und XSL-FO. Außerdem ist die Weiterentwicklung von XSL-FO vom W3C eingestellt worden.

Beispiel Formatierung A4-Seite mit XSL-FO (Screenshot) — Abbildung 1: Formatierung einer DIN-A4-Seite und einer Überschrift mit XSL-FO

Als Alternative kann die PDF-Ausgabe mit CSS formatiert werden, diese CSS Paged Media genannte Sprache wird vom W3C aktiv weiterentwickelt und als Nachfolger von XSL-FO bezeichnet (s. Abb. 2).

Beispiel Formatierung A4 Seite mit CSS Paged Media — Abbildung 2: Formatierung einer DIN-A4-Seite und einer Überschrift mit CSS Paged Media

Die alte Formatierungslösung: XSL-FO

Die Grundlage für die Formatierung über XSL-FO bilden eine XML-Datei und ein XSLT-Stylesheet. Dieses XSLT-Stylesheet definiert die Transformation der XML-Datei in ein XSL-FO-Dokument. Dafür werden die XML-Datei und das XSLT-Stylesheet an einen XSLT-Prozessor übergeben, der aus den beiden Dokumenten das XSL-FO-Ergebnisdokument generiert. Dieses XSL-FO-Dokument wird anschließend von einem XSL-Formatierer zu einer PDF-Datei transformiert (s. Abb. 3).

PDF-Generierung über XSL-FO Ablaufdiagramm — Abbildung 3: PDF-Generierung über XSL-FO

Ein XSL-FO-Dokument besteht dabei aus zwei Teilen. Im ersten Teil wird mit <fo:layout-master-set> das Layout der Seite(n) definiert. Der zweite Teil wird mit <fo:page-sequence> definiert. Er besteht aus sogenannten Blöcken, in denen sich verschachtelt weitere Blöcke bzw. Elemente sowie konkreter Textinhalt befinden können. Layout und Inhalt werden also bei der Verwendung von XSL-FO in ein und derselben Datei definiert.

Die neue Formatierungslösung: CSS Paged Media

Die Grundlage für die Formatierung über CSS hingegen bilden eine XML- oder HTML-Datei, sowie eine CSS-Datei. Diese beiden Dateien werden dann an einen Renderer übergeben, der daraus die PDF-Datei erzeugt (s. Abb. 4).

PDF Generierung ueber CSS Paged Media Diagramm — Abbildung 4: PDF-Generierung über CSS Paged Media

Vorteil der Dokumenten-Generierung über CSS Paged Media gegenüber XSL-FO ist, dass mit einer weiter verbreiteten (Formatierungs-)Sprache gearbeitet werden kann, was die Technologie einfacher nutzbar macht. Außerdem erfolgt bei der Dokumenten-Generierung über CSS eine Trennung von Inhalt und Layout, was die Wiederverwendbarkeit erhöht. Zusätzlich kann im CSS über die s. g. media queries das Print-Layout getrennt vom Screen-Layout gesteuert werden, so dass nur eine CSS-Datei für die verschiedenen Ausgabe-Medien benötigt wird.

Mehr gestalterische Freiheit mit XSL-FO

Vorteil der Dokumenten-Generierung über XSL-FO gegenüber CSS ist allerdings, dass bei der Verwendung von XSL-FO der Aufbau der PDF-Datei von dem der XML-Quelldatei abweichen kann. Mithilfe der XSLT-Transformation kann die Struktur der PDF-Datei an individuelle Bedürfnisse angepasst werden. So kann z. B. automatisch ein Inhaltsverzeichnis erstellt werden, das in der XML-Quelldatei nicht beschrieben ist. Bei der Verwendung von CSS Paged Media ist dies so nicht möglich, da die Struktur der HTML- bzw. XML-Quelldatei unverändert in die PDF-Datei übernommen wird. Es können lediglich gezielt Elemente ausgeblendet werden oder Text-Inhalte hart über das CSS eingefügt werden. Für eine weitergehende Anpassung der Struktur muss hier eine zusätzliche XSLT-Transformation durchgeführt werden.

Tools im Test: Rendering von HTML-Dateien zu PDF-Dateien mit CSS

Doch wie unterscheidet sich die Technologie in der Praxis von XSL-FO? In meiner Bachelorarbeit habe ich mehrere Programme für das Rendering von HTML-Dateien zu PDF-Dateien über CSS recherchiert, getestet und verglichen. Dafür habe ich aus den Spezifikationen des W3C für CSS Paged Media Kriterien abgeleitet und einen Kriterienkatalog erstellt, um eine Basis für den Vergleich der Tools zu schaffen.

Abbildung 5: Ausschnitt Kriterienkatalog Test Umwandlung von HTML in PDF ueber CSS — Abbildung 5: Ausschnitt Kriterienkatalog zum Vergleich von Tools zur Umwandlung von HTML- in PDF-Dateien über CSS Paged Media

Anschließend habe ich Testdateien erstellt, um einheitlichen Beispiel-Content für die Tests zu haben. Diese Testdateien setzen dabei die vorher von mir aufgestellten Kriterien um. Anschließend habe ich dann mit den verschiedenen Programmen die Testdateien in HTML zu PDF-Dateien transformiert und die Ergebnisse verglichen.

Die getesteten Programme im Überblick

Ich habe im Rahmen dieser Arbeit sowohl kostenpflichtige als auch Open-Source-Tools betrachtet. Die folgenden Programme habe ich getestet:

Kostenpflichtige Programme

Antenna House Formatter
Oxygen Chemistry
pdfChip
PDFreactor
Prince XML

Open-Source-Programme

paged.js
Vivliostyle
WeasyPrint
wkhtmltopdf

Antenna House Formatter

Der Antenna House Formatter ist ein kostenpflichtiges Programm der Antenna House Inc. Dieses Programm kann XML- und HTML-Dateien sowohl mittels XSL-FO als auch über CSS Paged Media zu PDF und weiteren Dateiformaten transformieren.

Oxygen Chemistry

Oxygen Chemistry ist ein kostenpflichtiges Programm der Firma Syncro Soft SRL, welche auch den Oxygen XML Editor vertreibt. Chemistry ist ein CSS Paged Media Prozessor, der auf der Open-Source Apache FOP XSL-FO Engine basiert.

paged.js

paged.js ist ein frei verfügbares Open-Source-Produkt. Das Projekt wurde von Adam Hyde gegründet und wird aktuell von der Coko Foundation gepflegt. paged.js ist eine JavaScript-Bibliothek, die HTML-Dateien im Browser rendert und zu PDF konvertiert. Dabei soll der Paged Media Standard des W3C umgesetzt werden.

pdfChip

pdfChip ist ein kostenpflichtiges Kommandozeilen-Tool der callas software GmbH. Das Programm kann HTML-Dateien mittels CSS zu PDF konvertieren. pdfChip soll dabei alle HTML-Features unterstützen und weitergehende Funktionen bieten, z. B. CMYK-Unterstützung, SVGs, MathML u. v. m.

PDFreactor

Bei PDFreactor handelt es sich um einen kostenpflichtigen PDF-Converter der RealObjects GmbH. Der PDFreactor konvertiert HTML-Dateien zu PDF und bietet nach eigener Aussage eine breite Unterstützung z. B. für HTML5, sCSS3, JavaScript, PHP, Python u. v. m.

Prince XML

Prince XML ist ein kostenpflichtiges Produkt der YesLogic Pty Ltd. Mittels CSS Paged Media kann Prince XML- und HTML-Dateien zu PDF konvertieren.

Vivliostyle

Dieses Open-Source-Programm der Vivliostyle Foundation bietet mit Vivliostyle CLI ein Kommandozeilen-Tool, welches HTML-Dateien mittels CSS zu PDF exportiert.

WeasyPrint

WeasyPrint ist ein Open-Source-Produkt, welches von der kozea group entwickelt wurde und von CourtBillion gepflegt wird. WeasyPrint ist eine „visual rendering engine“ und kann HTML-Dateien mittels CSS zu PDF rendern.

Wkhtmltopdf

wkhtmltopdf ist ein Open-Source-Programm. Das Kommandozeilen-Tool rendert HTML-Dateien zu PDF und nutzt dabei die „Qt WebKit rendering engine“. Das Projekt wurde von Jakob Truelsen gestartet und wird aktuell von Ashish Kulkarni gepflegt.

Ergebnisse: Wie gut unterstützten die Programme im Test CSS Paged Media?

Insgesamt bieten die getesteten Programme allesamt eine gute Unterstützung für CSS Paged Media. Grundlegende Anforderungen an die Formatierung eines Dokumentes können fast alle Programme bedienen, lediglich wkhtmltopdf unterstützt in diesem Test nur die Erstellung von Bookmarks. Werden spezifischere Layout-Funktionen benötigt, muss genauer geprüft werden, welches Programm die notwendige Unterstützung bietet. Eine gute Orientierung bietet diese Tabelle mit den detaillierten Testergebnissen meiner Bachelorarbeit¹:

Tabelle downloaden

Allerdings ist zu beachten, dass sich die Ergebnisse in dieser Tabelle auf die speziell provozierten corner-cases meiner Bachelorarbeit beziehen. Das heißt, ein negativer Eintrag in der Tabelle bedeutet aus praktischer Sicht nicht unbedingt, dass das Programm eine grundlegende Anforderung an das Layout nicht umsetzen kann. Oft gibt es mehrere Möglichkeiten, eine solche Anforderung umzusetzen, die meisten Programme unterstützen aber nicht alle vorhandenen Möglichkeiten. Zum Beispiel kann laut meiner Auswertung das Programm WeasyPrint keine in CMYK definierten Farben umsetzen. Da WeasyPrint aber in RGB definierte Farben unterstützt, kann das Layout trotzdem an individuelle Bedürfnisse (Corporate Design) angepasst werden. In der Praxis dürfte dies dann zu vernachlässigen sein, da beide Farbräume bis auf kleine Unterschiede identisch sind und die Farbwerte gut in den jeweils anderen Farbraum übertragbar sind. Das Programm WeasyPrint unterstützt also die grundlegende Anforderung, eigene Farben definieren zu können, aber nicht die detailliertere Anforderung eigene Farben im CMYK-Farbraum definieren zu können.

Insgesamt bietet das kostenpflichtige Programm Antenna House Formatter die beste Unterstützung, hat allerdings auch – gerade in der Server-Version – seinen Preis. Das beste Open-Source-Programm, WeasyPrint, kommt in der Funktionalität sehr nah an den Antenna House Formatter heran, steht sogar auf einem Level mit den kostenpflichtigen Programmen Prince XML und PDFreactor. Überhaupt stellen die meisten der getesteten Open-Source-Produkte eine gute Alternative zur Verwendung kostenpflichtiger Programme dar. Lediglich pdfChip und wkhtmltopdf sind aufgrund ihres geringen Funktionsumfangs nur bedingt zu empfehlen. Auch die Preisgestaltung des Programms pdfChip und das Limit der Seiten pro Dokument in einigen Versionen (z. B. pdfChip S: 25 Seiten/Dokument) spricht nicht für die Verwendung von pdfChip.

Fazit

Sowohl die Formatierung über XSL-FO als auch über CSS Paged Media haben Vor- und Nachteile, so dass es letztendlich auf die individuellen Gegebenheiten und die Anforderungen an die Formatierung ankommt.

Für durchschnittliche Anforderungen an die Formatierung eines Dokumentes ist CSS Paged Media eine gute Alternative zu XSL-FO. CSS-Kenntnisse sind weiter verbreitet als Kenntnisse in XSLT und XSL-FO, auch ist der Aufwand der Formatierung besonders für kleinere Dokumente geringer als bei der Verwendung von XSL-FO. Wie die Ergebnisse meiner Bachelorarbeit zeigen, gibt es am Markt auch genug Programme, die CSS Paged Media in akzeptablem Umfang unterstützen.

Besteht allerdings schon eine Ausgabestrecke über XSL-FO oder gibt es deutlich speziellere Anforderungen an die Formatierung, ist die Verwendung von CSS Paged Media in der Regel keine Alternative.

Tony Grahams (Antenna House) Vortrag bei der XML Prague 2022 gibt einen aktuelleren Stand und weiterführenden Einblick in den Vergleich der beiden Technologien sowie in die Unterstützungsmöglichkeiten, die speziell Antenna House bietet.

XML-Lösungen – Sie benötigen XML-basierte Dokumentation, die mit DITA oder DocBook erstellt ist? Wir entwickeln Lösungen, die präzise Ihren Anforderungen entsprechen. Schreiben Sie uns.

Fußnoten

¹ Die Programme wurden im Juni / Juli 2022 getestet. Aktuellere Versionen der getesteten Programme können daher auch von den Testergebnissen abweichen.

Quellen und weiterführende Links

https://www.antennahouse.com/formatter-v7

https://www.oxygenxml.com/doc/versions/21.1/ug-chemistry/topics/ch_getting_started.html

https://pagedjs.org/about/

https://www.callassoftware.com/en/products/pdfchip

https://www.pdfreactor.com/

https://www.princexml.com/

https://vivliostyle.org/

https://doc.courtbouillon.org/weasyprint/stable

https://wkhtmltopdf.org/index.html

https://archive.xmlprague.cz/2022/files/xmlprague-2022-proceedings.pdf

https://archive.xmlprague.cz/2022/files/presentations/xsl-fo-css-comparison.pdf