Print & CSS

Automatisierte Printlayouts
mit Webtechnologien


20.11.2015 / Markupforum Stuttgart

Tobias Fischer / @tobias_fischer


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

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?

PDF mit Webtechnologien

Übersicht (ernstzunehmender) CSS-Renderer

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-Book-First/-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 XSLT-Tranformation (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

Vielen Dank für Ihre Aufmerksamkeit!

Fragen? Anregungen?


Tobias Fischer / pagina GmbH, Tübingen (www.pagina-online.de)

tobias.fischer@pagina-tuebingen.de / @tobias_fischer

Leseliste

W3C CSS-Standards

Weitere Empfehlungen: