Quick Tip: Making a ‘Print This Page’ Button

Chris Coyier //

print-this-page-example.jpg

Why bother?

Most people know how to print a web page, so including a "Print This Page" button on a website is often overkill. But there are some circumstances where it really makes sense. I just came across one of those circumstances in some work I was doing for a client so I thought I would share.

The site has a "Kid Zone" with a bunch of games and fun things for kids to do, including some coloring pages. These coloring pages were black and white outlined images intended to be printed out by kids on their home printers. Then they can get out their crayons and go to town =). I wanted to make it as absolutely simple as possible to print the coloring pages as possible. At first it seemed like making them into PDF's would be a good solution, since I would have complete control over the page and get sure results. But the more I thought about it the more it seemed like an unfriendly solution for kids. Kids would have to download them, then know that they then had to find them on their computer and open them in a PDF viewing program and print them from there. I'm sure there are plenty of wiz-kids that would have no problem with that, but I wanted to make it even easier if possible.

I decided to make simple web pages for each of the coloring pages. Each page consisted solely of two images: the color page image itself and a big "print this page" button right at the top. Here is the trick, use a unique ID on the "Print This Page" button, declare a print stylesheet for the page, and set display to none.

In your head section:

<link rel="stylesheet" href="../../stylesheets/coloringpage.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="../../stylesheets/coloringpageprint.css" type="text/css" media="print" />

The button:

<a href="javascript:window.print()"><img src="../../images/click-here-to-print.jpg" alt="print this page" id="print-button" /></a>

The coloring page image:

<img src="../../images/coloring-page-1.gif" alt="Coloring Page 1" width="1094" height="1275" />

The CSS:

#print-button {
	display: none;
}

The button image:
click-here-to-print.jpg

The important points:

  • Make the page print as simple as possible. Use a print stylesheet to help.
  • Don't print the "Print This Page" button itself.
  • Simple javascript is all you need to trigger the print dialog box.
  • Test your printed results in different browsers. It varies just like on-screen appearance does.

I found that, especially when printing one big image like I was, that the results across different browsers were wildly different. Some browsers would force the image onto one page no matter what, some would have no problem splitting it, and actual size on the printed page was always a wildcard. After a bunch of testing, I found that forcing the width and height to 1094x1275 seemed to work for me. This kept it as large as possible on the page without splitting onto two pages on any browser. Your mileage may vary, this is just what worked for me.