Ninjapenguin

Print CSS - Beyond Styling for Screen

Styling for print

We should start off by hiding all non-applicable content, footers, headers, adverts and navigation all qualify for candidates depending on your circumstance, this is easily achieved through the 'display:none;' attribute. Links should be styled such that they are visible when printed in both color and greyscale. Wasted space should be reduced to a minimum and font size should be reflective of the fact that they will reproduced on a physical medium.

On this site I started by hiding the top navigation and footer, I also hid the side bar when viewing the blog. I changed the font size to a pt measurement which is more appropriate to printed text and finally changed the header styling so that the same header feeling was still achieved without the use of any images etc.

For those users viewing the site in Gecko based browsers (and Safari) I have also employed the use of some CSS 2 selectors which will handily print out the target of a link immediately after the actual link inline within the text (Fig. 2). This is particularly useful when printing off a page as it helps to restore some of the lost functionality of inline hyperlinks. Legacy browsers will simply not recognise these rules and thus no adverse results will result.

Figure 2: CSS Selector Code

#main a[href^="/"]:after {
   content: " (http://ninjapenguin.co.uk" attr(href) ") ";
}

CSS to append a links 'href' attribute after the link text surrounded by brackets

Summary

Hopefully this little article has shown another facet of CSS available to us as content providers. Before CSS creating printer friendly sites was almost impossible, now it should be an extension of our site design. It is also fair to comment that the same logic is true for a number of other devices, handheld internet browsing is for instance becoming increasingly popular and so it could be, dependent on your target market that this should also be a real consideration.

The above is simply a very brief introduction to the technology, aimed at providing you with enough knowledge to go away and try this out. For more detailed information view the further information section below.

If you would like to comment on this article then please visit it's official blog entry here

/Matt

<< prev