PrintCSS in der Praxis

20.03.2019 / publishing and printing Forum

Christin Sandmann-Götz


[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- 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
    • Wird offiziell nicht mehr weiterentwickelt
    • Datentransformation sind zwingend notwendig

  • HTML/XML + CSS: Einfache Syntax, einfach in der Anwendung
    • Viele Anwender die HTML und CSS beherrschen
    • Idealfall: Keine Datentransformation notwendig
    • Lässt sich meist nahtlos in Verlagsworkflows integrieren

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

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

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








CSS-Renderer

HTML only-Renderer








PrintCSS – Die Spezifikation(en)

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, …)

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/

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, 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 <?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?>

PIs zur Umbruchsteuerung

parsX-PrintCSS-PIs - Überblick

Satzbefehl PI
Übersatz erlauben <?printcss ue?>
Schriftlaufweite vergrößern (Spationieren) <?printcss lw+5?>
Schriftlaufweite verkleinern (Unterschneiden) <?printcss lw-5?>
Wortabstand vergrößern <?printcss wa+10?>
Wortabstand verkleinern <?printcss wa-10?>
Rendering an bestimmter Stelle abbrechen <?printcss stopRenderingHere?>













PIs zur Umbruchsteuerung

parsX-PrintCSS-PIs - Demo

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

							













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

Weitere Empfehlungen:














Leseliste (2/2)