How do I build a webpage for printing so it won't split badly over pages?

Question

I have a web application that generates a long report and I need to print it. If I just print the page it will break at the end of the physical page. How can I calculate where to make a break in the web page so that the page breaks line up with the physical pages when they print?

Answer 1

• Paged media
• Print Reference
  • page-break-after
  • page-break-before
  • page-break-inside

Answer 2

I usually avoid web page (HTML) printing all together. If formatted printing is required, I generate PDF or CSV/Spreadsheet formats for my customers to print in any way they want.

I usually generate print for global use, meaning that all types of settings differ (eg. paper size: Legal, Letter, A4, etc) from workplace to workplace. I've found it to be too big a task to guarantee esthetic output everywhere.

Answer 3

Either with CSS page-break-before/after

Other ways:

• use JasperReports and load the data in a report, instead of a html page
• use Apache FOP with XSL to translate your HTML (or the raw data) to FOP and later to PDF

Both methods are quite extensive, so if you don't want to spend some effort better directly skip to another answer....

Answer 4

There is a css property to attempt to ensure the position of page-breaks. You can give an element the rule page-break-before: always or page-break-after: always` to indicate whether the break should be before or after the element. This has pretty poor support across browsers and I wouldn't rely on it. See http://www.w3schools.com/CSS/pr_print_pageba.asp for more details.

Answer 5

We have a system which prints out invoices for selected orders which places a

<br style="page-break-before:always;">

between each invoice. This means each invoice goes on a new page.

It's also good practice to use a print stylesheet

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

which can hide/display relevant areas of the page. No point printing out leftnav links etc when someone wants the actual page contents.