How To Change The Way Your Website Is Printed

Tuesday, August 28th, 2007

Once upon a time, someone wanted to print a website you’ve coded and possibly, designed. This could have been because you needed a hard copy for a client to review the content or because you needed a hard copy for yourself. Regardless, after you picked up the printed pages from the printer, you noticed that:

Your Website Looks Different When Its Printed

It happens, you didn’t do anything wrong. Sometimes printers just don’t know how to transform a static design and pixels into content that fits on an 8.5″ x 11″ page. Luckily, if you’re already using stylesheets, it’s very easy to fix this printing problem. What you can do, is set up a stylesheet for visitor’s monitors, and for visitor’s printers.

How To Specify A Stylesheet For Printing

Using the media=”" attribute for the <link> tag, you can specify which media your link is used for. This is how you link to a stylesheet for use on the computer screen:

<link rel=”stylesheet” media=”screen” type=”text/css” href=”myScreenStyleSheet.css” />

This is how you link to a stylesheet for use only when printing:

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

Please note that you CAN have both of these links (and more) in your header. Don’t be restricted to using only one stylesheet.

Notes About Printing Websites

Before we get into how we can change CSS attributes to best suit a print medium, I’ll mention some notes about printing from browsers in the first place.

Background Colours and Background Images are not printed - By default, your web browser came with the option to “print out backgrounds” turned off.
Different Web Browsers Print Differently - Similarly like when it comes to displaying websites, different browsers print differently like different browsers display unvalidated websites differently. Verify your end result in your webpage’s target audience’s browsers.

When it comes to preparing your stylesheet, there are two paths you can take. You can either strip your website down to a content-centered format, or you can attempt to replicate your website on paper. I personally prefer the first option. Not only is it easier, but honestly, when someone prints out your webpage, do they need to have the search bar and search field? What good does a navigation serve on paper? It’s not like you can click on anything to go to the next set of paper. I’ll go over each option.

How To Change Your Stylesheet So That Only Content Is Displayed

Here are a few tips to use when making your media=”print” stylesheet is focused uniquely on content and useless-when-printed items are not displayed.

Strip Down Your Original CSS File
This means that you litterally have nothing more then #myDivContainer {} or each of your items. This removes all strange positionning and formatting.
Do A Test Print
Look at what items you want and don’t want. Take note of what they’re called.
Make Your Unwanted CSS Items Invisible
Insert display:none; into items that you don’t want displayed. This prevents it from being printed. Your unwanted CSS items should look like this: #badDivContainer {display:none;}
Format What’s Left
Are some items too big? too small? not the right-size? Do they need to float left or right? Add your new wanted CSS attributes by hand. Consider switching your print stylesheet as your temporary screen stylesheet while you make adjustments

How To Change Your Stylesheet So That Your Website Is Displayed Exactly As Its Viewed

Not my recommended solution because this does require some fiddling around. Here are some tips that can help you print out your website so it looks just like it does on the screen.

Validate Your website - This helps reduce the discrepancies between browsers when it comes to printing. Use the resources at W3C to validate your HTML and CSS
Duplicate Your Screen CSS - Duplicate your media=”screen” stylesheet and base media=”print” stylesheet off of it.
Don’t Use Background Images - If you can avoid laying out your website using background images, do so. Images referenced using <img> tags will display when printed
Format What’s Left - There’s probably going to be some fiddling left to do in CSS so that everything looks just right