By Lux

July 13, 2004

A commonly requested feature, and consequently a complaint for those CMSes who don't have this feature (not including Sitellite, as our example site includes one out-of-the-box, although I'm about to expose the trickery behind it), is a "Print this page" or "Printable version" button.  Well, I'll just come right out and say it:

Every CMS that supports HTML and CSS (ie. all of them) has "Print this page" capabilities.

That's right.  And it didn't even take a secret midnight meeting of the various CMS teams to make it happen.  Rather, using a simple one-liner of Javascript and some basic CSS, you too can have a "Print this page" feature on your site in minutes.

Notice to users doing this in a fresh Sitellite installation: Before going forward, you've already got both steps 1 & 2 done for you.  Want proof?  Go to File > Print Preview in your browser and you'll notice that most of the web page has been stripped away and only the header, centre column, and footer are left.  This is because the default CSS stylesheet in Sitellite already has the necessary CSS to render the printer-friendly output.  Read on for the explanation however.

Step 1: Create the necessary CSS changes

The CSS specification allows you to specify different styles for different output mediums (ie. screen, print, handheld, braille, etc.), using the following syntax:

@media print {

	/* styles for print output go here */

}

The printer-friendly CSS from the default Sitellite template is as follows:

@media print {
	#banner {
		background-color: #fff;
		color: #000;
		border-bottom: #000 1px solid;
	}

	#banner h1 {
		color: #000;
		font-size: 16px;
	}

	#leftcontent {
		display: none;
	}

	#rightcontent {
		display: none;
	}

	#centercontent {
		width: 100%;
		border: 0px none;
	}
}

What we've done here is change a few background colours to use less ink (ie. white backgrounds), and we've hidden a few areas of the screen (the left and right columns).  That way, visitors are only printing what they want, and not a bunch of extra content that doesn't pertain to what they're looking for (ie. web site navigation, advertisements, logins, polls, etc.).

You can change the style all you like, and to preview it simply go to File > Print Preview in your browser to see how your changes will appear.

Step 2: Create the link

Next you'll need to inform users that you're offering a printer-friendly version of your web pages.  The best way to do this is with a link to the printer-friendly version.  But why not save them a step and simply invoke the printing dialogue for them?  To do this, include the following like wherever you want your "Print this page" link to appear:

<a href="#" onclick="window.print ()">Print this page</a>

Or to be internationalization-friendly too (for Sitellite users only), we could say:

<a href="#" onclick="window.print ()">
    <xt:intl>Print this page</xt:intl>
</a>

We've now successfully created a "Print this page" feature, compatible with any CMS, without the need for any additional templates or coding.  Go web standards!

References:

http://www.w3.org/TR/REC-CSS2/media.html

Home   More Tips and Tricks Stories