Nice printing with CSS page breaks

Surprisingly enough, many web users still likes to print web pages, so they’re having the data at hand, even if they’re online.

How frequent this behavior is, greatly depends on you content, but if you ‘re having content where off line usage makes sense, you should spend a few minutes looking into how printer friendly your pages are.

In this post you’ll learn to create nice page breaks by using CSS

CSS for nice page breaks

The CSS for the page breaks is quite simple. You need to add a new CSS class “next-page” is added to your page. To prevent that the class is displayed when the page is rendered in a browser, a “@media all” in included that contains information about hiding the class.

In cases where the page is being printed, a “@media print” is added, that inserts a page break when the “next-page”  class is used.

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

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

To insert page breaks at specific places in your content you simply inserts a “<div class=”next-page”></div>”.

As defined in the CSS, this DIV is invisible for normal browsers, but when the page is printed, it inserts a page break.

<h1>Page Title</h1>
<insert content for page 1 here>
<div class="next-page"></div>
<insert content for page 2 here>
<div class="next-page"></div>
<insert content for page 3 here>

See example here

Conclusion

In pages with content that users often are printing, it is useful to insert CSS defined page breaks, so you haver better control over the layout.

The method id this post is quite simple; add a new css class that’s generally invicible, but only creates page breaks when the content is being printed.

Recommended further reading:

---

The Book of CSS3: A Developer’s Guide to the Future of Web Design CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into…

---

CSS3: Visual QuickStart Guide (5th Edition) With CSS3: Visual QuickStart Guide, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference…

---

CSS: The Missing Manual Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site’s appearance. You can tap into the real power of this tool with CSS: The Missing Manual….