SniptoolsSniptools | Design & Technology Observations

RSS

Print versions of websites

Nov 9th 2002
One Comment

Respond
Trackback

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):

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) "] " ; }



This post is tagged

One Comment

  1. Marc

    This is a super tip and will save us many hours coding alternate templates for printing!

Incoming Links