/ publishing and printing Forum. Christin Sandmann-Götz

Transkript

1 PrintCSS in der Praxis / publishing and printing Forum Christin Sandmann-Götz

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

3

4 Warum CSS anstelle von Satzsystemen oder XSL-FO für die Print-(PDF-)Erstellung nutzen?

5 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

6 Warum CSS also nicht auch für die Erstellung von PDFs nutzen?!

7 PrintCSS in der Praxis

8 PrintCSS in der Praxis Was braucht man? HTML oder XML als Datenbasis CSS als Layoutsprache Renderer zur Erstellung der PDF-Binärdatei

9 CSS-Renderer XML + HTML-Renderer Prince oder Prince for Books Kosten: ab $495 Website Beispiele Website Beispiele Antenna House Website Kosten: ab $1, Beispiele

10 CSS-Renderer HTML only-renderer PDFreactor Website Kosten: ab Callas pdfchip Kosten: ab Website Beispiele VersaType bzw. Vivliostyle (Open Source Project von VersaType) Website Website Beispiele

11 PrintCSS Die Spezifikation(en) CSS Paged Media Module CSS Paged Media Module Level 3 Working Draft Aufbau einer Seite Festlegung und Gestaltung der Seite CSS Generated Content for Paged Media Module Working Draft Editor s Draft Erstellung und Formatierung generierter Inhalte, wie Kolumnentitel und Querverweise CSS Fragmentation Module Level 3 Candidate Recommendation Definition von Seiten- und Spaltenumbrüchen Editor s Draft

12

13 PrintCSS Was ist möglich? (1/7) Seitenformatierung {size: breite hoehe;} Satzspiegel und { margin: kopfsteg bund-/außensteg fußsteg; { margin-right: bundsteg; margin-left: außensteg; { margin-right: außensteg; margin-left: bundsteg; }

14 PrintCSS Was ist möglich? (2/7) Seitenformatierung Musterseiten teil { size: breite hoehe; margin: kopfsteg bund-/außensteg fußsteg;... } Zuweisung über page: kapitel { page: teil;... }

15 PrintCSS Was ist möglich? (3/7) Seitenformatierung teil:left {... {... } } Seitenzahlen content: counter(page); Kolumnentitel /*Initialisieren*/ string-set: kolumne content(); /*Ausgeben*/ content: string(kolumne);

16 PrintCSS Was ist möglich? (4/7) Fußnoten Fußnote positionieren fussnote {float: footnote;} Seitenbereich für {...} } Fußnotenzähler und -marker ::footnote-call { content: counter(footnote); font-variant-position: super; } ::footnote-marker { content: counter(footnote); }

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

18 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; }

19 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; }

20 PrintCSS Was ist möglich? und vieles mehr

21

22 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. I Z. Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow Weblinks: lesscss.org lesscss.de

23 PrintCSS für die Praxis aus der Praxis

24 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

25

26 Showcase»Droemer Knaur«Demo Droemer Knaur-PoD-Titel

27 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

28

29 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

30

31 Showcase»Droemer Knaur«parsX-Demo Großdruck

32 Showcase»Droemer Knaur«parsX-Demo Lektoratsausdruck

33 Showcase»Narr Verlag«Projektbeschreibung Anforderung: automatisierte PDFs (Druck- und E-PDF) von Dissertationen Ausgangsdaten: konvertiertes und auskorrigiertes Word-Daten Lösung: PrintCSS-Rendering mit Antenna House in parsx parsx-xml aus Umsetzung: zurzeit 8 Reihenlayouts (CSS) und XSLT-Tranformationen (u. a. für Inhaltsverzeichnisse, Kolumnentitel, Tabellen- und Abbildungsverzeichnis)

34

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

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

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

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

39

40 Showcase»Bund Verlag«Demo Bund BetrVG

41 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

42

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

44 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

45

46 Showcase»IUBH«Demo IUBH Studienskript

47 Vollautomatischer Satz? Ja gerne, aber

48 PIs zur Umbruchsteuerung Eigenentwicklung im parsx-framework Processing Instructions zum manuellen Eingriff in das Satzbild Basiert auf einer Kombination aus XSLT und CSS

49

50 PIs zur Umbruchsteuerung parsx-printcss-pis Überblick Satzbefehl 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 PI <?printcss ns?> <?printcss nsr?> <?printcss nsl?> <?printcss nsp?> <?printcss nz?> <?printcss nz-?> <?printcss nza?> <?printcss nza-?> <?printcss tf?> <?printcss tv?> <?printcss lz?> <?printcss lzh?>

51 PIs zur Umbruchsteuerung parsx-printcss-pis Überblick Satzbefehl Übersatz erlauben Schriftlaufweite vergrößern (Spationieren) Schriftlaufweite verkleinern (Unterschneiden) Wortabstand vergrößern Wortabstand verkleinern Rendering an bestimmter Stelle abbrechen PI <?printcss ue?> <?printcss lw+5?> <?printcss lw-5?> <?printcss wa+10?> <?printcss wa-10?> <?printcss stoprenderinghere?>

52

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

54

55 PrintCSS in der Praxis Lessons Learned

56 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

57

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

59

60 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

61

62 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?!

63 Vielen Dank für Ihre Aufmerksamkeit! Fragen? Anregungen? Christin Sandmann-Götz, pagina GmbH

64 Leseliste (1/2) Relevante W3C-Standards CSS 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 ANTENNA HOUSE. CSS for Paged Media Guide and Samples ANTENNA HOUSE. Introduction to CSS for Paged Media CRAMER, DAVE; HYDE, ADAM. Paged Media GÖTZ, CHRISTIN. PrintCSS. Das CSS paged media Modul. Grundlagen und Referenz

65

66 Leseliste (2/2) JUNG, ANDREAS. PrintCSS/CSS Paged Media (PDF generation from XML and HTML using CSS stylesheets) tutorial and showcase with lessons, tool descriptions and comparions. PDFreactor Antennahouse PrinceXML. 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. PAGEDMEDIA. Paged Media. A blog which advocates for innovative approaches to making books in browsers. YESLOGIC PTY LTD. Prince Convert HTML to PDF with CSS YESLOGIC PTY LTD. Prince Prince for Books

67