SlideShare a Scribd company logo
PrintCSS
A Quick Walkthrough
Andreas Jung (ZOPYX)

info@zopyx.com

www.print-css.rocks
XMLPrague 2020
1 https:!//cutt.ly/jrIh5TI
AGENDA
‣ What is PrintCSS?
‣ Overview and tools
‣ Examples and usecases
‣ print-css.rocks project
‣ Basic and common "PrintCSS" features
‣ Demo time
‣ The missing parts and the bad parts
‣ Q & A
2
ANDREAS JUNG
‣ Master in Computer Science and Electrical Engineering
‣ background in electronic publishing since 1995
‣ freelancer since 2004
‣ large scale content management based on Plone CMS
‣ individual Python software development
‣ conversion workflows and publishing solutions
3
ANDREAS JUNG
‣Produce & Publish -
www.produce-and-publish.com
‣Collaborative content solutions based on Smashdocs -
www.creating-content-together.com
‣XML-Director foundation for XML CMS solutions -
www.xml-director.info
‣PrintCSS tutorial -
www.print-css.rocks
My projects:
4
What is "PrintCSS"?
5
WHAT IS "PRINTCSS"?
‣ "PrintCSS" = XML/HTML + CSS →PDF
‣ Browser "Print" is not "PrintCSS"
‣ "PrintCSS" deals with print specific aspects
‣ "paper" layout information
‣ counters and page numbers
‣ page areas
‣ pagination
‣ footnotes
‣ …
6
PRINTCSS AKA CSS PAGED MEDIA
‣ Draft: CSS Paged Media Module Level 3 (2018)
‣ Draft: CSS Generated Content for Paged Media Module (2014)
‣ Concepts
‣ Content: XML or HTML
‣ Design and layout: Cascading Stylesheets CSS
‣ Rule-based approach for defining all aspects of automatic typesetting
‣ separation between content and styling
‣ CSS Paged Media vs. XSL-FO
‣ easy approachability in general
‣ less complex than XSL-FO (CSS as foundation is common knowledge)
7
"CSS PAGED MEDIA" TOOLS
‣ WeasyPrint
‣ PrinceXML
‣ PDFreactor
‣ Antennahouse
‣ pdfChip
‣ Versatype (ex Vivliostyle)
8
TOOLS - PRICING VS FEATURES
9
TOOLS - PRICING VS FEATURES
Weasy

print
Prince PDFreactor
Antenna-
house
(pdfChip)
Personal

(commercial)
free 495 USD 1.250 USD
Personal

(non commercial)
free free free
Server free
3.800 USD

(∞ CPU?)
2.950 USD

(4 CPU)
5.000 USD

(1st CPU)
5.000 €

- 25.000 €
Server (EDU) free 1.900 USD 2.065 USD
10
Some examples
and use case
11
EXAMPLE: CATALOG PRODUCTION
Source: Bösch Preisliste via PDFreactor 12
EXAMPLE: LAYOUT-ORIENTED PUBLICATION
Source: Konzepte-IS via PDFreactor 13
EXAMPLE: INTERNATIONAL STUDIES
Source: Stiftung Wirtschaft und Politik (SWP) via Antennahouse14
EXAMPLE: DATABASE-DRIVING PUBLICATIONS
Source: EUROPEAN PHARMACOPOEIA via PDFreactor15
‣ vendor-neutral information about "PrintCSS"
‣ information about tools
‣ tested tools:
‣ PrinceXML
‣ Antennahouse
‣ PDFreactor
‣ WeasyPrint
‣ tutorial and lessons
‣ "PrintCSS" related resources
‣ www.print-css.rocks
16
LESSONS
17
CONVERTER RESULTS
18
HTML INPUT
19
CSS INPUT
20
Basic and common
"PrintCSS" features
21
MULTI-COLUMNS AND FOOTNOTES
‣ ✅ multi-column support
‣ ✅ footnote support
‣ footnotes within the
same column
‣ ✅ AH, Prince
‣ 🚫 PDFreactor
22
BASELINE GRID
‣Placement of text within a given grid
‣supported by all tools
‣vendor-specific implementation
23
FLOATS (1/3)
‣ (automatic) moving of block elements (images,
tables, inserts)
‣ within the current page
‣ within the current column set
‣ to the next page
‣ colspan optional
‣ AH: most complete, but complex extension
‣ Prince, PDFreactor: partial support
24
FLOATS (2/3)
25
FLOATS (3/3)
26
IMAGES
‣ Bitmap images: JPEG, PNG, GIF, TIFF
‣ Vector formats: PDF, SVG
‣ Color spaces: RGB, CMYK, ICC profiles
‣ Problems:
‣ auto-placement
‣ automatic (down)-scaling
27
PAGINATION
‣ automatic pagination
‣ pagiation hints through CSS
‣ support for orphans and widows
div.chapter {

page-break-after: always;

}
table {

page-break-inside: avoid;

}
div.chapter {

page-break-after: never;

}
div.chapter {

orphans: 2;

widows: 3;

}
28
FONTS
‣ Support for all common font formats
‣ Opentype
‣ Truetype
‣ Google webfonts
‣ Fonts embedded by default into the PDF
29
RTL, VERTICAL RL, ASIAN CONTENT
‣ General support for right to left
‣ General support for vertical RL (JP/CN)
‣ Special fonts usually required with required code points
30
Demo time
What do you want to see?
31
The missing parts.
The bad parts.
32
THE "STANDARD" (1/2)
‣ the W3C "CSS Paged Media" standard defines the
foundation for "PrintCSS"
‣ standards and specifications are years-old, draft status
‣ status of drafts unclear (unmaintained, work-in-
progress, discontinued?)
‣ many vendor specific extensions (development usually
driven by customer needs)
‣ limited cross-platform compatibility and interoperability
33
THE "STANDARD" (2/2)
‣ conflicting implementations
‣ conflicting interpretations of the "standard"
‣ (missing?) test suite(s)
‣ support of modern/new CSS features
‣ in browsers: fast adaptation
‣ in PrintCSS tools: moving (very) slowly
34
(CONSISTENT) JAVASCRIPT SUPPORT
‣ ✅ PrinceXML and PDFreactor
‣ 🚫 Antennahouse
‣ support only for selected JavaScript modules
‣ missing rendering API for hooking into the rendering process
35
FLEX BLOCK AND GRID SYSTEMS
‣ Flex block:
‣ ✅ PrinceXML and PDFreactor
‣ 🚫 Antennahouse
Source: https://css-tricks.com/
36
🚫 SIDE NOTES
Source: CSS Tricks
‣ Antennahouse: own extension
‣ PDFreactor: CSS + JavaScript
‣ PrinceXML: CSS
‣ 🚫 Challenges:
‣ float to inside/outside
‣ side notes in multi-column
environments
‣ positioning
37
🚫 IMAGE POSITIONING (1/2)
‣ Problem:
‣ an image does not fit on the remaining page or
into the remaining column
‣ avoid blank areas
‣ Solutions:
‣ float image on next page or into next column
‣ scale image down to remaining space in column or
on page
38
🚫 IMAGE POSITIONING (2/2)
!/* Prince !*/

#globe {

width: 100%;

float: column-top next;

column-span: 2;

}
!/* Prince !*/

#globe {

width: 100%;

float: column-top next;

}
39
🚫 FIT TEXT INTO A GIVEN BOX
‣ ✅ PDFreactor: Javascript
‣ ✅ Antennahouse:
-ah-overflow-condense: font-stretch | font-size
| letter-spacing;

‣ 🚫 PrinceXML
40
🚫 ISSUES WITH HYPHENATION
‣ hyphenation quality differs by language and tool
‣ breaking of long words/terms (e.g. URLs) often an issue
‣ no standard for hyphenation exceptions
‣ injecting and maintaining hyphenation hints
(e.g. soft-hyphens) is a pain
41
🚫 ISSUES WITH TABLES
‣ tables split over multiple pages
‣ control over repeating headers and footers
‣ custom table captions ("continued….")
‣ controlling page breaks with row spans
42
🚫 MARGIN BOXES/RUNNING ELEMENTS
‣ page margin boxes:
‣ text only, no HTML
‣ one style per margin box
‣ running elements:
‣ content removed from content area
‣ content place in margin box
‣ content duplication often needed
‣ styling of mixed running elements and
generated content is a major pain
43
🚫 EXCLUSIONS
https://www.w3.org/TR/css3-exclusions (2015)
Source: Vivliostyle
44
🚫 DEVELOPING WITH PRINTCSS
‣ no real development tools
‣ rendering process is a blackbox process
‣ content + styles in, PDF out
but what is happening inside and why?
‣ few tracing options for the mortal PrintCSS developer
‣ usually a lengthy, iterative process
‣ no/little support for introspecting the rendering process
‣ no/little support for influencing the rendering process
besides CSS
45
THE ECOSYSTEM
‣ CSS Paged Media tools:
‣ few commercial tools
‣ even fewer non-commercial, free tools
‣ limited options
‣ in-depth evaluation needed for advanced projects
‣ at one point you need to decide and pick one tool
46
Questions?
47
Thank you!
www.print-css.rocks
www.zopyx.com
Andreas Jung <info@zopyx.com>
48

