PrintCSS in der Praxis 07.12.2016 / #XUGS15 – XML User Group Stuttgart Christin Götz / Tobias Fischer (

@tobias_fischer)

Christin Götz Studium: Buch- und Medienproduktion (B. Eng., HTWK Leipzig) Medienmanagement (M. Eng., HTWK Leipzig) Schwerpunkt: Electronic and Cross Media Publishing pagina GmbH: Content Engineer / XML-Entwickler XSL-Entwicklung (XML, XSLT and XSD) CSS-Entwicklung (CSS Paged Media/PrintCSS)

Tobias Fischer Studium: Druck- und Medientechnologie (Hochschule der Medien, Stuttgart) Schwerpunkt: CrossMedia-Publishing pagina GmbH: Produktmanagement »parsX« parsx.de Senior Software Engineer XML-Workflows E-Book-Automation Anwendungsentwicklung

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Varianten der Print-(PDF-)Erstellung XML + Satzsystem Automatisierte Verarbeitung von XML-Daten in InDesign, 3B2, Miles Oasys …

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Varianten der Print-(PDF-)Erstellung XML + Satzsystem Automatisierte Verarbeitung von XML-Daten in InDesign, 3B2, Miles Oasys … XSL-FO Seitenbeschreibungssprache in komplexer XML-Syntax

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Varianten der Print-(PDF-)Erstellung XML + Satzsystem Automatisierte Verarbeitung von XML-Daten in InDesign, 3B2, Miles Oasys … XSL-FO Seitenbeschreibungssprache in komplexer XML-Syntax HTML/XML + CSS Sprache des Web, einfacher in der Anwendung.

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung? XSL-FO (bisherige W3C-Standard für seitenbasiertes XML-Rendering) hat eine komplexe XML-Syntax, die spezieller Programmierkenntnisse bedarf macht Datentransformation zwingend notwendig müsste dringend weiterentwickelt werden, aber… 2012 wurde die Arbeitsgruppe mangels aktiver Mitglieder geschlossen die FO-Formatter-Hersteller setzen lieber auf proprietäre Erweiterungen ohne Standard → Kein Nachfolgestandard für XSL-FO 1.1

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung? CSS (Sprache des Web) hat eine einfache Syntax und ist einfach in der Anwendung viele Entwickler beherrschen CSS (und JavaScript) Idealfall: Keine Datentransformation notwendig

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung? CSS (Sprache des Web) → NELLIE MCKESSON, O’REILLY: »3 mal so schnell wie XSL-FO« [Lernkurve & Layouterstellung] → CSS ist offizieller W3C-Nachfolger des XSLFO-Standards für seitenbasiertes Rendering aus XML-Daten → W3C positioniert CSS als universelle, crossmediale Layoutsprache für strukturierte Daten!

Cross Media Publishing Ein Content › Mehrere Layouts › Mehrere Medien

Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung? CSS (Sprache des Web) → NELLIE MCKESSON, O’REILLY: »3 mal so schnell wie XSL-FO« [Lernkurve & Layouterstellung] → CSS ist offizieller W3C-Nachfolger des XSLFO-Standards für seitenbasiertes Rendering aus XML-Daten → W3C positioniert CSS als universelle, crossmediale Layoutsprache für strukturierte Daten! → »one language to rule them all«

Warum also nicht auch für PDF’s?!

PrintCSS in der Praxis Was braucht man? HTML oder XML als Datenbasis CSS als Layoutsprache Renderer zur Erstellung der PDF-Binärdatei

CSS-Renderer Übersicht (ernstzunehmender) CSS-Renderer

Prince XML (XML+HTML) http://www.princexml.com Kosten: ab 550€ Antenna House (XML+HTML) https://www.antennahouse.com Kosten: ab 1.100€ PDFreactor (HTML only) http://www.pdfreactor.com/ Kosten: ab 2.250€ Callas pdfChip (HTML only) https://www.callassoftware.com/de/produkte/pdfchip Kosten: ab 5.000€ Vivliostyle (HTML only) http://vivliostyle.com/en/ Kostenlos für Einsatz im Browser Kostenpflichtige Commandline-Version geplant

PrintCSS – Die Spezifikation CSS Paged Media Module

Paged Media Module Level 3 Working Draft (Stand: 14.03.2013) Editor’s Draft (Stand 06.12.2016) Generated Content for Paged Media Module Working Draft (Stand: 13.05.2014) Editor’s Draft (Stand 06.12.2016) Fragmentation Module Level 3 Working Draft (Stand: 14.01.2016) Editor’s Draft (Stand 06.12.2016)

