Skip to content

Instantly share code, notes, and snippets.

@jviereck
Created February 29, 2012 21:47
Show Gist options
  • Save jviereck/1944694 to your computer and use it in GitHub Desktop.
Save jviereck/1944694 to your computer and use it in GitHub Desktop.
About Printing On The Web

Version: 29-Feb-2012
Author: Julian Viereck <jviereck (dot) dev (at) googlemail (dot) com>

About Printing On The Web

tl;dr: Printing on the web is very limited. There is CSS3 Paged Media "Last Call" spec, that improve things, but is not adopted by browsers so far. How about creating a new "WebPrintAPI" that is not using the DOM but somewhat more like a simple canvas API? Would such a simple API be helpful for your printing needs on the web, or is it just suitable for very special use cases like PDF.JS?

About this document

This document is intended to sum up the current state of printing using the open web platform. It should serve as a foundation for discussion on how to get proper printing support added to the PDF.JS project (adding printing support is tracked here).

Requirements for proper printing support:

  • control of target print size: Should the printing end up on a "letter" or an "A4" page?
  • control page orientation
  • control pixel precise printing output / way to determine which content to be printed on which page
  • control over the entire page layout - e.g. no header/footer added by the browser
  • memory efficient
  • cancelable printing: creating print jobs for many pages should not block the UI / print action cancelable by the user

CSS - Status Quo

  • control print output size (A4/Letter): Not possible
  • control page orientation: Chrome - Yes, Firefox - No
  • control pixel precise printing output: not possible; breaks pages due to "best" fit (however, there is a way to force a break before/after an element)
  • control margin: Chrome - Yes, Firefox - No
  • control heading: Chrome - margin: 0, Firefox margin: 0 doesn't work
  • memory efficient: requires DOM (SVG) for vector/scaleable output -> need to create DOM nodes + store them in the DOM. For printing drawings not really memory efficient (use case for PDF.JS).
  • cancelable printing: possible by adding small chunks to the DOM

Paged Media

During my research I came across the CSS3 Module: Paged Media proposal (status: "Last Call" - Editor's Draft 20 February 2012). This proposal seems to implement a lot of the missing CSS stuff to match the requirements pointed out at the beginning.

Browser Support Gecko:

Sum up: There is no support CSS3 Paged Media in Firefox yet and it doesn't seem like work has started on it yet.

Browser Support WebKit:

Experience with Google Docs:

There is no good printing support on Google Docs using Firefox. Chrome perform better. That Google Docs has no good support for Firefox/Chrome says nothing, but it might be an indication that printing is a very hard/impossible to do using open web technologies.

How to add proper printing support to the browser?

In my opinion there are two ways:

  1. Improve CSS printing support available in the browser

  2. Come up with something "new"

Thoughts about 1): The spec for the CSS3 Paged Media looks quite huge to me. Getting it implemented will take quite some effort and time. Also, although the spec just entered "Last Call" status, it still might take some time until it's finalized...

Thoughts about 2): Therefore, I was wondering if it makes sense to create a new API from scratch. What I have in mid is something that looks more like the current canvas API, maybe something like the PDFKit Library. Such an API would give 100% control over the printout. However, on the downside everything needs to get drawn and aligned "by hand", compared to using the DOM.

Would such a simple API be helpful for your printing needs on the web, or is it just suitable for very special use case like PDF.JS?

@gregglind
Copy link

Consider adding Safari to the comparison chart. Some of these features' support also varies by platform / os. I complained about some "in the wild" problems at http://writeonly.wordpress.com/2011/08/10/building-better-resumes-using-python-and-good-design/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment