SATZ-AUTOMATION AUS XMLXML - PRINTCSS - MÖGLICHKEITEN UND GRENZEN 24.01.2018 / XML USER GROUP BERLIN (#XUGBER) - PAGINA GMBH

Die Seite wird erstellt Haimo-Haio Wunderlich

Gesundheit und Fitness

Deutsch

Like
Teilen
Einbetten
Vollbild
Folien
HTML Herunterladen
PDF Herunterladen
Missbrauch

←

WEITER LESEN

→

Transkription von Seiteninhalten

Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten

SATZ-AUTOMATION AUS XMLXML - PRINTCSS - MÖGLICHKEITEN UND GRENZEN 24.01.2018 / XML USER GROUP BERLIN (#XUGBER) - PAGINA GMBH

Satz-Automation aus
XML
PrintCSS – Möglichkeiten und Grenzen

24.01.2018 / XML User Group Berlin (#XUGBER)

Christin Sandmann-Götz

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
    Wird nicht mehr ofﬁziell weiterentwickelt                 invest in CSS, not XSL-FO,
                                                              these days«         LIAM QUIN, W3C
    Datentransformation zwingend notwendig

HTML/XML + CSS: Sprache des Web, einfacher in der Anwendung   »3 mal so schnell wie
   Viele Anwender beherrschen bereits HTML und CSS            XSL-FO« [Lernkurve & Layouterstellung]
                                                                                 NELLIE MCKESSON, O’Reilly
   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 ofﬁzieller 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 Verlagsworkﬂows 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
  Kostenpﬂichtige Commandline-Version

PrintCSS – Die Speziﬁkation
CSS Paged Media Module

  Paged Media Module Level 3
      Working Draft (Stand: 14.03.2013)
      Editor’s Draft (Stand 09.11.2017)

  Generated Content for Paged Media Module
      Working Draft (Stand: 13.05.2014)
      Editor’s Draft (Stand 09.11.2017)

  Fragmentation Module Level 3
      Candidate Recommendation (Stand: 09.02.2017)
      Editor’s Draft (Stand 09.11.2017)

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
Deﬁnition 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 

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-Speziﬁka

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

Auﬂösung von Abbildungen
abbildung {
  image-resolution: 300dpi;
}

PrintCSS – Was ist möglich?

→ und vieles mehr …

PrintCSS in der Praxis
Was braucht man (optimalerweise) noch
                                 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.
                                I   Z   . Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow
                                                           https://t3n.de/news/besseres-css-mit-less-488092/

Weblinks:
 lesscss.org
 lesscss.de

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 Detailtypograﬁe 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 – ConﬁgSetting »modern«

Showcase »Narr Verlag«
Demo – Narr – ConﬁgSetting »klassisch«

Showcase »Narr Verlag«
Demo – Narr – ConﬁgSetting »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                        
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

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

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
  Bildworkﬂow und Color Management

Grenzen und Potenzial                         (2/2)
Potenzial

  Automatisierung in Digital First Workﬂows
  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 Auﬂagensatzes
 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

 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/

 CRAMER, DAVE; HYDE, ADAM. Paged Media
 https://www.pagedmedia.org/

 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

Sie können auch lesen