Automatisierte Printlayouts mit Webtechnologien

PRINT & CSS
Automatisierte Printlayouts
mit Webtechnologien
20.11.2015 / Markupforum Stuttgart
Tobias Fischer /
@tobias_fischer
Tobias Fischer
Studium »Druck- und Medientechnologie«
an der Hochschule der Medien in Stuttgart
Schwerpunkt: CrossMedia-Publishing
pagina GmbH:
Produktmanagement »parsX« parsx.de
XML-Workflows
E-Book-Automation
Anwendungsentwicklung
Digital Publishing and the Web
The vision for Portable Web
Publications, put forward by experts of
IDPF and W3C, is that portable
documents become fully native
citizens of the Open Web Platform.
The Open Web Technology Stack
Status quo Webtechnologien
HTML 5 mit semantischen Strukturen eignet sich
hervorragend zur Auszeichnung von Content
HTMLBook als Schema-Subset für Bücher
→ Bereits vollwertige Datenbasis für EPUB, Mobi, Apps,
Slides, etc.
Status quo Webtechnologien
JavaScript stark auf dem Vormarsch
Früher »nur« Skripting im Web
Heute vollwertige Programmiersprache
→ App-Frameworks (Mobile & Desktop), Interaktivität in
E-Books, Web-Frontends & Backends, etc.
Status quo Webtechnologien
CSS 3 wird stark ausgebaut
Derzeit ca. 80 Spezifikationen für Standards und
Module (viele davon noch Working Drafts)
Offizieller W3C-Nachfolger für XSL-FO
Immer mehr Module für Textlayout und Typo
(Ligaturen, Textumfluss, Fonts, Layouts, etc.)
→ Layoutsprache für Websites, E-Books, Apps, etc.
Vision vs. Status quo
Technologie Stack:
Shift in Richtung Webtechnologien deutlich spürbar
Cloud-Dienste, Browser-based Editing, etc.
Produkte:
Browser-based Reading im Trend
E-Books oder Magazine im Browser sind somit schon fully native
citizens of the Open Web Platform
Fixed-Layout E-Books als Open Web-Alternative zu PDF
Vision vs. Status quo
→ Die W3C-Vision ist nicht unrealistisch sondern schon
ein gutes Stück gediehen
→ Aber was ist mit Print?
Varianten der automatisierten
Print-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
LIAM QUIN, W3C: »The answer is probably to invest in CSS, not XSL-FO, these days«
Wird nicht mehr offiziell weiterentwickelt
Datentransformation zwingend notwendig
HTML/XML + CSS
Sprache des Web, einfacher in der Anwendung.
NELLIE MCKESSON, O’REILLY: »3 mal so schnell wie XSL-FO« [Lernkurve bzw. Layouterstellung]
Viele Anwender beherrschen bereits HTML und CSS
Idealfall: Keine Datentransformation notwendig
PDF-Erstellung mit
Webtechnologien?
Gar nicht so abwegig wie es sich zunächst anhört!
PDF mit Webtechnologien
Warum?
OpenSource-Technologien mit breiter Anwenderschaft
CSS ist offizieller Nachfolger der XSL-FO-Technologie
für Satzautomation
Lässt sich meist nahtlos in Verlagsworkflows
integrieren
PDF mit Webtechnologien
Was braucht man?
HTML oder XML als Datenbasis
CSS als Layoutsprache
Einen Renderer zur Erstellung der PDF-Binärdatei
PDF mit Webtechnologien
Was gibt es schon OpenSource?
HTMLBook – »Let’s write books in HTML!«
Website | Beispiel-Dokument
PubCSS – Formatting Academic Publications in HTML & CSS
Website | Beispiel-Dokument
Vivliostyle – CSS Typesetting im Browser
Website | Beispiele
Haufenweise WYSIWYG-Editoren falls HTML als Datenbasis
verwendet wird…
PDF mit Webtechnologien
Übersicht (ernstzunehmender) CSS-Renderer
Prince XML http://www.princexml.com
Kosten: Ab $495
Antenna House http://www.antennahouse.com
Kosten: Ab $1,250
PDFreactor http://www.pdfreactor.com/
Kosten: Ab $2,950
Callas pdfChip https://www.callassoftware.com/de/produkte/pdfchip
Kosten: Ab €5.000
Vivliostyle http://vivliostyle.com/en/
Kostenlos für Einsatz im Browser
Kostenpflichtige Commandline-Version geplant
PDF mit Webtechnologien
Funktioniert das wirklich?
Ja! (mit kleinen Einschränkungen…)
Überblick: 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;
}
Überblick: 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;
...
}
Überblick: 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);
Überblick: 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);
}
Überblick: Was ist möglich? (5/7)
Querverweise
HTML:
Text <verweis verweis-intern="#kap4-4"/>
CSS:
verweis {
content: '(siehe Kapitel »',
/*Inhaltsverweis*/
target-text(
attr(verweis-intern),
content()
) '«, S. '‚
/*Seitenverweis*/
target-counter(
attr(verweis-intern),
page
) ')';
}
Ergebnis:
Text (siehe Kapitel »Querverweise«, S. 85)
Überblick: 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;
}
Überblick: 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;
}
Überblick: Was ist möglich?
→ und vieles mehr…
Showcase »Droemer Knaur«
Anforderung: kostengünstige, automatisierte PDF’s von E-BookFirst/-Only-Titeln
Ausgangsdaten: auskorrigiertes parsX-XML der E-Book-Produktion
Lösung: PrintCSS-Rendering mit Antenna House
Aufwand: 3 AT für 4 Reihenlayouts (CSS) und 1 rudimentäre XSLTTranformation (für Inhaltsverzeichnisse und Kolumnentitel)
Ergebnis: 13 erste PoD-Titel im Herbstprogramm, Verlag ist
Demo
Showcase »Droemer Knaur«
Bewusste Entscheidung gegen XSL-FO
Endprodukt misst sich bewusst nicht an InDesign-Satz
Kompromisslösung was Detailtypografie betrifft, aber
kein fauler Kompromiss
→ Bücher wären sonst nie erschienen
→ Umsätze wären sonst nie generiert worden
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 Produktideen testen
→ z.B. gesamtes Verlagsprogramm im Großdruck per PoD verfügbar
Weitere Demos
Fachbuch-Umsetzung
Less-CSS-Integration
Grenzen & 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 & Potenzial (2/2)
Potenzial
Automatisierung in Digital First Workflows
Trennung von Content (XML) 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
ToDo’s
W3C ToDo-Liste: http://www.w3.org/Style/2013/paged-media-tasks
Mehr OpenSource-Initiativen
Invited-Experts-Meeting der CSS-Working-Group
geplant
Vielen Dank für Ihre
Aufmerksamkeit!
Fragen? Anregungen?
Tobias Fischer / pagina GmbH, Tübingen (www.pagina-online.de)
[email protected] /
@tobias_fischer
Leseliste
W3C CSS-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/
GÖTZ, CHRISTIN. PrintCSS. Das CSS paged media Modul. Grundlagen und Referenz
http://www.pagina-online.de/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