scriptygoddess

15 May, 2002

Easy "printer-friendly" versions of webpages

Posted by: Jennifer In: Lessons learned

I'm working on a design of a website, and they *just* came to me and reported that the site doesn't print out that well. DOH! Cetain pages really need to be "printable" – how hard would it be to make a printer-friendly version?

There's an easy solution with PHP coming… (I just LOVE PHP! Can you tell? LOL!)

Duplicating all the pages and formating them so they're printer friendly wouldn't be all THAT bad (although it would be a major nuisance – then again, I get paid by the hour) 😉 what WOULD be more of a concern to me – is that means duplication of content. Should they make a change to one of these pages, they'll need to make sure they make the same exact change to the printer friendly version. Yuck!

You see the problem is there's a sidebar that would need to go away to make the page print better. And luckily, everything but the main content of the site is in includes…

sooo… there's a VERY simple solution:

<?
if (!isset($print)) {
?>

…..whatever HTML should print for the "non" printer friendly version…

<? } else { ?>

…whatever HTML (if any) should print for the PRINTER friendly version…

<? } ?>

I hve that little snippet of code all over the place now… I'm even changing the background image depending on if it's to be printer friendly or not…

<?
if (!isset($print)) {
$backgroundimage = "/images/background.gif";
} else {
$backgroundimage = "/images/printerfriendlybackground.gif";
} ?>

and then I do this in the body tag:

<body background="<? echo $backgroundimage ?>" >

Then to load the printer friendly version…
I need to create a link that looks like this:

<?
if (!isset($print)) {
?>
<p><a href="<? echo $PHP_SELF ?>?print=yes">Printer friendly version</a></p>
<? } else { ?>
<p><a href="<? echo $PHP_SELF ?>">view original</a></p>
<? } ?>

If you're smart, you'll figure out a way to put that line in one of your includes so you don't have to paste that on every page… although it's STILL better than duplicating all those files!! :)

7 Responses to "Easy "printer-friendly" versions of webpages"

1 | Lynda

May 15th, 2002 at 1:06 pm

Avatar

There's another version somewhere I saw and for the LIFE of me can't find it or figure it out (might help if I spent some time doing it)

Basically what it did was put some sort of container tag around the text to print and then the "print" option popped up and displayed just what was in that container tag.

Something like that might work better for blogs wheras your solutions might work best for whole websites.

The container tag was something like a regular HTML comment tag:

<!– START ARTICLE 198 –>

Article goes here

<!– END ARTICLE 198 –>

Then it would display everything between start and end. I wish I could find at least the sites I've seen in the past doing that!

2 | Jennifer

May 15th, 2002 at 1:20 pm

Avatar

Hmm… Now I'm on a mission to find that… that would be QUITE cool…

So far i found this:

<LINK REL=alternate MEDIA=print HREF="http://www.netmechanic.com/">

That makes it so the page at the end of that HREF is the one that prints instead of the actual page… (supposedly – haven't tested it)

However – that is IE only… :(

3 | kristine

May 15th, 2002 at 1:34 pm

Avatar

In the Oscar Meyer Winer song tune
My desktop has a link on it…
It's been there for many days…
But I haven't really read it yet,
So I'm sharing it here instead 😉

That song is stuck in my head, and so now everything comes out in lyric form. LOL!

NUBlog: a better printed page

4 | taing

May 15th, 2002 at 4:53 pm

Avatar

How about using CSS for this instead? There's some good info on the over at A List Apart.

5 | Jennifer

May 15th, 2002 at 5:30 pm

Avatar

The link that Kristine pointed to actually talks about the same thing. As with many things – there are a number of different ways to accomplish the same task. Neither is wrong or right – it's up to the web designer to decide which best suits the situation.

In my particular case at work – it wasn't that I needed to change the fonts or styles, I needed to drop an entire column from a table… (among a few other details – some images needed to change, etc.) – I wanted to do all this with the ABSOLUTE MINIMUM duplication of files – if possible NO DUPLICATION of files.

If you're planning ahead, I'm sure there's other ways too… This worked for me in this situation, was fast, and required no duplication.

6 | taine

May 15th, 2002 at 5:39 pm

Avatar

The nice thing about the ALA article on print friendly stylesheets is that is goes on to explain how to create a stylesheet that will not print your banner ads or sidebars or will let you eliminate the background that prints funny. Of course it is limits to IE5+ and Moz (possibly Opera). NS4.x will ignore the print specific stylesheet.

7 | Babu

May 16th, 2002 at 7:25 am

Avatar

Here's one I wrote and have been using for 2 years now:

http://vsbabu.org/webdev/phpdev/printit.html

Implements the same idea Lynda explained.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements