By Julie Blanc, June 5

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.

  • CSS Paged Media Module Level 3 “describes the page model that partitions a flow into pages. (…) It adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation.”
  • CSS Generated Content for Paged Media Module defines many special requirements for the display of printed document content: running headers and footers, footnotes, generated text for cross-references or table of contents, PDF bookmarks, etc.
  • CSS Fragmentation Module Level 3 defines how and where CSS boxes can be fragmented, including across page breaks.
  • CSS page floats defines how an element is to be removed from the normal flow and instead be placed into a different place depends on page. (see the article “Page Media approaches: page floats”)

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

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 screenshot shows, the @page rule is only supported in Chrome (and Chromium) and isn’t supported in Firefox and IE.

Screenshot of caniuse 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…  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 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!

Related stories

Paged Media approaches : page floats

In CSS specifications, the float property is very interesting. The property indicates that an element is to be removed from the normal flow and instead be placed into a different place - currently, on the right or left side of its container. Text and other inline elements will then surround the floated element.

Book production with CSS Paged Media at Fire and Lion

Multiformat thinking is hard. The whole point of our digital-first approach is to store content only once, and produce multiple formats automatically. This puts tremendous pressure on project managers, developers, authors, editors, designers and proofreaders to think in multiple formats at once.

Unfolding the @page

Let’s say you need to make a poster and you need to give to the client the possibility to change a few things on this poster, like the date, or even the title. HTML can be the right way to go: it works in all browsers, it does not need any particular applications to be installed, fonts and colours are already set up by a professional designer, and the pdf will be ready for print without any problems.

Making books with HTML + CSS — a look at Vivliostyle (Part 1 – page layouts)

Before you read further, the following information has been gathered in the process of making experimental books with Vivliostyle. As the specs are a little old and pretty experimental, I can’t guarantee you would necessarily get the same results as I did. Also, if you have used the tool and have found any other ways … Continue reading “Making books with HTML + CSS — a look at Vivliostyle (Part 1 – page layouts)”

A Bag Full of Stories

As we wander the internet, gathering images, videos and text to make stories, how do we carry them back to camp, how do we share them with our community?