Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Advanced CSS Printing -- Using CSS Page Breaks

DZone's Guide to

Advanced CSS Printing -- Using CSS Page Breaks

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 Code

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

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

The XHTML Code

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

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 block -->

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of David Walsh. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}