Print Stylesheet - The Definitive Guide
By Trenton Moss2008-01-24
The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don't need to repeat any colour or branding CSS commands as they'll already be taken from the main stylesheet.
Generally speaking, you'll want your print stylesheet to make the following happen when users hit that print button:
Remove unwanted items
Usually it's just your organisation logo and page content that you'll want to appear on the printed version of the web page. You'll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.
There may be certain isolated items you'd prefer weren't printed so you can simply assign these class="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: none command:
#header, #nav, .noprint {display: none;}
You may also want to remove certain images and adverts, especially animated images as these won't make sense when printed.
Format the page
There's nothing worse than printing off a web page to find the last few words of each line cut off. It's also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.
Generally speaking, the three CSS commands you'll need are:
width: 100%; margin: 0; float: none;
These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:
#container, #container2, #content {width: 100%; margin: 0; float: none;}
Change the font?
Some print stylesheets do change the font size (often to 12pt) but this isn't generally a very good idea. If users increase text size on the screen then the text will print in this larger font size... unless you specify a fixed font size in the print stylesheet.
Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.
Do also bear in mind that background images and colours don't print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.
Links
Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:
a:link, a:visited {color: #781351}
For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It's otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example3 and find out how to do this by reading this Improving link display for print4 article.
Tutorial pages:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
