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:
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 1094×1275 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.
The Print stuff I was aware of – but I never knew you could assign more than one media type to a single CSS file, as you’ve shown with:
media=”screen, projection”
Thanks for another great article!
dumb question: whats a projection??
@Jermayn: Literally, it means just what you think it does. It’s a stylesheet that a projector would use for styling the site. As you might imagine, there aren’t a whole lot of web-browsing projectors out there you really need to worry about. The reason why you see it I think is for Opera. Opera has a full-screen mode which I think will trigger the projection stylesheet, so you can style things specifically for that scenario.
I habe to admit it: I’ve never been a friend of the “Print this page” function for several reasons:
1. This is not content, but a function. These sort of things should be the domain of the browser, not the website, because a user wants to learn once how to print a page and not check on every website again where this print icon/link might be.
2. Modern browsers offer a page preview, which can help you to save paper. Either the content is resized to fit on one page (or any desired number of pages) or you can print the first page only, if you see, that there is no important content on the following pages.
3. If JavaScript is disabled, you have to make sure, that the print-me link doesn’t show. Otherwise the user will have a link that’s not working. Probably the best way to solve this, is to write out the link with JavaScript, so if it is turned off, no link will even be displayed. A lot of work for functionality not really neccessary.
In my opinion, an acceptable approach would be to switch to a print stylesheet (show print version), so the user sees what will be printed and how the print layout looks like or also just can choose this to get an uncluttered (ad-free) design of that page.
But it’s interesting to see what others think about this.
I think in this context, a print this page button works well – as Chris said, it was used for a Kid’s Zone colouring section. It lets the children, who are probably just getting to grips with a computer, that they can print the page out. It also suggests the designer took print styles into account, to ensure it fits on an A4 page. Though I agree, in most situations print should be left to the browser – with the site simply providing a print stylesheet.
Thanks for this, nice quick and simple! :)
Print buttons can be good for iframes. I am putting lengthy terms & conditions inside a small-ish iframe, and want to give users the option of printing the iframe contents but not the parent page
7 years after this article is written, I chuckle while reading about making computer-related things simpler for kids :-) You could probably re-publish this article with minor alterations, and target it towards older adults who are STILL coming to grips with computers!