PRINTCSS IN DER PRAXIS - 20.03.2019 / PUBLISHING AND PRINTING FORUM CHRISTIN SANDMANN-GÖTZ - PAGINA GMBH

PrintCSS in der Praxis
20.03.2019 / publishing and printing Forum

Christin Sandmann-Götz

Christin Sandmann-Götz
 Studium:
   Buch- und Medienproduktion (B. Eng., HTWK Leipzig)
   Medienmanagement (M. Eng., HTWK Leipzig)
   Schwerpunkt: Electronic und Cross Media
   Publishing

 pagina GmbH: Content Engineer / XML- und CSS-Entwickler
   XSL-Entwicklung (XML, XSLT and XSD)
   CSS-Entwicklung (CSS Paged Media/PrintCSS)

Warum CSS anstelle von
Satzsystemen oder XSL-FO für die
Print-(PDF-)Erstellung nutzen?

Varianten der automatisierten
Print-(PDF-)Erstellung
XML + Satzsystem: Automatisierte Verarbeitung von XML-Daten
in Satzsystemen wie InDesign, 3B2, Miles Oasys …
    Teilweise mit WYSIWYG-Layoutmodus
    Programmierkenntnisse notwendig

XSL-FO: Seitenbeschreibungssprache in komplexer XML-Syntax      »The answer is probably to
                                                                 invest in CSS, not XSL-FO,
    Wird offiziell nicht mehr weiterentwickelt                    these days«        LIAM QUIN, W3C

    Datentransformation sind zwingend notwendig
                                                              → CSS ist offizieller W3C-
                                                                Nachfolger des XSL-FO-
HTML/XML + CSS: Einfache Syntax, einfach in der Anwendung       Standards für seitenbasiertes
                                                                Rendering aus XML-Daten
   Viele Anwender die HTML und CSS beherrschen
                                                              → W3C positioniert CSS als
   Idealfall: Keine Datentransformation notwendig               universelle, crossmediale
   Lässt sich meist nahtlos in Verlagsworkflows integrieren      Layoutsprache für
                                                                strukturierte Daten

Warum CSS also nicht auch für die Erstellung
von PDFs nutzen?!

PrintCSS in der Praxis

PrintCSS in der Praxis
Was braucht man?

 HTML oder XML als Datenbasis
 CSS als Layoutsprache
 Renderer zur Erstellung der PDF-Binärdatei

CSS-Renderer
XML + HTML-Renderer

  Prince Website | Beispiele oder Prince for Books Website | Beispiele
  Kosten: ab $495
  Antenna House Website | Beispiele
  Kosten: ab $1,250.00

CSS-Renderer
HTML only-Renderer

  PDFreactor Website | Beispiele
  Kosten: ab 2.680€
  Callas pdfChip Website
  Kosten: ab 5.000€
  VersaType Website bzw. Vivliostyle (Open Source Project von VersaType) Website | Beispiele

PrintCSS – Die Spezifikation(en)
CSS Paged Media Module

  CSS Paged Media Module Level 3 Working Draft
  Aufbau einer Seite – Festlegung und Gestaltung der Seite
  CSS Generated Content for Paged Media Module Working Draft | Editor’s Draft
  Erstellung und Formatierung generierter Inhalte, wie Kolumnentitel
  und Querverweise
  CSS Fragmentation Module Level 3 Candidate Recommendation | Editor’s Draft
  Definition von Seiten- und Spaltenumbrüchen

PrintCSS – Was ist möglich?                   (1/7)
Seitenformatierung

Seitenformat
@page {size: breite hoehe;}

Satzspiegel und Stege
@page {
  margin: kopfsteg bund-/außensteg fußsteg;
}
@page:left {
  margin-right: bundsteg;
  margin-left: außensteg;
}
@page:right {
  margin-right: außensteg;
  margin-left: bundsteg;
}

PrintCSS – Was ist möglich?                   (2/7)
Seitenformatierung

Musterseiten
Definition mit @page:
@page teil {
  size: breite hoehe;
  margin: kopfsteg bund-/außensteg fußsteg;
  ...
}

Zuweisung über page:
kapitel {
  page: teil;
  ...
}

PrintCSS – Was ist möglich?      (3/7)
Seitenformatierung

Seitenbereiche
@page teil:left {
  @bottom-left { ... }
  @top-left { ... }
}

Seitenzahlen
content: counter(page);

Kolumnentitel
/*Initialisieren*/
string-set: kolumne content();

/*Ausgeben*/
content: string(kolumne);

PrintCSS – Was ist möglich?       (4/7)
Fußnoten

Fußnote positionieren
fussnote {float: footnote;}

Seitenbereich für Fußnotentext
@page {
  @footnote {...}
}

Fußnotenzähler und -marker
::footnote-call {
  content: counter(footnote);
  font-variant-position: super;
}
::footnote-marker {
  content: counter(footnote);
}

PrintCSS – Was ist möglich?                  (5/7)
Querverweise

XML
Text 

CSS
verweis {
  content: '(siehe Kapitel »',
    /* Inhaltsverweis */
    target-text(
      attr(intern),
      content()
    ) '«, S. '‚
    /* Seitenverweis */
    target-counter(
      attr(intern),
      page
    ) ')';
}

Ergebnis
Text (siehe Kapitel »Querverweise«, S. 85)

PrintCSS – Was ist möglich?                         (6/7)
Umbrüche

Seitenumbruch
kapitel {page-break-before: always;}
abbildung {page-break-inside: avoid;}
kapitel:first-of-type {page-break-before: right;}

Hurenkinder und Schusterjungen
abs {
  widows: 2;
  orphans: 2;
}

Silbentrennung
abs {
  hyphenate-lines: 3;
  hyphenate-before: 2;
  hyphenate-after: 4;
}

PrintCSS – Was ist möglich?              (7/7)
Druck-Spezifika

CMYK-Farben
color: device-cmyk(0%, 75%, 100%, 0%);

Auflösung von Abbildungen
abbildung {
  image-resolution: 300dpi;
}

PrintCSS – Was ist möglich?

→ und vieles mehr …

PrintCSS in der Praxis
Was braucht man (optimalerweise) noch
                                 noch??

   CSS-Präprozessor (z. B. Less, Sass, …)

 Less ist eine dynamische Stylesheet-Sprache, die die Fähigkeiten von CSS mit Variablen,
 Mixins, Operationen und Funktionen erweitert. Somit ist u. a. die Vermeidung von Code-
 Wiederholungen möglich, das CSS strukturierter sowie die Pflege und Anpassung des Codes
 einfacher – Durch die Nutzung von Less ist das Schrieben von CSS effizienter. Da Less eine
 Obermenge von CSS ist, ist CSS-Code gleichzeitig auch gültiger Less-Code.
                                             I   Z   . Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow
                                                                        https://t3n.de/news/besseres-css-mit-less-488092/

Weblinks:
 lesscss.org
 lesscss.de

PrintCSS für die Praxis
aus der Praxis

Showcase »Droemer Knaur«
Projektbeschreibung

  Anforderung: kostengünstige, automatisierte PDFs
  von E-Book-Only-Titeln
  Ausgangsdaten: auskorrigiertes parsX-XML der E-Book-Produktion
  Lösung: PrintCSS-Rendering mit Antenna House in parsX
  Aufwand: 3 AT für 4 Reihenlayouts (CSS) und eine XSLT-
  Tranformation (für Inhaltsverzeichnisse und Kolumnentitel)
  Ergebnis: 180 PoD-Titel von Herbst ‘15 – Frühjahr ‘19 mit PrintCSS
  produziert

Showcase »Droemer Knaur«
Demo – Droemer Knaur-PoD-Titel

Showcase »Droemer Knaur«
Projektbeschreibung

  Bewusste Entscheidung gegen XSL-FO
  Endprodukt misst sich bewusst nicht an InDesign-Satz
  Kompromisslösung was Detailtypografie betrifft,
  aber kein fauler Kompromiss

Showcase »Droemer Knaur«
Vorteile für den Verlag

   Initialkosten schnell amortisiert, sehr geringe laufende
   Produktionskosten
   Herstellung mit CSS-KnowHow kann eigene Reihenlayouts erstellen
   oder bestehende erweitern
   Kann schnell neue (Produkt-)ideen testen
   → z. B. PoD-Titel als Großdruck
   → z. B. Lektoratsausdruck

Showcase »Droemer Knaur«
parsX-Demo – Großdruck

