Today I was working on a project where I needed to add some visual "page breaks" to the screen—very similar to the page breaks Microsoft Word shows in "Normal" view. The goal is for visual indicator to show on the screen, but actually trigger page breaks when printing.
After playing around with the HTML and CSS for a few minutes, here's what I came up with:
The effect is really easy to accomplish. The first thing you need to do is to insert the HTML for the page break each place you want the page break to appear:
The idea behind this is that the <div class="page-break"/> element will be used to actually trigger the page break when printing and draw a dotted line and add some margin when displaying on the screen. The inner <div/> we use to move the text up to the middle of the dotted line. Finally, we use an inner <span/> text to actually format the text and add a solid background, so that the dotted line does not appear through the text.
Next you need to add the following CSS to your page:
I've tested this code under all of these browsers in Windows and everything works exactly the way I want: Firefox 2 & 3, Internet Explorer 6 & 7, Safari 3 and even the latest Google Chrome beta. The HTML could be simplified if you don't need the text, but I wanted a label to indicate what the user was seeing.
I'm really happy with how the effect has turned out. It provides a very clear indicator of where pages will be divided, but distract from the rest of the page.