More Related Content

Similar to PrintCSS workshop XMLPrague 2020

TYPO3 5.0 Experience Concept
TYPO3 5.0 Experience ConceptTYPO3 5.0 Experience Concept
TYPO3 5.0 Experience Concept
Jens Hoffmann
 
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
Henning Jacobs
 
Fork CMS
Fork CMSFork CMS
Fork CMS
Lester Lievens
 
State of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdfState of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdf
Andreas Jung
 
Multi model-databases
Multi model-databasesMulti model-databases
Multi model-databases
ArangoDB Database
 
Multi model-databases
Multi model-databasesMulti model-databases
Multi model-databases
Michael Hackstein
 
Front-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info SessionFront-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info Session
Allison Baum
 
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
Publishing Smarter
 
Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!
Brian Huff
 
Understanding PDF workflows
Understanding PDF workflowsUnderstanding PDF workflows
Understanding PDF workflows
VIGCbe
 
Maintainable theming
Maintainable themingMaintainable theming
Maintainable theming
Wunderkraut
 
Old code doesn't stink - Detroit
Old code doesn't stink - DetroitOld code doesn't stink - Detroit
Old code doesn't stink - Detroit
Martin Gutenbrunner
 
Industrializing Machine learning pipelines
Industrializing Machine learning pipelinesIndustrializing Machine learning pipelines
Industrializing Machine learning pipelines
Germain Tanguy
 
From Zero to DITA in about 60 Minutes
From Zero to DITA in about 60 MinutesFrom Zero to DITA in about 60 Minutes
From Zero to DITA in about 60 Minutes
Publishing Smarter
 
Velocity NY 2018 "The Cloud Native Developer Workflow"
Velocity NY 2018 "The Cloud Native Developer Workflow"Velocity NY 2018 "The Cloud Native Developer Workflow"
Velocity NY 2018 "The Cloud Native Developer Workflow"
Daniel Bryant
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
Jens Grochtdreis
 
Large Scale Production DITA landscape @SAP
Large Scale Production DITA landscape @SAPLarge Scale Production DITA landscape @SAP
Large Scale Production DITA landscape @SAP
Youssef Bennani
 
Python the lingua franca of FEWS
Python the lingua franca of FEWSPython the lingua franca of FEWS
Python the lingua franca of FEWS
Lindsay Millard
 
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
Daniel Bryant
 
Don't you (forget about me) - PHP Meetup Lisboa 2023
Don't you (forget about me) - PHP Meetup Lisboa 2023Don't you (forget about me) - PHP Meetup Lisboa 2023
Don't you (forget about me) - PHP Meetup Lisboa 2023
Bernd Alter
 

Similar to PrintCSS workshop XMLPrague 2020 (20)

TYPO3 5.0 Experience Concept
TYPO3 5.0 Experience ConceptTYPO3 5.0 Experience Concept
TYPO3 5.0 Experience Concept
 
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
Developer Experience at Zalando - Handelsblatt Strategisches IT-Management 2019
 
Fork CMS
Fork CMSFork CMS
Fork CMS
 
State of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdfState of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdf
 
Multi model-databases
Multi model-databasesMulti model-databases
Multi model-databases
 
Multi model-databases
Multi model-databasesMulti model-databases
Multi model-databases
 
Front-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info SessionFront-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info Session
 
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
DITA: From “Do I?” to “Done It!”: An Automotive Case Study that can apply to ...
 
Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!
 
Understanding PDF workflows
Understanding PDF workflowsUnderstanding PDF workflows
Understanding PDF workflows
 
Maintainable theming
Maintainable themingMaintainable theming
Maintainable theming
 
Old code doesn't stink - Detroit
Old code doesn't stink - DetroitOld code doesn't stink - Detroit
Old code doesn't stink - Detroit
 
Industrializing Machine learning pipelines
Industrializing Machine learning pipelinesIndustrializing Machine learning pipelines
Industrializing Machine learning pipelines
 
From Zero to DITA in about 60 Minutes
From Zero to DITA in about 60 MinutesFrom Zero to DITA in about 60 Minutes
From Zero to DITA in about 60 Minutes
 
Velocity NY 2018 "The Cloud Native Developer Workflow"
Velocity NY 2018 "The Cloud Native Developer Workflow"Velocity NY 2018 "The Cloud Native Developer Workflow"
Velocity NY 2018 "The Cloud Native Developer Workflow"
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Large Scale Production DITA landscape @SAP
Large Scale Production DITA landscape @SAPLarge Scale Production DITA landscape @SAP
Large Scale Production DITA landscape @SAP
 
Python the lingua franca of FEWS
Python the lingua franca of FEWSPython the lingua franca of FEWS
Python the lingua franca of FEWS
 
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
 
Don't you (forget about me) - PHP Meetup Lisboa 2023
Don't you (forget about me) - PHP Meetup Lisboa 2023Don't you (forget about me) - PHP Meetup Lisboa 2023
Don't you (forget about me) - PHP Meetup Lisboa 2023
 

More from Andreas Jung

zopyx-fastapi-auth - authentication and authorization for FastAPI
zopyx-fastapi-auth - authentication and authorization for FastAPIzopyx-fastapi-auth - authentication and authorization for FastAPI
zopyx-fastapi-auth - authentication and authorization for FastAPI
Andreas Jung
 
Typesense Plone Integration Plone Conference 2022 Namur
Typesense Plone Integration Plone Conference 2022 NamurTypesense Plone Integration Plone Conference 2022 Namur
Typesense Plone Integration Plone Conference 2022 Namur
Andreas Jung
 
Onkopedia - Plone Tagung 2020 Dresden
Onkopedia - Plone Tagung 2020 DresdenOnkopedia - Plone Tagung 2020 Dresden
Onkopedia - Plone Tagung 2020 Dresden
Andreas Jung
 
Plone 5.2 migration at University Ghent, Belgium
Plone 5.2 migration at University Ghent, BelgiumPlone 5.2 migration at University Ghent, Belgium
Plone 5.2 migration at University Ghent, Belgium
Andreas Jung
 
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel OnkopediaBack to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
Andreas Jung
 
Plone migrations using plone.restapi
Plone migrations using plone.restapiPlone migrations using plone.restapi
Plone migrations using plone.restapi
Andreas Jung
 
Plone Migrationen mit Plone REST API
Plone Migrationen mit Plone REST APIPlone Migrationen mit Plone REST API
Plone Migrationen mit Plone REST API
Andreas Jung
 
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
Andreas Jung
 
Generierung von PDF aus XML/HTML mit PrintCSS
Generierung von PDF aus XML/HTML mit PrintCSSGenerierung von PDF aus XML/HTML mit PrintCSS
Generierung von PDF aus XML/HTML mit PrintCSS
Andreas Jung
 
Creating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCsCreating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCs
Andreas Jung
 
Creating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCsCreating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCs
Andreas Jung
 
The Plone and The Blockchain
The Plone and The BlockchainThe Plone and The Blockchain
The Plone and The Blockchain
Andreas Jung
 
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCsContent Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
Andreas Jung
 
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
Andreas Jung
 
Why we love ArangoDB. The hunt for the right NosQL Database
Why we love ArangoDB. The hunt for the right NosQL DatabaseWhy we love ArangoDB. The hunt for the right NosQL Database
Why we love ArangoDB. The hunt for the right NosQL Database
Andreas Jung
 
XML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.comXML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.com
Andreas Jung
 
PyFilesystem
PyFilesystemPyFilesystem
PyFilesystem
Andreas Jung
 
Building bridges - Plone Conference 2015 Bucharest
Building bridges   - Plone Conference 2015 BucharestBuilding bridges   - Plone Conference 2015 Bucharest
Building bridges - Plone Conference 2015 Bucharest
Andreas Jung
 
CSS Paged Media - A review of tools and techniques
CSS Paged Media - A review of tools and techniquesCSS Paged Media - A review of tools and techniques
CSS Paged Media - A review of tools and techniques
Andreas Jung
 
Why Plone Will Die
Why Plone Will DieWhy Plone Will Die
Why Plone Will Die
Andreas Jung
 

