Posted by Michael Alfaro on August 30, 2010

How to setup CSS for printer friendly

Was looking for some code to keep some images together near a page break and found this article from WordPress.  here’s what I found:

Page Breaks

While these do not work for every browser or printer, you can instruct them not to “break” your photographs or graphics in two pieces, or break apart blockquotes, or not to have a page break after a heading but to force it to break before the heading. This is not a perfect science, but if you are really particular about how your printed web page looks, you might want to use these.

h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
     page-break-inside:avoid }
img { page-break-inside:avoid;
     page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }

Topics: development, technology