Satz-Automation
aus XML

PrintCSS - Möglichkeiten und Grenzen

24.01.2018 / XML User Group Berlin (#XUGBER)

Christin Sandmann-Götz (pagina GmbH)


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

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-Entwickler
    • XSL-Entwicklung (XML, XSLT and XSD)
    • CSS-Entwicklung (CSS Paged Media/PrintCSS)


Varianten der automatisierten Print-(PDF-)Erstellung

  • XML + Satzsystem: Automatisierte Verarbeitung von XML-Daten
    in InDesign, 3B2, Miles Oasys …
    • Programmierkenntnisse notwendig
    • Teilweise mit WYSIWYG-Layoutmodus

  • XSL-FO: Seitenbeschreibungssprache in komplexer XML-Syntax

    »The answer is probably to invest in CSS, not XSL-FO, these days«Liam Quin, W3C

    • Wird nicht mehr offiziell weiterentwickelt
    • Datentransformation zwingend notwendig

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

    »3 mal so schnell wie
    XSL-FO«
    [Lernkurve & Layouterstellung]Nellie McKesson, O’Reilly

    • Viele Anwender beherrschen bereits HTML und CSS
    • Idealfall: Keine Datentransformation notwendig

Varianten der automatisierten Print-(PDF-)Erstellung

Warum CSS an Stelle von XSL-FO für die Print-(PDF-)Erstellung?

  • 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"
  • 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?!

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) Website | Beispiele
    Kosten: ab $495
  • Antenna House (XML+HTML) Website | Beispiele
    Kosten: ab $1,250.00
  • PDFreactor (HTML only) Website | Beispiele
    Kosten: ab $2,950.00
  • Callas pdfChip (HTML only) Website
    Kosten: ab 5.000€
  • Vivliostyle (HTML only) Website | Beispiele
    Kostenlos für Einsatz im Browser
    Kostenpflichtige Commandline-Version

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 und Demo

Less-CSS

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.

Ilja Zaglov. Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow
https://t3n.de/news/besseres-css-mit-less-488092/

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 eine XSLT-Tranformation (für Inhaltsverzeichnisse und Kolumnentitel)
  • Ergebnis: ca. 152 PoD-Titel von Herbst '15 - Frühjahr '18 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
  • 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 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-Systems
  • 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 und Kustode, 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 PrinceXML
  • Ausgangsdaten: parsX-XML
  • Lösung: PrintCSS-Rendering mit PrinceXML 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 AntennaHouse aus Redaktionssystem
  • Aufwand: 10 AT

Showcase "IUBH"

Demo - IUBH - Studienskript

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>... 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 [...]</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

  • 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.)

Vielen Dank für Ihre Aufmerksamkeit!

Fragen? Anregungen?


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

christin.sandmann-goetz@pagina.gmbh

Leseliste

Relevante W3C-Standards

Weitere Empfehlungen: