PrintCSS

in der Praxis

07.12.2016 / #XUGS15 – XML User Group Stuttgart

Christin Götz / Tobias Fischer ( @tobias_fischer)


[Leertaste für nächste Folie] [PDF-Download]

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 XSL-FO-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 XSL-FO-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

PrintCSS – Die Spezifikation

CSS Paged Media Module






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 <verweis intern="#kap4-4"/>
							

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?

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

Exkurs/Demo

Less-CSS

Showcase "Droemer Knaur"

Projektbeschreibung

  • Anforderung: kostengünstige, automatisierte PDF's 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 1 rudimentäre XSLT-Tranformation (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 <?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 Praxis

PIs zur Umbruchsteuerung

								<abs>»Hast du bedacht,<?printcss nz?>
dass es nicht immer gut ist, wenn Wünsche wirklich wahr 
werden?«</abs>
							

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

christin.goetz@pagina-tuebingen.de
tobias.fischer@pagina-tuebingen.de / @tobias_fischer

Leseliste

Relevante W3C-Standards

Weitere Empfehlungen: