PrintCSS: die stille Revolution im Publishing.

1

Beinahe unbemerkt hat sich in den letzten Jahren im Bereich des Publishing eine Revolution ereignet. Ihr Name: PrintCSS.

Bei PrintCSS geht es darum, mit herkömmlichem HTML und CSS Informationen zu visualisieren und daraus ein druckfähiges PDF zu generieren. (Es sind außer HTML auch XML oder Markdown möglich, der Einfachheit wegen sprechen wir im Folgenden aber von HTML.)

Dass aus HTML und CSS PDFs generiert werden können, ist zunächst einmal nichts Neues. Seit Jahren werden in digitalen Dienstleistungen Rechnungen, Angebote, Lieferscheine und so weiter genau so erzeugt. Dort, wo täglich tausende von solchen Dokumenten benötigt werden, kommt schon lange kein Adobe InDesign und kein QuarkXPress mehr zum Einsatz. Diese Dokumente – die uns allen bekannt sein dürften – erfüllen aber bei weitem nicht die Ansprüche an ein visuell ansprechendes Erscheinungsbild. Professionelle Gestaltung und professionelle Typografie sind damit nicht möglich. Nun haben sich aber in den letzten Jahren zwei Dinge entwickelt:

1. Zum einen verfügt CSS inzwischen über einige Möglichkeiten, Informationen so zu formatieren, dass damit durchaus anspruchsvolle Layouts für Drucksachen visualisiert werden können. Dazu gehören zum Beispiel Fußnoten und lebende Kolumnentitel.
2. Zum anderen gibt es inzwischen neben den HTML-zu-PDF-Tools der ersten Stunde auch professionelle PrintCSS-Renderer, die es sich zur Aufgabe gemacht haben, HTML und CSS nach den Anforderungen der grafischen Industrie und der Druckbranche in PDFs umzuwandeln.

2

Vorteile von PrintCSS gegenüber herkömmlicher Layout-Software

PrintCSS bietet einige Vorteile, die es zu einer höchst interessanten, fast schon disruptiven Technologie machen:

• Es basiert auf CSS, in Verbindung mit HTML oder auch XML. Diese Technologien sind einfach zu lernen und vielen Menschen vertraut. Damit fallen Hürden, denn es ist nun einfacher Druck-Daten zu erstellen. Auch Mitarbeiter:innen lassen sich so leichter finden.
• CSS, eigentlich Cascading Style Sheets, ist eine Stylesheet-Sprache, die vom World Wide Web Consortium (W3C) entwickelt wird. Jede Art von Organisation kann dem W3C beitreten. Damit gehört CSS – wie auch HTML – keinem einzelnen Unternehmen mit wirtschaftlichen Interessen. Es kann kein Monopol entstehen und die Sprache kann nicht von heute auf morgen verschwinden. Dies ist ein wichtiger Umstand, gerade für langjährige Adobe-Kunden, die erst zu Abonnement-Zahlungen verpflichtet wurden und dann erleben mussten, wie nahezu jede Form von Innovation und Entwicklung ausblieb. Oder wie Adobe Muse 2018 plötzlich eingestellt wurde. Oder wie 2019 alle Anwender der Adobe Creative Cloud in Venezuela gesperrt wurden und nicht mehr weiterarbeiten konnten.
• Dadurch, dass HTML im Grunde eine abstrakte Auszeichnungssprache ist, können Layouts und Dokumente sowohl für Web, als auch für Print gleichzeitig erzeugt werden. Unterschiedliche Ausgabekanäle können in CSS berücksichtigt und entsprechend bedacht werden.
• Die Kosten sind gering. Dies variiert je nach PrintCSS-Renderer, dennoch bleiben die Kosten konstant unter denen, die für ein Adobe InDesign oder einen Adobe InDesign Server anfallen.

3

Nachteile von PrintCSS gegenüber herkömmlicher Layout-Software

Ein großer Nachteil von PrintCSS ist, dass es dafür aktuell noch keine visuelle Oberfläche gibt, mit der gearbeitet werden könnte. Da, wo HTML zum Einsatz kommt, kann jeder Browser eine Vorschau ermöglichen. Allerdings unterstützen Browser keine print-spezifischen Angaben und weichen damit in der Darstellung ab. Und dort, wo XML oder Markdown zum Einsatz kommen, versagen Browser ebenfalls. Meistens ist es daher nötig, PDF um PDF zu rendern und das Ergebnis zu begutachten.

Dadurch, dass es nicht in allen Fällen CSS-Standards gibt, zum Beispiel was Farben betrifft, sind die Anbieter der PrintCSS-Renderer auf eigene Lösungen angewiesen. Dies bedeutet, dass schon zu Beginn eines Projekts klar sein muss, welcher Renderer genutzt wird. Es gibt bereits Ansätze, die renderer-spezifischen Angaben automatisiert zu erzeugen (siehe zum Beispiel Auto Prefixer Library für PHP), dennoch braucht es hierfür langfristig Standards, die dann auch von allen Anbietern angenommen und unterstützt werden.

Es gibt auch Situationen, die von CSS tatsächlich nicht abgebildet werden können. Hierzu gehören Objekte, die von Text beidseitig umflossen werden und auch verknüpfte Textrahmen. Je nach Projekt und je nach Gestaltung kann PrintCSS hervorragend funktionieren oder auch gar nicht.

4

Welche PrintCSS-Renderer gibt es?

Es existieren inzwischen eine Handvoll PrintCSS-Renderer, die sich in ihrem Funktionsumfang, in den Kosten und in der technischen Integration unterscheiden. Zu den bekanntesten gehören:

• Antennahouse Formatter: Stark ausgebaut für die Bereiche Fließ-Layouts und professionelle Typografie. Gehört zu den teuersten Renderern. Wird als Binary ausgeliefert und muss installiert werden. Auch für Docker verfügbar.
• BFO Publisher: Der neueste PrintCSS-Renderer mit uns unbekanntem Preismodell. Wurde in Java geschrieben und muss als Binärdatei installiert werden. Verfügbar für Docker.
• DocRaptor: Kostenpflichtige API mit dem Prince PDF-Konverter. Unterstützt eine Vielzahl von Programmiersprachen wie Java, JavaScript, Node, PHP, Python, Ruby und .Net.
• Paged.js: Kostenloser Open-Source-Renderer, geschrieben in JavaScript. Kann über NPM installiert werden. Bietet eine Vorschau des Renderings im Browser. Hat seine Grenzen, wenn es um anspruchsvollen Schriftsatz geht.
• PDFreactor: Ebenso stark wie der Antennahouse Formatter, aber mit teilweise breiterem Support von CSS-Eigenschaften. Kann als Binary verwendet werden, oder über eine REST API.
• Prince: Sehr fortschrittlicher aber nicht ganz günstiger Renderer. Wird als Binärdatei ausgeliefert und muss installiert werden. Unterstützt auch modernes CSS, z.B. CSS-Variablen, aber aktuell noch keine Grid-Layouts.
• Typeset.sh: Hervorragender Support von CSS, zum Beispiel mit Flex- und Grid-Layouts, sowie CSS-Variablen. Geschrieben in PHP kann Typeset.sh via Composer integriert werden. Eine REST-API steht ebenfalls zur Verfügung.
• Vivliostyle: Kostenloser Open-Source-Renderer, der in TypeScript/JavaScript geschrieben wird. Er kann über NPM installiert werden und verarbeitet auch EPUB und Markdown.
• Weasyprint: Kostenloser Open-Source-Renderer, geschrieben in Python. Kann über PIP und auf viele andere Arten installiert werden.

5

Wie sieht PrintCSS aus?

Nun aber ganz konkret! Das hier ist der Code für eine einfache, zweiseitige Visitenkarte:

<style>
    @page {
        size: 85mm 55mm;
        margin: 0;
        bleed: 3mm;
        marks: crop;
    }

    section {
        position: relative;
        width: 85mm;
        height: 55mm;
        font-family: "FreightText Pro", serif;
        color: cmyk(0%, 100%, 100%, 0%, overprint);
        font-size: 9pt;
        line-height: 1.5;
        page-break-after: always;
    }

    h1,
    p {
        margin: 0;
    }

    table {
        border: none;
        border-collapse: collapse;
        font-size: inherit;
        font-style: inherit;
        line-height: inherit;
        font-weight: inherit;
    }

    td {
        padding: 0;
    }

    .top {
        position: absolute;
        top: 6mm;
        left: 6mm;
        width: 73mm;
        height: 16mm;
    }

    .bottom {
        position: absolute;
        bottom: 6mm;
        left: 6mm;
        width: 73mm;
        height: 30mm;
        display: flex;
        justify-content: end;
        flex-flow: column;
    }

    .bottom > * {
        width: 100%;
    }
</style>
<section class="front">
    <div class="top">
        <h1>Tobias Köngeter</h1>
    </div>
    <div class="bottom">
        <p>Überkinger Straße 4<br>
            70372 Stuttgart</p>
        <table>
            <tr>
                <td>T:</td>
                <td>+49&thinsp;.&thinsp;711&thinsp;.&thinsp;99&thinsp;52&thinsp;86-62</td>
            </tr>
            <tr>
                <td>E:</td>
                <td>info@siegertypen-design.de</td>
            </tr>
        </table>
    </div>
</section>
<section content="back">
    <div class="top">
        <h1>SIEGERTYPEN</h1>
    </div>
</section>

Ein paar Dinge sind dabei erwähnenswert:

• Mit dem @page-Attribut werden die Eigenschaften einer Seite definiert. bleed und marks sind dabei die Angaben, mit denen aus dem PDF ein Druck-PDF wird, weil sie den Beschnitt und die Schneidemarken definieren.
• Die Farbe der Schrift wird mit cmyk als – richtig geraten – CMYK-Farbe definiert. Diese Angabe versteht nicht jeder Renderer, da es keinen Standard gibt bzw. er nicht konsequent implementiert wurde. Die Farbdefinition muss also je nach Renderer angepasst werden.
• Mit page-break-after wird festgelegt, dass nach jedem section-Element ein Seitenumbruch erzeugt werden soll.

Getestet und verändert werden kann das PrintCSS-Beispiel auch in einem interaktiven Online-Editor unter www.printcss.live. Dort lässt sich auch gut erkennen, wie manche Renderer mit dem CSS-Flexbox-Modell und mit der Farbangabe nicht zurecht kommen.

6

Wird PrintCSS klassische Layoutprogramme wie Adobe InDesign oder QuarkXPress ersetzen?

Ja und nein. Es gibt nach wie vor gestalterische Feinheiten, die Stand heute von CSS noch nicht unterstützt beziehungsweise auch von den professionellsten Renderern nicht umgesetzt werden können. Dazu gehört zum Beispiel Text, der ein Objekt auf beiden Seiten umfließt. Auch Text, der von einem Textrahmen in einen anderen fließt, kann mit HTML und CSS noch nicht umgesetzt werden.

Für viele Anwendungsbereiche funktioniert PrintCSS aber hervorragend und kommt seit vielen Jahren – größtenteils auch unbemerkt – zum Einsatz. Dazu gehören Bücher, Kataloge, Visitenkarten, Mailings und vieles mehr.

Im Grunde eignet sich die Anwendung von PrintCSS überall dort, wo sehr komplexe oder in hoher Frequenz Daten verarbeitet werden sollen und deshalb Automatisierungslösungen gefragt sind.

7

Mehr über PrintCSS erfahren

Wir haben einige Informationen zusammengetragen und stellen sie auf einer separaten Website zur Verfügung. Sie befindet sich unter www.printcss.dev.

Ein umfangreiches Kompendium und einen Vergleich der unterschiedlichen Renderer gibt es auch von Andreas Jung unter www.print-css.rocks.

Und von der pagina GmbH gibt es seit Oktober 2023 die deutsche Ausgabe »PrintCSS – Einführung und Referenz« (ISBN 978-3-938529-20-1).

Unser Fazit

Bei SIEGERTYPEN setzen wir PrintCSS bereits seit einigen Jahren ein und haben damit tolle Erfahrung gemacht. Wir verwenden nach wie vor klassische DTP-Programme, greifen aber mehr und mehr auf PrintCSS zurück. Dabei kommen unterschiedliche Renderer zum Einsatz, je nach Projekt und je nach Wunsch unserer Kunden.

Auch unsere Layout-Automatisierungs-Software ManyPrint Solutions arbeitet intern unter anderem mit PrintCSS.