CSS Print

Printing a Book with CSS: Boom! (as in: TADA!)

Printing a Book with CSS: Boom! (as in: OH NO...)

Printing a Book with CSS: Boom! (as in: EH? WOW!)

CSS

Cascading Style Sheets

body{
    background-color: pink;
    color: green;
    margin: 100px;
}

CSS1, CSS2, CSS2.1, CSS3

Screenshot of one of the slides from Julie Blanc and Julien Taquet, as part of their presentation during the Paged.js workshop in October 2022. http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html#/19

Since CSS3, the CSS standard is cut up into modules that each describe a specific part of the CSS standard. It was a way to work on specific features in parallel.

A full list of all the CSS3 modules and their status: https://www.w3.org/Style/CSS/current-work

CSS Print

CSS Print extends the CSS standard with print features!

These features are formulated in these modules:

• CSS Paged Media (official w3c draft, mdn docs)
• CSS Generated Content for Paged Media module (official w3c draft)
• CSS Fragmentation (official w3c draft, mdn docs)

CSS Paged Media Module

Paged media have many special requirements for the display of document content, which have evolved over the long history of printed books. Running headers and footers function as aids to navigation. Notes may appear at the bottom of the page, as footnotes. The properties of pages themselves may change based on their content or position in the document. Leaders visually connect related content. Cross-references may require generated text. Some paged media formats such as PDF use bookmarks for navigation.

This module defines new properties and values, so that authors may bring these techniques to paged media.

CSS Print Community Group

For a couple of years (2020-2023), a group of people formed a W3C community group to provide feedback to the CSS Print specs. Unfortunately this group is closed since Dec 2023.

This was their web page and blog: https://www.w3.org/community/cssprint/

Working with a NOT YET standard

Modern browsers (partial CSS Print support)

A few of the CSS Print properties are supported by modern (aka up-to-date) browsers, but not many unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.

You can check if a CSS property is supported by a specific browser at: https://caniuse.com/

It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.

Paged.js and Weasyprint (already support CSS Print!)

If you nevertheless do want to use these properties, you can use Paged.js, a Javascript library also known as a polyfill, that aims to fill the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

Or you can use Weasyprint, who also supports most of the CSS Paged Media properties described on this page. In the Weasyprint documentation here you can read which properties are supported and which ones not.

CSS Print examples

An important proposal of the CSS Print drafts is to add a @page selector, that you can use to style a web page when it is rendered into pages.

@page{
    size: A4 portrait;
    margin: 20mm 30mm;
    bleed: 3mm;
    marks: crop;
}

More examples of CSS Print selectors and properties can be found here: CSS Print examples

CSS Print documentation

As the state of CSS Print features is so much in flux, it can be hard to find documentation that gives you an overview of all the different pieces you want to use.

It really depends on which tool you use to produce a PDF:

• Paged.js: https://pagedjs.org/documentation/ - official project documentation
• Weasyprint: https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css - list of supported CSS properties in Weasyprint
• browser: check caniuse.com

For an overview of the two CSS Print modules in their latest w3c draft version:

• paged media: https://www.w3.org/TR/css-page-3/
• generated content for paged media: https://www.w3.org/TR/css-gcpm-3/

Media queries: @media print, @media screen

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• https://developer.mozilla.org/en-US/docs/Web/Guide/Printing

Kiara's great listing of css-print links:

• https://pzwiki.wdka.nl/mediadesign/User:Kiara/Code#CSS-print

CSS Print tools

Layout engines for CSS Print

• your browser (based on CSS Paged Media): use CTRL+P/CMD+P
• Weasyprint https://doc.courtbouillon.org/weasyprint/stable/
• Paged.js https://www.pagedjs.org/
• wkhtmltopdf https://wkhtmltopdf.org/
• Vivliostyle https://vivliostyle.org/
• OSPKit (CSS Regions legacy support!) http://osp.kitchen/tools/ospkit/

Custom workflows made with CSS Print

• html2print http://osp.kitchen/tools/html2print/
• etherpash https://github.com/chchchchchchch/var.lgm.etherpash
• 8m-posters (8 March poster generator made by Julien Bidoret) https://prepostprint.org/8m-posters/
• PageTypeToPrint https://ateliers.esad-pyrenees.fr/pagetypetoprint/
• Padatrad https://gitlab.com/editionsburnaout/padatrad
• octomode https://git.vvvvvvaria.org/varia/octomode
• ether2html http://osp.kitchen/tools/ether2html/
• ethertoff http://osp.kitchen/tools/ethertoff/

Books and publications made with CSS Print workflows

• DiVersions (MediaWiki, Paged.js)
• Reclaiming Digital Infrastructures (pads, Paged.js)
• Machine Research (pads?, PJ Machine)
• Mondoteque (MediaWiki, Weasyprint)
• The Techno-Galactic Guide to Software Observation (pads, mdsh?)
• Volumetric Regimes (MediaWiki, Paged.js)
• Data Workers (MediaWiki, asciiWriter)
• ...

Examples, boilerplates, resources

• https://constantvzw.org/wefts/webpublications.en.html
• http://web.2print.org/
• https://books.constantvzw.org/
• https://gitlab.com/prepostprint/demos
• https://prepostprint.org/resources/
• https://ateliers.esad-pyrenees.fr/web/pages/exemples/#webtoprint

Readings

• Printing a Book with CSS: Boom! by Håkon Wium Lie, Bert Bos (2005)
• Designing For Print With CSS by Rachel Andrew (2015)
• https://phd.julie-blanc.fr/ (PhD published in 2023)
• https://yanntrividic.fr/assets/files/sujet_these.html (PhD in progress)

Online channels

• W3C CSS Print Community Group (launched in 2020, closed in December 2023)
• PrePostPrint Matrix space

See also

• CSS Print examples
• Free, Libre, and Open Source Software publishing practices
• PDF
• HTML + CSS
• Typesetting Tools