PrintCSS – Was ist möglich? 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 ; }

;

(1/7)

PrintCSS – Was ist möglich? Seitenformatierung

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

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

(2/7)

PrintCSS – Was ist möglich? Seitenformatierung

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

Seitenzahlen content : counter (page);

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

(3/7)

PrintCSS – Was ist möglich? 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) ; }

(4/7)

PrintCSS – Was ist möglich? 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)

(5/7)

PrintCSS – Was ist möglich? 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; }

(6/7)

PrintCSS – Was ist möglich? Druck-Spezifika

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

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

(7/7)

PrintCSS – Was ist möglich? → und vieles mehr …

PrintCSS in der Praxis Was braucht man (optimalerweise) noch? CSS-Präprozessor (z.B. Less, Sass, …)

Exkurs/Demo Less-CSS

Showcase »Droemer Knaur« Projektbeschreibung

Anforderung: kostengünstige, automatisierte PDF’s von E-BookOnly-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 1 rudimentäre XSLTTranformation (für Inhaltsverzeichnisse und Kolumnentitel) Ergebnis: ca. 75 PoD-Titel Herbst ‘15 – Winter ‘16

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 Kann mit Selfpublishing-Plattformen mithalten, bleibt dadurch für junge Autoren attraktiv 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 PDF’s (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 2 Reihenlayouts (CSS) und XSLT-Tranformationen (für Inhaltsverzeichnisse, Kolumnentitel, Tabellen- und Abbildungsverzeichnis)

Showcase »Narr Verlag« Demo

Showcase »Narr Verlag« Demo

Showcase »Bund Verlag« Projektbeschreibung

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

Showcase »Bund Verlag« Demo

PrintCSS in der Praxis PIs zur Umbruchsteuerung Vollautomatischer Satz? Ja gerne, aber… Eigenentwicklung im parsX-Framework: PrintCSS-PI’s Processing Instructions zum manuellen Eingriff in das Satzbild Basiert auf einer Kombination aus XSLT und CSS

PrintCSS in der Praxis PIs zur Umbruchsteuerung 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



PrintCSS in der Praxis PIs zur Umbruchsteuerung                 »Hast du bedacht,  dass es nicht immer gut ist, wenn Wünsche wirklich wahr   werden?«  

 

 

 

 

 

 

Grenzen und Potenzial

(1/2)

Grenzen

(Noch) kein WYSIWYG-Editor vorhanden Bildplatzierung teilweise schwierig Debugging nur durch erneutes Rendering Teilweise immernoch XSLT- oder JavaScript-Eingriffe notwendig Generierte Inhalte (Index, Inhaltsverzeichnis, etc.) Typographische Feinjustierung Bildworkflow und Color Management

Grenzen und Potenzial

(2/2)

Potenzial

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

Fazit Keine Verdrängung des klassischen Auflagensatzes Chance für neue (automatisierte) Produktformen individualisierte/personalisierte Produkte Previews & Leseproben (Satzfahnen, Umfangschätzung, etc.)

PrintCSS in der Praxis Lessons learned (1/3) Empfehlung: Verwendung eines CSS-Präprozessors (LESS, Sass, …) Entscheidung für einen Renderer Eignet sich das Projekt überhaupt für PrintCSS? Unterschiedliches Rendering bei gleichem CSS mit verschiedenen Renderern → https://print-css.rocks/compliance.html Noch recht viele proprietäre CSS-Erweiterungen Notwendiges 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.)

PrintCSS in der Praxis Lessons learned (2/3) Grundlinienraster Mit Antenna House zwar möglich, man braucht aber SEHR starke Nerven Probleme, wenn zu viele Umbruch-Regeln aufeinander treffen kann zu unerwünschten Rendering-Ergebnissen führen manueller Eingriff und erneutes Rendering notwendig kein Ausschuß der Seite wie bspw. in InDesign mgl.

PrintCSS in der Praxis Lessons learned (3/3) Wichtig: Rege Kommunikation mit Renderer-Hersteller v.a. wegen Bugreports i.d.R. schnelle Hilfe und Fixes Worttrennungen und Sprachwechsel Auswahl der Trennbibliothek wichtig Erweiterung der Bibliothek manuell möglich, aber aufwändig und pflegebedürftig da auf Verlag zugeschnitten Umgang mit Sprachwechseln schwierig -> Tagging?

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

Christin Götz / Tobias Fischer, pagina GmbH, Tübingen [email protected] tobias.fi[email protected] /

@tobias_fischer

Leseliste Relevante W3C-Standards 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/

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

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