What is the Paged Media initiative?

At the beginning of the year, we announced the Paged Media initiative as a community driven open source solution to help anyone who wants to print content with web technologies. Before looking at what we’ve been up to for the last five months, in upcoming articles, let’s have a look at what’s possible the gaps we’re trying to fill.

If you have ever tried to lay out a website for printing or to publish a book in HTML, you’ll have experienced the limitations of styling meant for displaying scrolling text on screens. The Paged Media Initiative is developing tools which help make it possible to produce paginated material from your browser.

So why is this all so difficult?

CSS print stylesheet

Let’s start at the beginning. The need to print out website content with ease and accuracy led to the development of  what we now call “a print stylesheet”. This development of a print stylesheet was one of the first uses of media queries. The print stylesheet is a CSS file which conditionally adjusts the webpage styling to enable a designated printing device to print the screen content when the “print” button is clicked. You can see this in action if you try printing this page.

To include print styles in a stylesheet, you start by using the following declaration:

@media print {
    ...
}

The styles declared in this media query will only be applied when the web page is printed from the browser print dialog to create a PDF. For example, the size of the typography for print is declared differently than that for screen display so it is more suitable for printing, or images are removed (with display:none) to save ink. These examples are small adjustments, but they illustrate that for printing pages you need very different rules from those used to display content in the browser. For example, you’ll want to declare fixed sized pages rather than lay out a continuous flow of text. Books also need many specific elements for the printed layout: margins, running headers, page numbers, a table of contents, and so on.

Fortunately the work on CSS at the W3C has resulted in several modules of the CSS standard for managing the layout of a HTML document during printing.

For an overview of setting up a document with these styles, Rachael Andrews has compiled A Guide To The State Of Print Stylesheets in 2018.

Advocating for Browser Support

The previous CSS standard modules were written by the World Wide Web Consortium (W3C). W3C publishes documents that define Web technologies (including CSS) which are considered Web Standards. W3C modules are published publicly throughout the process of their development until they are finally released as a W3C Recommendation. The print modules are at various stages of the process, but most are still in the Working Draft stage.

Browser developers can start implementing these recommendations at any point, knowing they may change later, but the developers are not obliged to implement all the CSS specifications until they become W3C Recommendations.

Thankfully, browser developers have already taken some interest in implementing parts of the Paged Media Working Draft standards and @page rules have partial support in Chrome, Firefox and IE. But it’s still difficult to use these browsers effectively for the output of paginated content.

To better understand this story of recommendations and specifications, let’s try an other story. A group of architects (called the W3C) offer blueprints (specifications) for a children’s garden (that they call CSS) where they define playground equipment (modules) that can be used in many ways. It’s up to the manufacturers (the browser developers) to build the equipment and make it accessible so the kids (web visitors and application developers) can play with them. However, the manufacturer has not yet built all the equipment. There is a swing missing here or a half-built toboggan (the famous CSS modules print) which is not yet suitable for playing with. In the meantime we can only look at the plans for what is being created.

So when it comes to producing paginated content from the browser, this is where we are today: the rules for printing web pages from a browser are written, and even standardised, but we can’t as yet use them effectively.

Let’s take a basic specification of a CSS print stylesheet to test its implementation in different browsers. To define a specific size for a page, you need to declare a size in the @page rules like this:

@page {
    size: 6in 8in;
}

However, if you try this in different browsers, you will quickly be disappointed.

As this following caniuse.com screenshot shows, the @page rule is only supported in Chrome (and Chromium) and isn’t supported in Firefox and IE.

Screenshot of caniuse.com for the @page rule

Unfortunately, other print-specific CSS declarations, such as generated content, also have no browser implementations. It’s even hard to find them on caniuse.com…  On the other hand, there are tools such as PrinceXML, AntennaHouse and PDFreactor that implement these print CSS declarations outside of a browser.

By providing more examples of what can be accomplished using print CSS, we hope to advocate for better support of print-related standards in browser engines.

The Paged Media Initiative

The Paged Media Initiative was launched at the first meeting of the community at MIT Press (Cambridge, MA) on January 9, 2018 with the goal of advocating for the use of Paged Media. To that end, we are creating open source tools to support using print CSS with current browsers.

We are in the early stages of developing a JavaScript library that can parse CSS stylesheets, polyfill the print declarations (by updating them with supported styles or replacing them with JavaScript implementations) and present a paginated rendering of the HTML document using the fragmentation provided by CSS columns.

Having a paginated rendering within the browser environment has many advantages:

  • you can access and use browser development tools for making on the fly modification of styling and positioning;
  • it’s not necessary to wait until the end of the rendering of all the printed objects to work on the first pages;
  • it’s easy to add other scripts to increase the possibilities of layout and style.

We are also working on a tool to generate PDFs using a headless version of Chrome.

We are still just getting started and want the design of these tools to be community-led to complement existing workflows and products. Currently the Paged Media scripts supports only a small subset of print CSS styles and we need a few more weeks before telling you more about it with some good examples and working code.

We hope to share these examples with you very soon!

This post was written by Julie Blanc

Julie Blanc is a graphic designer and student-researcher at EnsadLab-Paris. She works on the PagedMedia initiative and is an active participant in PrePostPrint (a group of people who meets at events for discuss on alternative free publishing). Her work and research focuses on the design of multi-media, multimodal and / or hybrid editorial objects and the development of publishing chains through design practice. She uses the concepts of programming through web technologies (HTML5, CSS3, javascript, epub) for both digital and printed objects."

Leave a Reply

Your email address will not be published.