Adding visual page breaks to your web page

Posted by Dan on Sep 24, 2008 @ 4:30 PM

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:

image

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:

<div class="page-break"><div><span>page break</span></div></div>

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:

<style type="text/css">
        @media projection, screen {
            /* add spacing to page break and draw the dotted line */
            .page-break {
                border-top: 1px dotted #b2b2b2;
                text-align: center;
                margin: 50px 0;
            }
            /* move the text up to center on the line */
            .page-break div {
                margin-top: -8px;
            }
            /* define the style for the text--including a white background */
            .page-break div span {
                background-color: #fff;
                color: #b2b2b2;
                padding: 0 5px;
                font: 10pt Arial,Helvetica,sans-serif;
            }
        }
        @media print {
            /* add the actual page break and remove the border */
            .page-break {
                page-break-after: always;
            }
            /* ignore the actual text */
            .page-break div {
                display: none !important;
            }
        }
    </style>

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.

Categories: HTML/ColdFusion

6 Comments

  • charlie griefer's Gravatar
    charlie griefer
    very cool, except that it makes the rest of the page blurry :)
  • ike's Gravatar
    ike
    Hey thanks Dan! That's really useful. I just wrapped this in an html library function for the onTap framework's templating and gave you credit for the idea and the CSS :) Only thing I added was localization (which of course doesn't make sense in the context of this blog) and I added a CSS entry for @media aural to turn it off for screen readers.
  • Sebastiaan's Gravatar
    Sebastiaan
    Then the eternal question arises: how to make sure that the page-break comes at the right place when dynamically creating a M$ Word doc or a PDF?

    Any ideas?

    Thanx up front ;-)

    PS: Your formfields are hardly distinguishable from the white-greyish background on my TFT-screen. A little more contrast would be helpful!

    PPS: Oh, and make use of CFFormProtect instead of these dumb Captchas ;-) This is the third time I try and deduce the correct letters and numbers from the image...
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Ike:

    Glad you liked the code snippet!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Sebastiaan:

    I darkened up the borders a bit, so hopefully that helps you out.

    As for how to determine the correct spot to insert page-breaks when creating Word documents, well that's a completely different issue altogether and not one I have an easy answer for. :)
  • ike's Gravatar
    ike
    Yeah, knowing where to put them is tough... It's not always necessary tho... the CSS property for break-after or break-before is intended for "forced" page breaks as opposed to natural page breaks. And technically a natural page break would occur in the middle of your content, like in the middle of a paragraph potentially.

    Where I think this might be really useful is in something like if you were printing a sheet of say report cards one per page or if you were printing a small book you could use them to separate the chapters where you want to force a page break before the beginning of the next chapter.

    In the latter case you'd still have an issue with the natural page breaks not being visible in your content, but I think that's okay... we have half of the problem solved anyway and that's better than where we were before. :)

Comments for this entry have been disabled.