State of PrintCSS - MarkupUK 2023.pdf

Andreas Jung • info@zopyx.com • print-css.rocks State of PrintCSS in 2023 MarkupUK 2023, London

Agenda (this is not a PrintCSS tutorial) • Brief introduction to PrintCSS and its standards • The problems with comparing tools • Free PrintCSS tools • Commercial CSS tools • Role of Javascript in PrintCSS • The pain points with PrintCSS • Decision criteria • Q & A

Publishing developer & consultant since mid-90s https://print-css.rocks https://andreas-jung.com ✉ info@zopyx.com Funder of print-css.rocks project Independent PrintCSS consulting - Software developer & software architect - Requirements engineering - Python developer & Python expert - NGOs, EDU - medical & pharmaceutical - energy - research & development quantum mechanics - CMS Solutions - Publishing Solutions - Individual software solutions About me

Introduction

The PrintCSS process • Input: HTML (or XML) • Styling: CSS • Formatting: a free or commercial PrintCSS renderer • Output: PDF

Definition of „PrintCSS“ „PrintCSS“ synonym for „W3C CSS Paged Media“ W3C CSS Paged Media Level 3 (2018) • the official standard for generated paginated content aka PDF from HTML using cascading stylesheets (CSS) Related standards: • CSS Generated Content for Paged Media Module (2014, GCPM)

Comparing tools, metrics and their problems How to compare tools in a reasonable way? Problems • we have many PrintCSS tools • we have hundreds of CSS properties + PrintCSS specific CSS properties • we can not test all tools against all CSS properties (not manually, not automatically) • W3C standards do not cover everything, leaving room for interpretations Metrics and approach of print-css.rocks • testing the core PrintCSS features (W3C Paged Media, GCPM) • focus on high-level topics (e.g. footnotes, CSS grid, RTL)

How we do in print-css.rocks?

How we do in print-css.rocks?

How we do in print-css.rocks?

Standards, non-standards and extensions Example: variations on footnotes …not even talking of • endnotes 😈 • sidenotes 😈 Standard no standard

Free PrintCSS renderers

Free PrintCSS renderers (Feature selection is highly opinionated) WeasyPrint Vivliostyle PagedJS Python Javascript/ Chromium Javascript/ Chromium ✅ solid core ✅ Flexbox ✅ Hyphenation ✅ simple footnote support ✅ solid core ✅ Javascript support ✅ MathML ✅ simple footnote support ❌ Grid ❌ Javascript ❌ XML ❌ Hyphentation ❌ XML ❌ many unfixed issues and bugs good community support good community support community support 🤷 👍 actively maintained 👍 actively maintained 👎👎 badly maintained

Commercial PrintCSS renderers

Commercial PrintCSS renderers (Feature selection is highly opinionated) Typeset.sh Prince PDFreactor BFO Publisher Antennahouse Formatter PHP Java Java ✅ solid core ✅ Grid & Flexbox ✅ very mature ✅ Javascript ✅ Flexbox ✅ excellent docs/examples (https://css4.pub/) ✅ XML ✅ very mature ✅ Javascript ✅ Grid & Flexbox ✅ XML ✅ solid core ✅ very mature ✅ most advanced typography features ✅ most complete ✅ XML • young project • has some rough edges here and there ❌ Grid • young product • has some rough edges • not much experience ❌ Grid ❌ Flexbox ❌ Javascript ✅ excellent support ✅ excellent support ✅ excellent support ✅ excellent support 👍 actively maintained 👍👍 actively maintained 👍 actively maintained 👍 actively maintained 👍👍 actively maintained 89 € (annual) or 499 € (perpetual licence) 3800 USD (4 CPUs) 2.950 € (4 CPUs) n/a 5000 USD (1st CPU) * check pricing for educational license or „personal“ usage licenses

Role of Javascript?

Why Javascript? Javascript is the „Franca Lingua“ of the web (besides HTML) Javascript on the web: • no modern web solutions without Javascript • omnipresent Javascript in Print/PrintCSS • provide enhanced visualizations (graphs, charts etc) from the web in print • for content: ideally Javascript visualization that work on the web, should work in PrintCSS • for internal usage: influencing the rendering process of the PrintCSS renderer • generating TOC, listings, indices

Situation of Javascript support in renderers well… Renderer PagedJS Prince PDFreactor Vivliostyle Implementation Chromium/native custom JS engine custom JS engine Chromium/native JS compatibility for PDF generation unknown selected JS packages selected JS packages best compatibility for JS modules (where they make sense) JS for internal usage unknown • adaptive rendering • adaptive image scaling • table of contents • adaptive rendering • adaptive image scaling • table of contents unknown

The pain points with PrintCSS

The dark side of PrintCSS and its renderers Problems and pain points • inconsistent implementations and behavior of renderers (due to incomplete or inconsistent Paged Media specifications) • different defaults (page size, borders, page area dimensions etc.) • easy things often work differently across tools • complex topics • floats • adaptive rendering of images • handling of long or wide tables

Decision criteria

Is your publishing use case suitable for PrintCSS? Automatic typesetting means automatic!!! No manual interaction!!!

Know your typographic and layout requirements …an opinionated selection of criteria • Is your publication text-oriented or layout-oriented? • Do you need a grid system or flex box? • Do you need a baseline grid? • Support for multiple columns needed? • Footnotes required? • Floating objects needed?

Do I need Javascript? • Do you have to interact with external Javascript modules (charts etc.)? • Do you need Javascript support inside the renderer or can you prepare Javascript-based assets in a pre-processing step?

Do I have XML or HTML as input? • only some renderers speak XML natively • but all renderers handle HTML • raw XML often not directly suitable unless transformed to publishable XML or HTML • PrintCSS is not a transformation framework • flat or nested HTML? • personal preference: nested HTML but YMMV

Do I have special PDF requirements? • PDF metadata • PDF variants • PDF/UA (accessibility) • PDF/X (print) • PDF/A (archiving) • supported by most commercial renderers • PDF security (encryption, signing) • supported by most commercial renderers

Other features needed? • Scientific context? (formulas, MathML, MathJax) • integration of renderers in workflows: • all tools run on the command line • some tools provide a server mode • some tools provide APIs for integration with PHP, Python etc. • Produce & Publish server (abstraction of renderers)

Recommendations

Recommendation and hints • be aware of your special requirements (regarding more complex features) • build prototypes and evaluate against different renderers • use CSS variables (not widely supported) • consider using CSS preprocessors (e.g. Less, Sass) for complex workloads • start with free tools, use commercial tools if needed

Q & A

Thank you for listening Andreas Jung • info@zopyx.com • print-css.rocks