View Full Version : CSS for printing

02-14-2006, 02:45 PM
I know I can have a separate CSS for printing a web page, but how to I tell it where to break the pages on a fairly long web page?

02-14-2006, 03:11 PM
As you already know, to make a seperate stylesheet only for printing use a link like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
(just had to add that for other people that might read this thread.)

In that stylesheet you can take off things like images and navigation to make the page more print friendly.
#nav {display: none;}
.headerimage {display: none;}

Breaking pages at the right point is really tricky though.. If your page breaks inside a table you can't do very much. read up on how PHP can create PDF files, I know you can do it in a PDF.
For CSS you're left with a very useful CSS property page-break-before.
<div style="page-break-before: always;">This block of text will automatically print on a new page. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>