Showcase »Droemer Knaur«
parsX-Demo – Lektoratsausdruck

Showcase »Narr Verlag«
Projektbeschreibung

  Anforderung: automatisierte PDFs (Druck- und E-PDF) von
  Dissertationen
  Ausgangsdaten: konvertiertes und auskorrigiertes parsX-XML aus
  Word-Daten
  Lösung: PrintCSS-Rendering mit Antenna House in parsX
  Umsetzung: zurzeit 8 Reihenlayouts (CSS) und XSLT-Tranformationen
  (u. a. für Inhaltsverzeichnisse, Kolumnentitel, Tabellen- und
  Abbildungsverzeichnis)

Showcase »Narr Verlag«
Demo – Narr – ConfigSetting »modern«

Showcase »Narr Verlag«
Demo – Narr – ConfigSetting »klassisch«

Showcase »Narr Verlag«
Demo – Narr – ConfigSetting »Sammelband/modern«

Showcase »Bund Verlag«
Projektbeschreibung

  Anforderung: Automatisierte Satzvorschau im MAM-System
  Ausgangsdaten: XML-Daten
  Lösung: PrintCSS-Rendering mit Antenna House aus sitefusion
  Umsetzung: 5 Reihenlayouts (CSS) und XSLT-Tranformationen
  (u. a. für verschiedene Inhaltsverzeichnisse, Kolumnentitel, Kustode
  und Zähler)

Showcase »Bund Verlag«
Demo – Bund – BetrVG

Showcase »S. Fischer Verlag«
Projektbeschreibung

  Anforderung: Rendering von PDF-Füllanzeigen für Printtitel aus
  normalen XML-Daten für E-Book/Print mit Prince
  Ausgangsdaten: parsX-XML
  Lösung: PrintCSS-Rendering mit Prince in parsX
  Aufwand: 1 AT
  Ergebnis: Start der Produktion im Jan 2018

Showcase »S. Fischer Verlag«
Demo – Fischer-Anzeigensatz – Zarah und Zottel

Showcase »IUBH«
Projektbeschreibung

  Anforderung: vollautomatische Produktion aus einem
  Redaktionssystem mit medienneutraler Datenhaltung
  der Lerninhalte für Zweitverwertung in App, Moodle, etc.
  Ausgangsdaten: XML-Daten nach IUBH-Schema
  Lösung: PrintCSS-Rendering mit Antenna House aus
  Redaktionssystem
  Aufwand: 10 AT

Showcase »IUBH«
Demo – IUBH – Studienskript

Vollautomatischer Satz?
Ja gerne,
   gerne, aber…

PIs zur Umbruchsteuerung

 Eigenentwicklung im parsX-Framework
 Processing Instructions zum manuellen Eingriff
 in das Satzbild
 Basiert auf einer Kombination aus XSLT und CSS

PIs zur Umbruchsteuerung
parsX-PrintCSS-PIs – Überblick

Satzbefehl                                     PI
 Umbruch auf neue Seite                        
 Umbruch auf neue rechte Seite                 
 Umbruch auf neue linke Seite                  
 Umbruch in neue Spalte                        
 Zeilenwechsel                                 
 Zeilenwechsel mit Trennstrich                 
 Zeilenwechsel, austreibend                    
 Zeilenwechsel, austreibend, mit Trennstrich   
 Trennfuge                                     
 Trennverbot                                   
 Leerzeile                                     
 Halbe Leerzeile

PIs zur Umbruchsteuerung
parsX-PrintCSS-PIs – Überblick

Satzbefehl                                       PI
 Übersatz erlauben                               
 Schriftlaufweite vergrößern (Spationieren)      
 Schriftlaufweite verkleinern (Unterschneiden)   
 Wortabstand vergrößern                          
 Wortabstand verkleinern                         
 Rendering an bestimmter Stelle abbrechen

PIs zur Umbruchsteuerung
parsX-PrintCSS-PIs – Demo

... gelber Post-it-Zettel um meine Aufmerksamkeit. Auf dem
einen stand »Kaffee ist aus« ....
...
»Die kleinen Freuden des Alltags«, murmelte ich und machte mich daran [...]<

PrintCSS in der Praxis
Lessons Learned

