printer friendly version

Printer-friendly version

You can create printer-friendly versions of any page with PHP, of course if you know how to use CSS. Somewhat advanced knowledge of HTML and CSS is required, though. This is a copy/paste kind of tutorial, but if you want to be sure you will understand all how's and why's, you should be familiar with PHP basics.

Before we begin...

First of all, you must have a HTML page with no fancy formatting. Let the magic of CSS make the pages visually appealing. Don't define any color properties in HTML, such as backgrounds and link colors - we want it all to be neat and clean. Then, you should have two versions of stylesheets: one that will make your visitors "WOW" when they see the excellent design you made, and the other one that should be plain black letters on white background with some shades of gray if needed. For an example how to make a printer-friendly stylesheet, check out mine.

Now that you have all files prepared and ready for linking, you'll see you've already made 90% of the work.

Attach the right stylesheet

First, we should check if a "print mode" is required. If yes, we'll link the simple stylesheet, otherwise we'll link the main stylesheet. Insert this block of code where you usually put the <link rel="Stylesheet" href="style.css" type="text/css" /> line.

	if($mode == 'print') $stylesheet = 'simple.css';
		else $stylesheet = 'style.css';
	echo '<link rel="Stylesheet" href="'.$stylesheet.'" type="text/css" />';

Note that simple.css and style.css are names of your stylesheets.

Make it user-friendly

Now, we should make a way for our visitor to view the printer-friendly version. The link should look like this:

<a href="<?php echo $_SERVER['PHP_SELF'].'?mode=print'; ?>">Printer friendly version</a>

This will work if you are not using dynamic inclusion, but if you are, the difference between the code above and the one you need is in a single character:

<a href="<?php echo $_SERVER['PHP_SELF'].'&mode=print'; ?>">Printer friendly version</a>

By clicking on the link, the page will be refreshed with a different stylesheet. You can easily provide a link back to normal page:

<a href="<?php
	$url = $_SERVER['PHP_SELF'];
	$url = str_replace('mode=print', '', $url);
	echo $url;
?>">Back to normal page</a>

Now, we can round up this tutorial by adding a more dynamic feature - the link to printer-friendly version will appear if normal mode is selected, and if the visitor is viewing the printer-friendly version we'll provide him a link back.

	if($mode == 'print') {
		$url = $_SERVER['PHP_SELF'];
		$url = str_replace('mode=print', '', $url);
		echo '<a href="'.$url.'">Back to normal page</a>';
	} else
		echo '<a href="'.$_SERVER['PHP_SELF'].'?mode=print'.'">Printer friendly version</a>';

After you saved your index page with the extension .php you're done. I hope you understood everything and learned something new. You can use this mode check for numerous things, do not limit yourself to the purpose shown in this tutorial :)

Share this tutorial with your friends!

My new book is out!

The Human Centered Brand by Nela Dunato

Branding & web design by Nela Dunato