David Kendall

On a daily basis I stumble across many websites with a ‘print this page’ feature. Some use complex javascript to strip out images and certain content, others make a call to the database for simply the content text and others maintain seperate files made purely for printing!

What a lot of hard work just to print a website! I can create a print this page script in one line of code, using my old favourite, css.

The layout of websites often aren`t print friendly, especially for older printers with set margins available to them. On the web we can use an abundance of images and colours which agai throw a printer into a panic.

So, up steps the web superhero, css. When a web browser views a page it looks for a stylesheet, something like this;

<link rel=’StyleSheet’ type=’text/css’ href=’/css/mystylesheet.css’ media=’screen’ />

The key part of this is the media=’screen’. As a browser looks at a stylesheet designed specifically for display on a monitor (screen) it also looks for one when you try to print. So when you press print, if the browser finds a stylesheet telling it how the page should print, it will use it. OK, less of the waffle, here’s how to tell a website browser how to print the page;

<link rel=’StyleSheet’ type=’text/css’ href=’/css/mystylesheet.css’ media=’print’ />

It is really as easy as that. All you have to do to create the most effective print this page script is to build another stylesheet specifically for printing.

So what are the common things to specify in a print stylesheet? You will want as much contract as possible so you may wish to set the page page background to white and the font colour to black.

body { background: #ffffff; color: #000000; }

Strip out navigation and only print content

#navigation { display: none; }

Or you may also wish to remove all images

img { display: none; }

You have all css commands at your disposal to tweak your website to print exactly how your users will want it. This is great for your users if they need to print your website and requires no complex javascript or extra maintenance.

Give it a go and have fun!