Satz-Automation ausSatz-Automation ausXMLXMLPrintCSS – Möglichkeiten und GrenzenPrintCSS – Möglichkeiten und Grenzen

24.01.2018 / XML User Group Berlin (#XUGBER)

Christin Sandmann-Götz

Christin Sandmann-GötzChristin Sandmann-Götz

Studium:Buch- und Medienproduktion (B. Eng., HTWK Leipzig)

Medienmanagement (M. Eng., HTWK Leipzig)

Schwerpunkt: Electronic und Cross MediaPublishing

pagina GmbH: Content Engineer / XML-Entwickler

XSL-Entwicklung (XML, XSLT and XSD)CSS-Entwicklung (CSS Paged Media/PrintCSS)

Varianten der automatisiertenVarianten der automatisiertenPrint-(PDF-)ErstellungPrint-(PDF-)Erstellung

XML + Satzsystem: Automatisierte Verarbeitung von XML-Daten in InDesign, 3B2, Miles Oasys …

Programmierkenntnisse notwendigTeilweise mit WYSIWYG-Layoutmodus

XSL-FO: Seitenbeschreibungssprache in komplexer XML-Syntax

Wird nicht mehr offiziell weiterentwickeltDatentransformation zwingend notwendig

HTML/XML + CSS: Sprache des Web, einfacher in der Anwendung

Viele Anwender beherrschen bereits HTML und CSSIdealfall: Keine Datentransformation notwendig

»The answer is probably toinvest in CSS, not XSL-FO,these days« LIAM QUIN, W3C

»3 mal so schnell wie XSL-FO« [Lernkurve & Layouterstellung]

NELLIE MCKESSON, O’Reilly

Varianten der automatisiertenVarianten der automatisiertenPrint-(PDF-)ErstellungPrint-(PDF-)ErstellungWarum CSS an Stelle von XSL-FO für die Print-Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung?(PDF-)Erstellung?

CSS ist offizieller W3C-Nachfolger des XSL-FO-Standards für seitenbasiertes Rendering aus XML-DatenW3C positioniert CSS als universelle, crossmediale Layoutsprache für strukturierte Daten»one language to rule them all«

CSS = Sprache des Web (einfache Syntax, einfach in der Anwendung, viele Entwickler die CSS beherrschen, …)Lässt sich meist nahtlos in Verlagsworkflows integrieren

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

PrintCSS in der PraxisPrintCSS in der PraxisWas braucht man?Was braucht man?

HTML oder XML als DatenbasisCSS als LayoutspracheRenderer zur Erstellung der PDF-Binärdatei

CSS-RendererCSS-RendererÜbersicht (ernstzunehmender) CSS-RendererÜbersicht (ernstzunehmender) CSS-Renderer

Prince XML (XML+HTML) | Kosten: ab $495Antenna House (XML+HTML) | Kosten: ab $1,250.00PDFreactor (HTML only) | Kosten: ab $2,950.00Callas pdfChip (HTML only) Kosten: ab 5.000€

Website Beispiele

Website Beispiele

Website Beispiele

Website

Vivliostyle (HTML only) | Kostenlos für Einsatz im Browser Kostenpflichtige Commandline-Version

Website Beispiele

PrintCSS – Die SpezifikationPrintCSS – Die SpezifikationCSS Paged Media ModuleCSS Paged Media Module

Paged Media Module Level 3 (Stand: 14.03.2013)

(Stand 09.11.2017)

Generated Content for Paged Media Module (Stand: 13.05.2014)

(Stand 09.11.2017)

Fragmentation Module Level 3 (Stand: 09.02.2017)

(Stand 09.11.2017)

Working DraftEditor’s Draft

Working DraftEditor’s Draft

Candidate RecommendationEditor’s Draft

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

SeitenformatSeitenformat

Satzspiegel und StegeSatzspiegel und Stege

@page {size: breite hoehe;}

@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? PrintCSS – Was ist möglich? (2/7)(2/7)SeitenformatierungSeitenformatierung

MusterseitenMusterseiten

Definition mit @page:

Zuweisung über page:

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

kapitel { page: teil; ... }

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

SeitenbereicheSeitenbereiche

SeitenzahlenSeitenzahlen

KolumnentitelKolumnentitel

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

content: counter(page);

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

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

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

Fußnote positionierenFußnote positionieren

Seitenbereich für FußnotentextSeitenbereich für Fußnotentext

Fußnotenzähler und -markerFußnotenzähler und -marker

fussnote {float: footnote;}

@page { @footnote {...} }

::footnote-call { content: counter(footnote); font-variant-position: super; } ::footnote-marker { content: counter(footnote); }

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

XMLXML

CSSCSS

ErgebnisErgebnis

Text <verweis intern="#kap4-4"/>

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

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

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

SeitenumbruchSeitenumbruch

Hurenkinder und SchusterjungenHurenkinder und Schusterjungen

SilbentrennungSilbentrennung

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

abs { widows: 2; orphans: 2; }

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

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

CMYK-FarbenCMYK-Farben

Auflösung von AbbildungenAuflösung von Abbildungen

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

abbildung { image-resolution: 300dpi; }

PrintCSS – Was ist möglich?PrintCSS – Was ist möglich?

→ und vieles mehr …

PrintCSS in der PraxisPrintCSS in der PraxisWas braucht man (optimalerweise) Was braucht man (optimalerweise) nochnoch??

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

Exkurs und DemoExkurs und DemoLess-CSSLess-CSS

I��� Z�����. Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow

Less ist eine dynamische Stylesheet-Sprache, die die Fähigkeitenvon CSS mit Variablen, Mixins, Operationen und Funktionenerweitert. Somit ist u. a. die Vermeidung von Code-Wiederholungen möglich, das CSS strukturierter sowie die Pflegeund Anpassung des Codes einfacher – Durch die Nutzung vonLess ist das Schrieben von CSS effizienter. Da Less eineObermenge von CSS ist, ist CSS-Code gleichzeitig auch gültigerLess-Code.

https://t3n.de/news/besseres-css-mit-less-488092/

Weblinks:lesscss.orglesscss.de

Showcase »Droemer Knaur«Showcase »Droemer Knaur«ProjektbeschreibungProjektbeschreibung

Anforderung: kostengünstige, automatisierte PDF’s von E-Book-Only-TitelnAusgangsdaten: auskorrigiertes -XML der E-Book-ProduktionLösung: PrintCSS-Rendering mit Antenna House in Aufwand: 3 AT für 4 Reihenlayouts (CSS) und eine XSLT-Tranformation (für Inhaltsverzeichnisse und Kolumnentitel)Ergebnis: ca. 152 PoD-Titel von Herbst ‘15 – Frühjahr ‘18 mitPrintCSS produziert

parsXparsX

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

Showcase »Droemer Knaur«Showcase »Droemer Knaur«ProjektbeschreibungProjektbeschreibung

Bewusste Entscheidung gegen XSL-FOEndprodukt misst sich bewusst nicht an InDesign-SatzKompromisslösung was Detailtypografie betrifft, aber kein fauler Kompromiss

Showcase »Droemer Knaur«Showcase »Droemer Knaur«Vorteile für den VerlagVorteile für den Verlag

Initialkosten schnell amortisiert, sehr geringe laufendeProduktionskostenKann mit Selfpublishing-Plattformen mithalten, bleibt dadurch fürjunge Autoren attraktivHerstellung mit CSS-KnowHow kann eigene Reihenlayouts erstellenoder bestehende erweiternKann schnell neue (Produkt-)ideen testen → z. B. PoD-Titel als Großdruck → z. B. Lektoratsausdruck

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

Showcase »Droemer Knaur«Showcase »Droemer Knaur«parsX-Demo – LektoratsausdruckparsX-Demo – Lektoratsausdruck

Showcase »Narr Verlag«Showcase »Narr Verlag«ProjektbeschreibungProjektbeschreibung

Anforderung: automatisierte PDF’s (Druck- und E-PDF) vonDissertationenAusgangsdaten: konvertiertes und auskorrigiertes -XML ausWord-DatenLösung: PrintCSS-Rendering mit Antenna House in Umsetzung: zurzeit 8 Reihenlayouts (CSS) und XSLT-Tranformationen(u. a. für Inhaltsverzeichnisse, Kolumnentitel, Tabellen- undAbbildungsverzeichnis)

parsX

parsX

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

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

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

Showcase »Bund Verlag«Showcase »Bund Verlag«ProjektbeschreibungProjektbeschreibung

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

sitefusion

Showcase »Bund Verlag«Showcase »Bund Verlag«Demo – Bund – BetrVGDemo – Bund – BetrVG

Showcase »S. Fischer Verlag«Showcase »S. Fischer Verlag«ProjektbeschreibungProjektbeschreibung

Anforderung: Rendering von PDF-Füllanzeigen für Printtitel ausnormalen XML-Daten für E-Book/Print mit PrinceXMLAusgangsdaten: -XMLLösung: PrintCSS-Rendering mit PrinceXML in Aufwand: 1 ATErgebnis: Start der Produktion im Jan 2018

parsXparsX

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

Showcase »IUBH«Showcase »IUBH«ProjektbeschreibungProjektbeschreibung

Anforderung: vollautomatische Produktion aus einemRedaktionssystem mit medienneutraler Datenhaltung der Lerninhalte für Zweitverwertung in App, Moodle, etc.Ausgangsdaten: XML-Daten nach IUBH-SchemaLösung: PrintCSS-Rendering mit AntennaHouse ausRedaktionssystemAufwand: 10 AT

Showcase »IUBH«Showcase »IUBH«Demo – IUBH – StudienskriptDemo – IUBH – Studienskript

PrintCSS in der PraxisPrintCSS in der PraxisPIs zur UmbruchsteuerungPIs zur Umbruchsteuerung

Vollautomatischer Satz? Ja gerne, aber…Eigenentwicklung im parsX-Framework: PrintCSS-PI’sProcessing Instructions zum manuellen Eingriff in dasSatzbildBasiert auf einer Kombination aus XSLT und CSS

PrintCSS in der PraxisPrintCSS in der PraxisPIs zur UmbruchsteuerungPIs zur Umbruchsteuerung

Satzbefehl PI

Umbruch auf neue Seite <?printcss ns?>

Umbruch auf neue rechte Seite <?printcss nsr?>

Umbruch auf neue linke Seite <?printcss nsl?>

Umbruch in neue Spalte <?printcss nsp?>

Zeilenwechsel <?printcss nz?>

Zeilenwechsel mit Trennstrich <?printcss nz-?>

Zeilenwechsel, austreibend <?printcss nza?>

Zeilenwechsel, austreibend, mit Trennstrich <?printcss nza-?>

Trennfuge <?printcss tf?>

Trennverbot <?printcss tv?>

Leerzeile <?printcss lz?>

Halbe Leerzeile <?printcss lzh?>

PrintCSS in der PraxisPrintCSS in der PraxisPIs zur UmbruchsteuerungPIs zur Umbruchsteuerung

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

Grenzen und Potenzial Grenzen und Potenzial (1/2)(1/2)GrenzenGrenzen

(Noch) kein WYSIWYG-Editor vorhandenBildplatzierung teilweise schwierigDebugging nur durch erneutes Rendering

Teilweise immernoch XSLT- oder JavaScript-Eingriffe notwendigGenerierte Inhalte (Index, Inhaltsverzeichnis, etc.)

Typographische FeinjustierungBildworkflow und Color Management

Grenzen und Potenzial Grenzen und Potenzial (2/2)(2/2)PotenzialPotenzial

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

FazitFazit

Keine Verdrängung des klassischen AuflagensatzesChance für

neue (automatisierte) Produktformenindividualisierte/personalisierte ProduktePreviews & Leseproben (Satzfahnen,Umfangschätzung, etc.)

PrintCSS in der PraxisPrintCSS in der PraxisLessons learnedLessons learned

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 verschiedenenRenderern → 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ürgenerierte Inhalte wie Index, Inhaltsverzeichnis, etc.)

https://print-css.rocks/compliance.html

Vielen Dank für IhreVielen Dank für IhreAufmerksamkeit!Aufmerksamkeit!

Fragen? Anregungen?

Christin Sandmann-Götz, pagina GmbH, Tübingen

christin.sandmann-goetz@pagina.gmbh

LeselisteLeselisteRelevante W3C-Standards

Paged Media Module Level 3 CSS Generated Content for Paged Media Module CSS Fragmentation Module Level 3

Weitere Empfehlungen:

ANDREW, RACHEL. Designing For Print With CSS

CRAMER, DAVE; HYDE, ADAM. Paged Media

GÖTZ, CHRISTIN. PrintCSS. Das CSS paged media Modul. Grundlagen und Referenz

KLEINFELD, SANDERS. The Case for Authoring and Producing Books in (X)HTML5.

KLEINFELD, SANDERS. HTML5 is the Future of Book Authorship

MCKESSON, NELLIE. Building Books with CSS3.

http://www.w3.org/TR/css3-page/

http://www.w3.org/TR/css3-gcpm/

http://www.w3.org/TR/css3-break/

http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

https://www.pagedmedia.org/

http://www.pagina.gmbh/unternehmen/publikationen/printcss/

http://balisage.net/Proceedings/vol10/print/Kleinfeld01/BalisageVol10-Kleinfeld01.html

http://radar.oreilly.com/2013/09/html5-is-the-future-of-book-authorship.html

http://alistapart.com/article/building-books-with-css3