[thelist] <tech>css print method

aardvark roselli at earthlink.net
Wed Mar 5 10:41:01 CST 2003

yeah, i know it's off-topic, and as the friggin' list admin you'd
think i'd show a little restraint...

but i'm gonna be wandering the fine streets of austin as of thursday
while attending this year's SXSW, and i'm wondering if there'll be
other evolters hanging around...

<tip type="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

The call is simple:
<link rel="stylesheet" type="text/css" href="print.css"

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

Sample sites (use print preview in your browser to see how each looks
without wasting the paper):
   http://capoeirabuffalo.org/document_16.html (still in development)

With a little more code, you can even get the URLs of your hyperlinks
to appear with the hyperlinked text in more standards-compliant

a:after		{	content : " [" attr(href) "] " ; }

my latest book project:
   Web Graphics for Non-Designers
   ISBN: 1904151159

* * Please support the community that supports you.  * *

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !

More information about the thelist mailing list