Print Smart

It's amazing how ubiquitous the "print this" link is on the web. Visit MSNBC and find an article you like, click "print this" and a little pop-up window appears followed nearly immediately by a print dialog box. It's all quite unprofessional.

"Print this" links have been unnecessary for nearly a decade now. Thanks to CSS you can automagically transform your document when the user clicks the browser's print button -- no "Print this" link required.

Lets take a look at the elements of an imported style sheet.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

If you'll look closely you'll see media="screen". This tells the browser to use this style sheet to format items which appear on a computer screen. Pretty straight forward stuff. Lets take a look at what you can use besides screen.

• all: Use for all media.
• aural: use for speech synthesizers (useful to strip navigation and urls for the blind)
• braille: should be treated the same as aural
• embossed: the print version of braille (to do additional formatting for braille printers)
• handheld: cell-phones and other tiny screens.
• print: for printers.
• projection: for projection/transparencies.
• screen: standard computer screens.
• tty: teletypes/ansi-terminals and other such devices.
• tv: PAL or NCSA television resolutions (IE web-tv)

Of all these, realistically only screen and print will ever be used unless you set up a site which caterers to cell phone users or the blind.

So now we've established that style-sheet media types can be screen or print. To create print-link-free pages all that's necessary is to include both a screen style sheet and a print style sheet as such.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />

By linking to both stylesheets in this manner you will get screen.css styles on the computer screen but when the user clicks their browser's print button the page will be re-formatted using the print.css style sheet.

Now with a little forethought and display: none tags you can strip your navigational elements and decorative elements which serve no function on a printout. You can even add elements like a full URL next to links.

For an example lets assume that you have a simple page with a left aligned table with your navigation buttons.

<table class=navigation>
   <TR><TD>
      A bunch of fancy navigation stuff
   </TD></TR>
</table><P>And here is my content, ipsum lorum and all that jazz.

Now in screen.css the navigation class will be set up to make your table look as pretty as you can make it.

.navigation { border 1px solid black;
            width: 300px;
            display: block;
          }

But when the user goes to print out your page, the navigation table is completely unnecessary and a waste of ink (and thus money) for the user. So in print.css we have a different definition of .navigation.

.navigation { display: none }

Now when the user prints out your page the table with your navigation elements will no longer appear, leaving only the clean, unfettered content.

In addition to removing elements your print.css can add useful elements such as displaying the URL of links instead of just the link name. The following code will put the URL in parenthesis after each link.

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

So now, with just a little bit of planning and careful management of your stylesheets you can make printing a hassle-free, painless experience for your visitors while eliminating the hassle of maintaining complex pop-up print systems for you. And for a bonus, you'll find that this CSS method is more compatible with today's browsers than pop-up print windows spawned by "print this" links. Truly a win-win scenario for everyone.