Printer-friendly web pages, which present content that is structured specifically for being printed on paper, are a breeze to implement with Cascading Style Sheets. By utilizing CSS to style your content for printer output, you can avoid having to create duplicate versions of all the content on your site.
A main tenet of web standards is the separation of content and presentation. Web developers use markup to meaningfully structure content on a web page, and then turn to Cascading Style Sheets in order to stylize that content for the output device (which in most cases is the visitor’s computer monitor). Printers are also output devices though, and a web developer can specify a special stylesheet to be applied to a page’s content when the visitor chooses to hit “Print”.
Step 1: Put together your print stylesheet
First things first — put together a stylesheet that stylizes your content so that it can be read easily when printed on paper. A lot sites do this by excluding backgrounds and unnecessary images, stripping extraneous navigational features such as sidebars, and rendering the text in a plain font in dark type on a light background. Don’t take this to mean that these are the necessary features of a printer-friendly web page though — you are the developer, so deciding what works best is of course up to you and your designers.
Step 2: Link the printer-friendly stylesheet
The following code goes in the <head> section of your web page:
<link rel="stylesheet" type="text/css" media="print" href="/mySheet.css" />
The media="print" attribute tells the browser that this stylesheet should be used when the visitor prints the web page. The href="/mySheet.css" should of course be replaced with the URL to your printer-friendly stylesheet.
Photo by blakespot.
