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

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.

Answer 2

• Paged media
• Print Reference
  • page-break-after (MDN)
  • page-break-before (MDN)
  • page-break-inside (MDN)