CSS and Printing

Web site developers spend a lot of time making sites presentable and functional. Unfortunately many developers spend very little time dealing with what sites look like when people print a page.

Older websites had to use alternate printer friendly pages to get rid of navigation, advertising, and web formatting. This meant that there was at least two sets of content for every page on a site, roughly doubling the size of a website, and requiring two sets of data be updated every time a page is updated. It was an ugly and time consuming system that very few sites implemented.

As it turns out, its really easy to make printer friendly pages if you update your site to use css. CSS (Cascading Style Sheets) allows you to seperate your content from your layout. Of course, there are still tags surrounding content, but what tells the browser how to display the content is in one place, usually its an include file.

With CSS, you don't just tell the browser how to display pages on a screen. With the inclusion of the Media tag, you can create a set of css tags that only take effect when the page is sent to a number of different media devices. such as screen, print, handheld, and aural.

I have three sets of css on the Swordbrother.com site. One is my global css, one is my print css, and the third is a vestige from a time when I had a red background on my index page.

For backwards compatability reasons, the global css does not have a media tag. This ensures that older browsers will not stumble over the media tag, or refuse to use the stylesheet due to a tag that they don't understand. It also means that all the css with media tags will have this global css cascade into them.

Comparing the print css to the golbal css shows that there are a lot fewer lines of code in the print css. This is because some of the code in the global css is identical to the code in the print css. The only entries that need to be in the print css are tags that modify the ones from the global css. Most of the modifications are for objects that don't need to be displayed at all. They just get a display:none tag.

The results of adding the print css are evident when you print, or print-preview any page on this site. You'll notice that the background, red title and navigation at the top, and the ads/links at the bottom of the page all go away, leaving a page that's mostly content.

That means you don't waste paper, ink and time when you print a page off of my site. Now, if only I had some pages worth printing!