More from Andreas Jung (20)

zopyx-fastapi-auth - authentication and authorization for FastAPI
zopyx-fastapi-auth - authentication and authorization for FastAPIzopyx-fastapi-auth - authentication and authorization for FastAPI
zopyx-fastapi-auth - authentication and authorization for FastAPI
 
Typesense Plone Integration Plone Conference 2022 Namur
Typesense Plone Integration Plone Conference 2022 NamurTypesense Plone Integration Plone Conference 2022 Namur
Typesense Plone Integration Plone Conference 2022 Namur
 
Onkopedia - Plone Tagung 2020 Dresden
Onkopedia - Plone Tagung 2020 DresdenOnkopedia - Plone Tagung 2020 Dresden
Onkopedia - Plone Tagung 2020 Dresden
 
Plone 5.2 migration at University Ghent, Belgium
Plone 5.2 migration at University Ghent, BelgiumPlone 5.2 migration at University Ghent, Belgium
Plone 5.2 migration at University Ghent, Belgium
 
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel OnkopediaBack to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
Back to the future - Plone 5.2 und Python 3 Migration am Beispiel Onkopedia
 
Plone migrations using plone.restapi
Plone migrations using plone.restapiPlone migrations using plone.restapi
Plone migrations using plone.restapi
 
Plone Migrationen mit Plone REST API
Plone Migrationen mit Plone REST APIPlone Migrationen mit Plone REST API
Plone Migrationen mit Plone REST API
 
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
Plone im Einsatz bei der Universität des Saarländes als Shop-System und Gefah...
 
Generierung von PDF aus XML/HTML mit PrintCSS
Generierung von PDF aus XML/HTML mit PrintCSSGenerierung von PDF aus XML/HTML mit PrintCSS
Generierung von PDF aus XML/HTML mit PrintCSS
 
Creating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCsCreating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCs
 
Creating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCsCreating Content Together - Plone Integration with SMASHDOCs
Creating Content Together - Plone Integration with SMASHDOCs
 
The Plone and The Blockchain
The Plone and The BlockchainThe Plone and The Blockchain
The Plone and The Blockchain
 
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCsContent Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
Content Gemeinsam Erstellen: Integration Plone mit SMASHDOCs
 
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
 
Why we love ArangoDB. The hunt for the right NosQL Database
Why we love ArangoDB. The hunt for the right NosQL DatabaseWhy we love ArangoDB. The hunt for the right NosQL Database
Why we love ArangoDB. The hunt for the right NosQL Database
 
XML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.comXML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.com
 
PyFilesystem
PyFilesystemPyFilesystem
PyFilesystem
 
Building bridges - Plone Conference 2015 Bucharest
Building bridges   - Plone Conference 2015 BucharestBuilding bridges   - Plone Conference 2015 Bucharest
Building bridges - Plone Conference 2015 Bucharest
 
CSS Paged Media - A review of tools and techniques
CSS Paged Media - A review of tools and techniquesCSS Paged Media - A review of tools and techniques
CSS Paged Media - A review of tools and techniques
 
Why Plone Will Die
Why Plone Will DieWhy Plone Will Die
Why Plone Will Die
 

Recently uploaded

How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
TaskSprint | Employee Efficiency Software
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
Jersey (CHE-PING) Su
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
Top Chinese Government-backed APT Groups
Top Chinese Government-backed APT GroupsTop Chinese Government-backed APT Groups
Top Chinese Government-backed APT Groups
SOCRadar
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
87tomato
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
OnePlan Solutions
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
Inflectra
 
TEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with YouTEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with You
marcofolio
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
902basic
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
attueb
 

Recently uploaded (20)

How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
Top Chinese Government-backed APT Groups
Top Chinese Government-backed APT GroupsTop Chinese Government-backed APT Groups
Top Chinese Government-backed APT Groups
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
 
TEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with YouTEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with You
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
 

PrintCSS workshop XMLPrague 2020

  • 1. PrintCSS A Quick Walkthrough Andreas Jung (ZOPYX) info@zopyx.com www.print-css.rocks XMLPrague 2020 1 https:!//cutt.ly/jrIh5TI
  • 2. AGENDA ‣ What is PrintCSS? ‣ Overview and tools ‣ Examples and usecases ‣ print-css.rocks project ‣ Basic and common "PrintCSS" features ‣ Demo time ‣ The missing parts and the bad parts ‣ Q & A 2
  • 3. ANDREAS JUNG ‣ Master in Computer Science and Electrical Engineering ‣ background in electronic publishing since 1995 ‣ freelancer since 2004 ‣ large scale content management based on Plone CMS ‣ individual Python software development ‣ conversion workflows and publishing solutions 3
  • 4. ANDREAS JUNG ‣Produce & Publish - www.produce-and-publish.com ‣Collaborative content solutions based on Smashdocs - www.creating-content-together.com ‣XML-Director foundation for XML CMS solutions - www.xml-director.info ‣PrintCSS tutorial - www.print-css.rocks My projects: 4
  • 6. WHAT IS "PRINTCSS"? ‣ "PrintCSS" = XML/HTML + CSS →PDF ‣ Browser "Print" is not "PrintCSS" ‣ "PrintCSS" deals with print specific aspects ‣ "paper" layout information ‣ counters and page numbers ‣ page areas ‣ pagination ‣ footnotes ‣ … 6
  • 7. PRINTCSS AKA CSS PAGED MEDIA ‣ Draft: CSS Paged Media Module Level 3 (2018) ‣ Draft: CSS Generated Content for Paged Media Module (2014) ‣ Concepts ‣ Content: XML or HTML ‣ Design and layout: Cascading Stylesheets CSS ‣ Rule-based approach for defining all aspects of automatic typesetting ‣ separation between content and styling ‣ CSS Paged Media vs. XSL-FO ‣ easy approachability in general ‣ less complex than XSL-FO (CSS as foundation is common knowledge) 7
  • 8. "CSS PAGED MEDIA" TOOLS ‣ WeasyPrint ‣ PrinceXML ‣ PDFreactor ‣ Antennahouse ‣ pdfChip ‣ Versatype (ex Vivliostyle) 8
  • 9. TOOLS - PRICING VS FEATURES 9
  • 10. TOOLS - PRICING VS FEATURES Weasy
 print Prince PDFreactor Antenna- house (pdfChip) Personal
 (commercial) free 495 USD 1.250 USD Personal
 (non commercial) free free free Server free 3.800 USD
 (∞ CPU?) 2.950 USD
 (4 CPU) 5.000 USD
 (1st CPU) 5.000 €
 - 25.000 € Server (EDU) free 1.900 USD 2.065 USD 10
  • 12. EXAMPLE: CATALOG PRODUCTION Source: Bösch Preisliste via PDFreactor 12
  • 13. EXAMPLE: LAYOUT-ORIENTED PUBLICATION Source: Konzepte-IS via PDFreactor 13
  • 14. EXAMPLE: INTERNATIONAL STUDIES Source: Stiftung Wirtschaft und Politik (SWP) via Antennahouse14
  • 15. EXAMPLE: DATABASE-DRIVING PUBLICATIONS Source: EUROPEAN PHARMACOPOEIA via PDFreactor15
  • 16. ‣ vendor-neutral information about "PrintCSS" ‣ information about tools ‣ tested tools: ‣ PrinceXML ‣ Antennahouse ‣ PDFreactor ‣ WeasyPrint ‣ tutorial and lessons ‣ "PrintCSS" related resources ‣ www.print-css.rocks 16
  • 22. MULTI-COLUMNS AND FOOTNOTES ‣ ✅ multi-column support ‣ ✅ footnote support ‣ footnotes within the same column ‣ ✅ AH, Prince ‣ 🚫 PDFreactor 22
  • 23. BASELINE GRID ‣Placement of text within a given grid ‣supported by all tools ‣vendor-specific implementation 23
  • 24. FLOATS (1/3) ‣ (automatic) moving of block elements (images, tables, inserts) ‣ within the current page ‣ within the current column set ‣ to the next page ‣ colspan optional ‣ AH: most complete, but complex extension ‣ Prince, PDFreactor: partial support 24
  • 27. IMAGES ‣ Bitmap images: JPEG, PNG, GIF, TIFF ‣ Vector formats: PDF, SVG ‣ Color spaces: RGB, CMYK, ICC profiles ‣ Problems: ‣ auto-placement ‣ automatic (down)-scaling 27
  • 28. PAGINATION ‣ automatic pagination ‣ pagiation hints through CSS ‣ support for orphans and widows div.chapter {
 page-break-after: always;
 } table {
 page-break-inside: avoid;
 } div.chapter {
 page-break-after: never;
 } div.chapter {
 orphans: 2;
 widows: 3;
 } 28
  • 29. FONTS ‣ Support for all common font formats ‣ Opentype ‣ Truetype ‣ Google webfonts ‣ Fonts embedded by default into the PDF 29
  • 30. RTL, VERTICAL RL, ASIAN CONTENT ‣ General support for right to left ‣ General support for vertical RL (JP/CN) ‣ Special fonts usually required with required code points 30
  • 31. Demo time What do you want to see? 31
  • 32. The missing parts. The bad parts. 32
  • 33. THE "STANDARD" (1/2) ‣ the W3C "CSS Paged Media" standard defines the foundation for "PrintCSS" ‣ standards and specifications are years-old, draft status ‣ status of drafts unclear (unmaintained, work-in- progress, discontinued?) ‣ many vendor specific extensions (development usually driven by customer needs) ‣ limited cross-platform compatibility and interoperability 33
  • 34. THE "STANDARD" (2/2) ‣ conflicting implementations ‣ conflicting interpretations of the "standard" ‣ (missing?) test suite(s) ‣ support of modern/new CSS features ‣ in browsers: fast adaptation ‣ in PrintCSS tools: moving (very) slowly 34
  • 35. (CONSISTENT) JAVASCRIPT SUPPORT ‣ ✅ PrinceXML and PDFreactor ‣ 🚫 Antennahouse ‣ support only for selected JavaScript modules ‣ missing rendering API for hooking into the rendering process 35
  • 36. FLEX BLOCK AND GRID SYSTEMS ‣ Flex block: ‣ ✅ PrinceXML and PDFreactor ‣ 🚫 Antennahouse Source: https://css-tricks.com/ 36
  • 37. 🚫 SIDE NOTES Source: CSS Tricks ‣ Antennahouse: own extension ‣ PDFreactor: CSS + JavaScript ‣ PrinceXML: CSS ‣ 🚫 Challenges: ‣ float to inside/outside ‣ side notes in multi-column environments ‣ positioning 37
  • 38. 🚫 IMAGE POSITIONING (1/2) ‣ Problem: ‣ an image does not fit on the remaining page or into the remaining column ‣ avoid blank areas ‣ Solutions: ‣ float image on next page or into next column ‣ scale image down to remaining space in column or on page 38
  • 39. 🚫 IMAGE POSITIONING (2/2) !/* Prince !*/ #globe { width: 100%; float: column-top next; column-span: 2; } !/* Prince !*/ #globe { width: 100%; float: column-top next; } 39
  • 40. 🚫 FIT TEXT INTO A GIVEN BOX ‣ ✅ PDFreactor: Javascript ‣ ✅ Antennahouse: -ah-overflow-condense: font-stretch | font-size | letter-spacing; ‣ 🚫 PrinceXML 40
  • 41. 🚫 ISSUES WITH HYPHENATION ‣ hyphenation quality differs by language and tool ‣ breaking of long words/terms (e.g. URLs) often an issue ‣ no standard for hyphenation exceptions ‣ injecting and maintaining hyphenation hints (e.g. soft-hyphens) is a pain 41
  • 42. 🚫 ISSUES WITH TABLES ‣ tables split over multiple pages ‣ control over repeating headers and footers ‣ custom table captions ("continued….") ‣ controlling page breaks with row spans 42
  • 43. 🚫 MARGIN BOXES/RUNNING ELEMENTS ‣ page margin boxes: ‣ text only, no HTML ‣ one style per margin box ‣ running elements: ‣ content removed from content area ‣ content place in margin box ‣ content duplication often needed ‣ styling of mixed running elements and generated content is a major pain 43
  • 45. 🚫 DEVELOPING WITH PRINTCSS ‣ no real development tools ‣ rendering process is a blackbox process ‣ content + styles in, PDF out but what is happening inside and why? ‣ few tracing options for the mortal PrintCSS developer ‣ usually a lengthy, iterative process ‣ no/little support for introspecting the rendering process ‣ no/little support for influencing the rendering process besides CSS 45
  • 46. THE ECOSYSTEM ‣ CSS Paged Media tools: ‣ few commercial tools ‣ even fewer non-commercial, free tools ‣ limited options ‣ in-depth evaluation needed for advanced projects ‣ at one point you need to decide and pick one tool 46