Predictable and consistent cross-browser printing from HTML

Question

I'm trying to figure out if there's a way to achieve sane printing straight from HTML. Our users often want to print a few pages for their own records. The printouts contain Google Charts and the grid is handled by bootstrap. Very frequently we want a set of content per page and thus page breaks are very much required.

Traditionally we've used print media queries, but it's been nigh impossible to achieve consistent results across browsers, say Firefox, Chrome and Mobile Safari etc. Pieces will spill over, page breaks will be ignored etc.

Some companies like Amazon and Newegg provide customers with the ability to print out invoices and other pages. It seems that usually that involves having a separate print-only version of the content that's either all tables or very simplified -based markup that looks extremely basic when printed out. Generally there's little to no styling, few if any images, definitely no and no page breaks as far as I can tell.

Another option is to just convert everything to PDF, but that has its own pitfalls and expenses. Now you have to re-generate the same content in a second format for every page that needs to be printed, and perfectly styling PDF is non-trivial as well.

Is there anything out there can can help with this? Any commonly accepted solutions?

score 2 · Accepted Answer · answered Sep 11 '14 at 23:17

We use wkhtmltopdf and PrinceXML to get consistent styling. Both are command line tools that can take a URL plus a custom CSS file. They generate consistent output, and are browser independent, because they are the rendering engine.

We used to use wkhtmltopdf, but we're starting to move to PrinceXML because it supports margin-boxes and two-column layout. (The main caveat with PrinceXML is the price.)

Perfectly styling PDF doesn't seem any worse or harder than styling for web display. My experience is that it takes an hour or two to get a print page styled correctly. I've never tried to handle Google Charts.

That's good advice, I'll see if I can funnel all of our PDF generation through a web app passing content into wkhtmltopdf and that way we'd have one single rendering engine for the entire system, rather than letting each user's browser decide what's best for them. — Alexandr Kurilin, Sep 15 '14 at 21:30

score 1 · Answer 2 · edited May 23 '17 at 12:33

All of the popular desktop browsers now support the CSS @page rule for setting page margins, and the CSS properties page-break-inside, page-break-before, and page-break-after for handling page breaks. These will generally provide enough control to achieve consistent cross-platform printing, but there are a few things that only one or two of the browsers can do. Some examples are:

page numbering
running page headers and footers
orphan/widow control
control of background colors

If you need any of those things, PDF might be your best option; otherwise, it might be overkill. A PDF converter isn't going to automatically determine the ideal way to paginate whatever content you throw at it; human judgement will still be required.

That doesn't mean you need to explicitly declare the location of every page break, though. It's usually a lot easier to prevent bad pagination than to force good pagination. In other words, instead of telling the browser where you do want page breaks, tell it where you don't want them.

Examples of places you might want to prevent page breaks:

between a section title and the first line of section text
between a table's column headers and the first row of data*
between closely-related form fields.

The go-to CSS declaration in these situations is page-break-inside: avoid;**. It would be easier to use page-break-after: avoid; in the first two examples, but Firefox only supports the always and auto values for that property. So instead, you have to create an unbreakable div that contains or overlaps the stuff you want to keep together. Here's one way to do it:

<style>
  .section {
    line-height: 1.25em;
  }
  .title {
    page-break-inside: avoid;
    padding-bottom: 1.25em;
    font-weight: bold;
  }
  .overlap {
    margin-bottom: -1.25em;
  }
</style>

<div class="section">
  <div class="title">
    Title of This Section
  </div>
  <div class="overlap">
  </div>
  This is the section text. It could be any length, so we have to
  allow page breaks in it. However, we don't want the first line to
  be separated from the section title. The title is unbreakable, so
  we just need to add some bottom padding to it and make it overlap
  the first line of text.
</div>

*Tables are probably the most challenging thing to print consistently across browsers, but it is possible.

**Old versions of Firefox, Chrome, and Safari don't support the CSS declaration page-break-inside: avoid;, but you can achieve the same effect with display: inline-block;, if needed.

Predictable and consistent cross-browser printing from HTML

2 Answers2