A print stylesheet — a special stylesheet which formats your website for printing — can be utilised to hide unneeded parts (the site navigation) and save ink for your visitors (swap that white text on a black background for black text on a white background!).
Here are some tips for improving your print stylesheet.
Don’t repeat yourself
Instead of re-writing all the styles in your print stylesheet, simply add it to the bottom of your standard stylesheet with the following code:
@media print { // your print stylesheet here }
This will save you time — you only need to change the offending details, not re-write the whole design — and will save a http request too.
Hide navigation and change the width
There is no need to waste paper and ink printing your website’s navigation, and if your website is a long, thin column then forcing the width to fill the page could also save paper. Try the following code (add it to the print stylesheet area — and change the ids to match your site’s code)
div#nav { display:none; } div#wrapper { width: auto; }
Show where your links point
Links in your document, when printed, are pretty useless. They will just show as underlined text which (obviously) cannot be interacted with on paper. You can improve this by automatically inserting the address of the link:
a:after { content: " (" attr(href) ") "; font-size: 90%; }
Result:
Rubious (http://www.rubious.co.uk)
Control page breaks
You can also make sure there is a page break before a certain section, or try to stop page breaks just after a header, with the content on the following page.
div#page2 { page-break-before:always; } h2, h3 { page-break-after:avoid; }
Combining these ideas, you can really improve things for your viewers who print out pages from your website!
