Skip to content

Instantly share code, notes, and snippets.

@jviereck
Forked from brendandahl/gist:1953439
Created March 1, 2012 21:56
Show Gist options
  • Save jviereck/1953505 to your computer and use it in GitHub Desktop.
Save jviereck/1953505 to your computer and use it in GitHub Desktop.
About Printing On The Web

Version: 01-Mar-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 improves things, but has not been adopted by browsers yet. How about creating a new "WebPrintAPI" that does not use the DOM but is 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?

Please leave a comment - I would really like to get your feedback on this!

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 this is 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 performs better. 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 mind 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 print layout. 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?

@fantasai
Copy link

The spec is not near Last Call, actually. It's more in the Revising stage described here: http://fantasai.inkedblade.net/weblog/2011/inside-csswg/process It is somewhat constrained by existing implementations, however. Therefore the feature-set and syntax is largely frozen and most of the behavior that could change is in the details. See PrinceXML and Antenna House Formatter, for examples of existing implementations.

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