Terminally Incoherent

How do you force to put page breaks in specific sections when you print a web page? The sat truth is that it is not always possible. But if you can guarantee that your visitors will be using a modern browser (read IE 6.0+ or FF 1.5+) you can do the following:

@media print {
.pbreak {
page-break-before: always;
}
}

The page-break-before command will tell the browser to put a page break right before the element of that class. There is also analogous page-break-after command. You can use it like this:

<p>This will appear on page 1</p>
<p class="pbreak">This will appear on page 2</p>
<p class="pbreak">This will appear on page 3</p>

The problem here is that not all browsers support this feature. I successfully tested this on IE 6.0, Firefox 1.5 and Firefox 2.0 and it worked in each case. I don’t think this trick works in IE 5.0 though.

This entry was posted on Wednesday, November 8th, 2006 at 12:01 pm and is filed under technology, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related Posts: