Styling CSS Print Page Breaks

By  on  
CSS Page Break

It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my websites, I style the page-break class for the "screen" media so I can see how pages will print without needing to "print preview" every time I want to find out where I put my page breaks. The following CSS is all I need.

The CSS

@media screen {
	.page-break	{ height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
	.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}

Realize that this CSS doesn't account for browser-triggered page breaks; it only shows you where you've put your own custom page breaks. Note that we've also hidden all of the page break visuals for the "print" media.

Just another styling tip to make your CSS print development easier!

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

Discussion

  1. Ben

    Never thought of previewing page breaks this way, great idea thanks David!

    A problem I ran into a few weeks ago:

    We needed to email our customers a set of 3 gift vouchers contained in an HTML email, containing barcodes, that they could print off and take into stores.

    Problem is that the HTML email was longer than your average A4 sheet of paper, so the 2nd voucher was inevitably cut in half and spread over 2 pages. This of course would be different for each user, browser/email client and printer combination.

    Unfortunately I’ve found that very few of the popular email clients and webmail services support CSS page breaks.

    Can you think of any way around this? Or know of any means of generating PDFs dynamically that I could then attach to the emails?

    Cheers :)
    Ben

    • Joves

      Consider using Active PDF to generate a PDF dynamically. We use it for our clients and they love it. It is a bit arcane to work with but with a little patience you can create a nice document.

  2. Bart (Belgium)

    Thanks, man…
    This really helped me out!

    Best regards,

    Bart
    Antwerp, Belgium

  3. vignesh

    Its possible to apply dynamically page break . For example my web page is 1200px . i want to apply break @ height of 600px .

  4. Amy

    This won’t work in Chrome. Have you find a way to make it work on Chrome. I’m facing an issue for last 2 days.

  5. Shane

    The page-break demo works for me on Chrome, but doesn’t work on Firefox. Does something different need to be done for Firefox? Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!