Treehouse

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.

ydkjs-5.png

Recent Features

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...

Incredible Demos

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

  • MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...