Back in the day developers often created a separate web page to host the printer friendly version of content. The print friendly page stripped the large headers, footers, side bars and usually advertising. Sometimes the font would be changed from a screen readable font to a paper readable font. Using CSS we can accomplish these goals without even having to do a page refresh. If you are unclear so far, do a Print Preview on this page. You'll see the header is gone. The side bar has been removed. And the content now fills the width of the screen, which means less pages to pick up at the printer. I could go further with stylesheet by changing all the font colors to black to save your color ink cartridges.

Print Friendly Overview

Create a page that is XHTML compliant. Place each section (header, footer, content, sidebar, etc) in it's own DIV with a unique ID. Now hide the sections you don't want to go to the printer using display: none;. You'll probably hide every section except the content, although you may wish to keep the footer for copyright purposes. The last step is to perform minor tweaks to get margins how you like and any color adjustments. Upload the CSS file and add the reference using a media="print" attribute.

<link rel="stylesheet" media="print" type="text/css" href="print.css"/>

Labels: CSS