10 Minutes to Printer Friendly Page
Providing separate stylesheets for printing a web page was good idea in theory, but in practice it all falls down. Let’s see if we can do something about it. If we could involve server-side script (there’s solution for both—PHP and ASP based systems *wink, wink*) which will reload that particular page, but replace regular CSS file with stylesheet specially suitable for printing an article, entry, post or whatever-you-wanna-call-it, this would make a hudge step forward towards better usability of our web site. Oh, and yes, Google will just love it!
One page, two stylesheets
Okay, you probably have a page with some content and you probably have styled it with some CSS. If you already have print stylesheet for your page, just skip ahead to the next part.
To make stylesheet for printing, decide what parts of your layout are not likely to be printed (like various banners, navigation etc.). The simplest way to hide them is to define them as display: none;. If you are not familiar with stylesheets for print read more about it. Anyway, keep it simple—black text on the white background, with a font-size: 12pt; is a good start. When you’re done with it, continue reading.
The query
Now that we have all client-side ingredients in place, we can put it all together. First, we have to add a link somewhere around the article, for example:
<h1>Title of the article</h1> <p>Lorem ipsum...</p> <a href="?q=printme">printer friendly version</a>
It literally means we are requesting this same page, but with a query q=printme. To make our page recognizes what we are asking it, we have to add somewhere in the <head> section some logic, something like:
“If i’m asked to ‘printme’—i’ll load my printing stylesheet, and if i’m not asked anything—i’ll load my default CSS file.”
Depending of your preferences there are two scripts—PHP and ASP. Backup your HTML file and replace the part where you called your CSS file with one of the following examples.
PHP print script
<?php if ($_GET['q'] == "printme") { ?>
<link rel="stylesheet" type="text/css" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="default.css" />
<?php } ?>
ASP print script
<% If Request.QueryString("q") = "printme" Then %>
<link rel="stylesheet" type="text/css" href="print.css" />
<% Else %>
<link rel="stylesheet" type="text/css" href="default.css" />
<% End if %>
Happy printing
Your visitors will love this, as they can decide whether they want to print your page for its’ graphics or just the plain text (see printer friendly version of this entry). As a benefit, Google will index two versions of the same article which should also help boosting your page rank.
Suggestions and re-workings are welcome as usual. Have a fun and please contact me when you make yours. I’d really like to see how you solved it!
Update
Almost one year later, Roger Johansson pulls out the subject for reconsideration – Print-friendly CSS and usability.
20 Comments
Nice tip Marko! Thanks.
Comment (#) by Sime Ramov — 21st September 2004.
Šime, i’m glad you like it!
And by-the-way, i’m a little-bit late, but Happy Birthday, old buddy!
Comment (#) by marko — 22nd September 2004.
Thanks!
And for the tip in the article, I will likely use it on my upcoming weblog :)
Comment (#) by ©ime Ramov — 22nd September 2004.
Hi Marko, nice tip!
Just a small remark for those who have php’s error_reporting set to E_ALL - to aviod being issued a warning from php about $_GET[’q'] not being defined, use this:
<?php if (isset($_GET['q']) && $_GET['q'] == 'printme') { ?><link rel="stylesheet" type="text/css" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="default.css" />
<?php } ?>
Comment (#) by zytzagoo — 22nd September 2004.
Zyt ;-)
Comment (#) by marko — 22nd September 2004.
Why is this necessary? You can accomplish the same thing by using the media attribute of the link tag.
<link rel="stylesheet" type="text/css" href="print.css" media="print" /><link rel="stylesheet" type="text/css" href="default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="pda.css" media="handheld" />
Comment (#) by bryce — 22nd September 2004.
Bryce, please read this article for explanation: CSS, printing and user expectation.
Comment (#) by marko — 23rd September 2004.
This is a good tip, one I thought I was very clever to think of about a year and a half ago. ;)
See an example here:
Northwestern Observer article
Northwestern Observer article (printable)
It uses an SSI check of the URL parameters. If there is “printable” as a parameter, it includes a print stylesheet, which in turn hides every element in the source marked with class=print-hide (or specifically called out in the print stylesheet, like the nav).
Comment (#) by tom sherman — 23rd September 2004.
Tom,
Thank you for the resource. Here’s what it would look like with just plain old SSI (Apache server):
<!--#if expr="$QUERY_STRING = 'q=printme'" -->
<link rel="stylesheet" type="text/css" href="print.css" />
<!--#else -->
<link rel="stylesheet" type="text/css" href="default.css" />
<!--#endif -->
And of course your should rename your file’s extension to
.shtmlinstead.htmlto make SSI work. Read more about SSI techniques.Comment (#) by marko — 23rd September 2004.
Cameron’s article is interesting and worth reading, sure. But it is wrong approach. One visitor may want to print ad from the page. One thousand ohters want only content. I choose 1000.
If you are going to server something different for the print request - serve different HTML (and CSS), not CSS only. Why? Because serving print CSS on separate request defeats print CSS as such.
Scenario A: you have HTML code with two css
files linked : one fomr media="screen", another for media="print". If someone decides to print it is available ant instance, no extra requests to server. Even more, CSS are cached so…
Scenario B: you serve same HTML, but request another CSS from server. What you get - you double bandwidth consumption for the HTML itself - adding ?q=print will force rerequest the same page again. Some browsers and proxy servers won’t cache such requests. You end up always downloading same html code again and again, and this will be the code with some content which is never printed - hidden in print CSS. What’s the point?
My suggestion - do not complicate simple things.
Proper print CSS linked via media="print” is all you need.
Comment (#) by Rimantas — 24th September 2004.
I didn’t say one should not use separate stylesheet for printing. This article only explains how to make a printer friendly version of the web page.
I must say i choose every visitor i can get. Can’t help myself…
Comment (#) by marko — 24th September 2004.
Pardon me:
That does not sound quite like
As I see it it sounds like this: how to serve the same non cacheable page with all extra markup which won’t be used at all for the second time.
That’s twice the bandwidth - for you and for your visitor.
And really - what is an advantage compared to good old media="print"? Result is the same at the price of doubled traffic and waiting time.
Well, we all have our ways to serve every visitor we can get… Just trying to server every we can easily hurt the wast majority.
Over and out.
Comment (#) by Rimantas — 25th September 2004.
Rimantas,
No heart feelings : )
Exactly, and if you like it this way, you’re free to use it. If don’t, at least let other people decide for themselves.
And what seems to be logical to you, doesn’t have to make sense for someone else. That’s interesting part after all when talking about usability—there’s no just one absolute solution to a problem and it all might depend on the situation.
Comment (#) by marko — 25th September 2004.
The reason this is a good tip is because of user expectation, not the fact Marko has come up with a server side switch for stylesheets… While working with some rather large Web Sites users would complain that once we employed a print stylesheet they weren’t printing what they had expected to print… By providing a similar option to what Marko has detailed here we were able to please ALL of our users… which, last time I checked, was the point… The overhead on adding such a feasture is so minimal that the arguements listed above are just silly…
Comment (#) by Alex — 25th September 2004.
Nice idea.
I recently had to pull a print stylesheet because the client was printing clean printable pages and complaining that all the “swishy” layout had disappeared.
The tactics employed need to depend on the target viewer, but in a corporate situation it seems to me that most people will expect a ’screen-dump’-style printout.
The key (and what makes this method so cunning…) is not only to give people the choice of print formats, but to present the option as a usability feature. Every client loves usability, whether they know it or not.
I’ll use this one.
Comment (#) by Ben — 2nd October 2004.
Of course, if the page URL already holds a query and that query defines the content,
<a href="?q=printme">printer friendly version</a>will drop the previous query so beware of that.Comment (#) by Robin Millette — 18th October 2004.
Fine tip, but its implementation can be problematic in dynamic sites, when it’s not always that simple to reproduce the context in which the ’screen-friendly’ version of the page was produced (data posted from forms). Also, it’s a pity to have to go back to the server and request the same page again. The solution I’m working on uses alternate stylesheets (using a style switcher based on Paul Sowden’s ALA article).
By using alternate instead of device-selected stylesheets I’ll let the visitor choose which version he wants to print, without having to send a new request to the server and without the need for server-side scripts.
Comment (#) by Zorglub — 21st October 2004.
The main drawback of JavaScript styleswitcher is that it breaks “Back” button functionality.
With slight style changes such as different header image or font size, user is still in control, because he knows where he clicked to activate the styleswitch and he can easily switch back. Printer friendly version should not have switch back link, otherwise it loses it’s purpose—displaying the main content only. If user come to printer friendly page from which he cannot get off, that’s simply not usable solution.
Comment (#) by marko — 21st October 2004.
It is true that, since the style switcher does not add an entry to the browser’s history, you can’t use the ‘back’ button to switch back.
Saying that I would use alternate instead of device-driven stylesheets was actually incorrect.
What I do is to combine the two. The printer-friendly version is just another version, written with the printer in mind, but this doesn’t exclude that I’m putting a similar control that allows to switch between any of the (possibly more than one) other style sheets.
In fact, I also use the media print stylesheet to do some final cleaning before the page is printed.
I might be accused of tricking the visitor into believing that the switcher is printed as well, but I don’t think that he will be disappointed by its absence…
After all, the objective is to allow the user to choose between a layout designed for the printer and the ‘default’ layout of the page, and that is something the style switcher does fine.
However, you have a point with the broken “back” functionality. I hadn’t thought yet of the possibility that the visitor might try to use the back button to perform the switch. He might be a bit surprised by the behaviour.
I could of course add a line of text at the top of the printer-friendly page to tell users what exactly will be printed and how to return to the other layout, if I find that this behaviour gets really disturbing, but for the time being I’ll rather put my money on their learning ability and hope this will not become necessary.
In the case of my database-driven website, anyway, the advantage of not having to regenerate sometimes rather complex contexts very much overweighs the disadvantage.
Comment (#) by Zorglub — 21st October 2004.
Good article - though that’s not why I’m writing :-)
I get FOUC (flash of unstyled content) on this page (am going through citrix metaframe) winxp prof IE 6. Actually FOUC is a bit of a misdescription, if i go to the printerfriendly version first and then come back I see the page in all its glory. :-)
Comment (#) by Mark Saunders — 20th December 2004.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.