Website Printability

Why should you be concerned with Printability? It’s simple, if you have spent any time at all making your site Pixel perfect and strive to meet the strictest of standards. Even if you offer information in the form of articles and tutorials then it’s in your best interest to go the extra step and create a print.css file.

Another good reason is you make better use of paper when printing, normally you end up with a header or a footer on its own page, maybe a side bar or an add tucked in there some were. all things while serving a purpose in the website don’t have any business being in a print document. Each browser will handle printing differently (default style settings) unless told other wise by a style sheet.

A print.css file should remove all non-essential content, colour, and images from the document, using display: none on any css classes or ID tag you want to hide. At a minimum you should hide the header, footer, sidebar, and Comment elements but keeping your site title, page title and content formatting intact.

If you have images in your articles then make sure to float them so they appear inline with your content and not as an obtrusive chunk.

Considerations:

1. What do you want the printed page to look like?
2. Do you need to include Banners or Adds?
3. Do you need colour?
4. Do you need to keep the header and footer in your printed page?

On my previous site i took the Graphical logo and hid it in the print version while in the standard screen version i hid the text title. Think of a printed page as something you might type in Word. You want it to remain professional while reflecting your sites identity.

What do you need to do to pull this off?

First include the print css file something along these lines:

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

Next i find its easiest to view the source of your site and attach the print.css file as a screen file to minimize the amount of print preview needed to see the effect. Using display: none on classes and ID’s that are not needed in your print document strip out anything pertaining to style like colour or background images. Padding and alignment are still important to maintain in the content of your site.

Once you have narrowed don’t to what stays and what goes you can then start to gather up like elements to keep a simple and small file.

.header, .footer, .addblock { display: none; }

Its important to set a default font size under the body tag, 10px or 12px work well, you don’t want to go to small or to large. another suggestion is to remove text decorations on links since they will only show up as words so there is no need to differentiate them from the rest of the paragraph.

Once you have the results you are looking for set the media type back to print.

In the end you should be left with your formatting font sizes as few colour’s as possible, all unrelated site content removed and left with a simple to read, printer friendly version of your site.