I’m thinking of updating the site and creating printer friendly pages. This seems like a good idea as we have lots of tutorials and such that people (like you!) might want to print out. So, how do you create printer friendly pages?
‘Providing separate stylesheets for printing a web page was good idea in theory, but in practice it all falls down.’
The idea here is to involve server-side script (PHP and ASP based systems) which will reload the target page and replace regular CSS file with stylesheet especially suitable for printing an article, entry, post or whatever.
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.
Maratz.com seems to have the best solution. Here’s how it works:
Setting up 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” href=”print.css” />
<?php } else { ?>
<link rel=”stylesheet” href=”default.css” />
<?php } ?>
ASP print script
<% If Request.QueryString(“q”) = “printme” Then %>
<link rel=”stylesheet” href=”print.css” />
<% Else %>
<link rel=”stylesheet” href=”default.css” />
<% End if %>
You can read the full article over here:
http://www.maratz.com/blog/archives/2004/09/21/10-minutes-to-printer-friendly-page/
PS – If you’ve found this article useful, please consider giving us a Digg or StumbleUpon.
Regards,
Ivan
Twitter: @ivanwalsh
Facebook: http://www.facebook.com/ivanwalsh
Flickr: http://www.flickr.com/photos/ivanwalsh
Templates: http://www.klariti.com
Tips: http://www.ivanwalsh.com
Related posts:
- How to Create Printer Friendly Page | No Coding Skills Required How to Create Printer Friendly Page | No Coding Skills...
- Screenshot Tips – How to create special effects with Snagit Screenshot Tips – How to create special effects with Snagit...
- Why Your About Us Page is the Second Most Important Page on Your Site? You find a blog you really like. You want to...
- Groundswell – How Social Media Technoloiges Really Work I’ve been reading this book most of the weekend. It’s...
- FrameMaker hotfix – printing docs to PostScript printer If this happens to you when using Frame, try the...
