With some CSS based trickery, you can provide those “PRINT THIS” versions of your pages without much effort. May be old hat to some (since almost all major browsers support the alternate stylesheets since 5.x versions) but very useful. Well, that, and a useful way to print links in a printed page with only CSS
If you’re using CSS to style your sites, even if you’re doing a tabled layout, use a print stylesheet to hide the parts that don’t need to be printed, and reduce the colors to black and white (if appropriate).
The call is simple:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
This will work in most 5.x browsers.
Consider embedding print-friendly logos in the page as well, and
setting them not to display in the page, but to display when printed.
In your print.css file, you can change the colors of all your text
and page colors to black on white, reset your font sizing units, hide
your navigation bars (consider keeping any breadcrumb trails and
basic contact information), and generally get more space for the
content of the page without eating all the colored ink in your user’s
printer.
Sample sites (use print preview in your browser to see how each looks
without wasting the paper):
- http://algonquinstudios.com/articles/
- http://www.city-buffalo.com/document_253_19.html
- http://roselli.org/adrian/books/handbook.asp
With a little more code, you can even get the URLs of your hyperlinks
to appear with the hyperlinked text in more standards-compliant
browsers:
a:after{content : " [" attr(href) "] " ; }
One Comment
This is a super tip and will save us many hours coding alternate templates for printing!