Advanced CSS Printing — Using CSS Page Breaks

By  on  

I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this.

Needless to say, I've learned quite a few tricks to making a website print properly. I've already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.

There are numerous spots that are good for page breaks:

  • Between page sections (h2 or h3 tags, depending on your site format)
  • Between the end of an article and subsequent comments / trackbacks
  • Between longs blocks of content

Luckily, using page breaks in CSS is quite easy.

The CSS

The all and print medias should be addressed:

@media all {
	.page-break	{ display: none; }
}

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

The first declaration ensures that the page-break is never seen visually...while the second ensures that the page break is seen by the printer.

The HTML

Creating a simple DIV element with the page-break class is how you implement the page break.

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

Quite simple, huh?

The Usage

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

There you have it. The importance of page breaks in the web should not be understated, as many users still print content regularly. Also note that your content may be printed into PDF format and shared.

Recent Features

  • 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...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools: Set Style Per Media

    I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.

  • By
    jQuery UI DatePicker:  Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...