Lessons Learned
Grenzen von PrintCSS

 (Noch) kein WYSIWYG-Editor vorhanden
    Bildplatzierung möglich aber teilweise schwierig
    Debugging nur durch erneutes Rendering
 Für generierte Inhalte (wie Index, Inhaltsverzeichnis, etc.) sind
 teilweise XSLT- oder JavaScript-Eingriffe notwendig
 Typographische Feinjustierung
 (deutsche) Worttrennungen

Lessons Learned
Tipps zu PrintCSS im Praxiseinsatz

 Einschätzung: Eignet sich das Projekt überhaupt für PrintCSS?
 Empfehlung: Verwendung eines CSS-Präprozessors (Less, Sass, …)
 Entscheidung: für einen Renderer
    Unterschiedliches Rendering bei gleichem CSS
    mit verschiedenen Renderern → print-css.rocks
    Noch recht viele proprietäre CSS-Erweiterungen
 Know-How (neben CSS): XSLT (und/oder JavaScript), für
 Datentransformation und Eingriffe in den Satzprozess (z. B. für
 generierte Inhalte wie Index, Inhaltsverzeichnis, etc.)

Lessons Learned
Potenzial von PrintCSS

 Trennung von Content (XML), Code (XSLT) und Layout (CSS)
 Ein Content › Mehrere Layouts › Mehrere Medien
 » aber nur EINE Stylingsprache
 Automatisierung in Digital First Workflows
 Schnelle Umsetzung neuer Produktformen (z. B. für PoD)
 oder schnelles Prototyping für angereicherte Lektorats-PDFs /
 interne Previews

PrintCSS bietet die Chance für neue (automatisierte)
Produktformen, individualisierte/personalisierte
Produkte, Previews und Leseproben (Satzfahnen,
Umfangschätzung, etc.), …

Warum PrintCSS also nicht für die Erstellung
von PDFs nutzen?!

Vielen Dank für Ihre
Aufmerksamkeit!
Fragen? Anregungen?

Christin Sandmann-Götz, pagina GmbH

christin.sandmann-goetz@pagina.gmbh

Leseliste                            (1/2)

Relevante W3C-Standards

 CSS Paged Media Module Level 3 http://www.w3.org/TR/css3-page/
 CSS Generated Content for Paged Media Module http://www.w3.org/TR/css3-gcpm/
 CSS Fragmentation Module Level 3 http://www.w3.org/TR/css3-break/

Weitere Empfehlungen:

 ANDREW, RACHEL. Designing For Print With CSS
 http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

 ANTENNA HOUSE. CSS for Paged Media Guide and Samples
 https://www.antennahouse.com/css/

 ANTENNA HOUSE. Introduction to CSS for Paged Media
 https://www.antennahouse.com/antenna1/wp-content/uploads/2019/02/CSS-Print-en-2019-02-15.pdf

 CRAMER, DAVE; HYDE, ADAM. Paged Media
 https://www.pagedmedia.org/

 GÖTZ, CHRISTIN. PrintCSS. Das CSS paged media Modul. Grundlagen und Referenz
 http://www.pagina.gmbh/unternehmen/publikationen/printcss/

Leseliste                             (2/2)

JUNG, ANDREAS. PrintCSS/CSS Paged Media (PDF generation from XML and HTML using CSS
stylesheets) tutorial and showcase with lessons, tool descriptions and comparions.
PDFreactor Antennahouse PrinceXML.
https://print-css.rocks/

KLEINFELD, SANDERS. The Case for Authoring and Producing Books in (X)HTML5.
http://balisage.net/Proceedings/vol10/print/Kleinfeld01/BalisageVol10-Kleinfeld01.html

KLEINFELD, SANDERS. HTML5 is the Future of Book Authorship
http://radar.oreilly.com/2013/09/html5-is-the-future-of-book-authorship.html

MCKESSON, NELLIE. Building Books with CSS3.
http://alistapart.com/article/building-books-with-css3

PAGEDMEDIA. Paged Media. A blog which advocates for innovative approaches to making
books in browsers.
https://www.pagedmedia.org/

YESLOGIC PTY LTD. Prince – Convert HTML to PDF with CSS
https://www.princexml.com

YESLOGIC PTY LTD. Prince – Prince for Books
https://www.princexml.com/books/