Nice printing with CSS page breaks

Create nice printouts with css controlled page breaksSurprisingly 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.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.