A better printable page

The only people who don't print Web sites are those without printers. Even Mormons print Web sites.

But it is such a bother: So much of what makes the Web the Web – JumboTron-scale graphics, navbars, short line lengths, custom-engineered TrueType screenfonts – is actively antithetical to print typography. Then there's figuring out how to fit a “page” onto a page; even a Web site designed with liquid dimensioning will only occasionally fit elegantly on a sheet.

And how exactly do you print only the portion you want? (Here as ever, hoary old WordPerfect 5.1 for DOS remains unbeaten: You could select any passage of text and print only that, complete with necessary local and inherited formatting, headers, and footers, even within and across tables, endnotes and footnotes, and every kind of break. Try that with the print preview in Internet Explorer, which can take minutes merely to image a 15-page document.)

The conventional wisdom holds that a printable page should:

But is that really enough?

  1. Printable pages should eliminate colour to the extent possible, as Tidbits does:

    Clicking the Print Version link opens a new page with another copy of the article that's specially formatted for printing. We don't like wasting paper, ink, or toner any more than anyone else, and we know that lots of people like to print TidBITS for reading away from the computer. The print version of an article eliminates our graphics, navigation bar, links to related articles, and everything else that loses meaning on paper; it also turns the links black so printing on an inkjet printer won't accidently use colored ink. We chose not to mess with the font or size of the article, preferring to stick instead to your browser defaults; you may wish to change those or use other tools like Internet Explorer's Print Preview to reduce the amount of paper used. The print version is also designed to be easy to copy and paste into another program if you need to do more extensive reformatting.

    Monochrome printing is a why-didn't-we-think-of-that? idea. (Rich offices will have laser printers that automatically transform colours into grey. Poor folk have crappy inkjets. Don't waste their expensive ink.) But that requires substitution of monochrome logos and tweaking text stylesheets; the former is difficult, the latter easy, as we shall soon see. What do you do with photos and graphics that are themselves natively in colour? Leave them; you're not wasting coloured ink to print a photo or illo that exists in no other form.

  2. The page should show the URL of the original styled version (or of itself, if it you have chosen to invert reality and make the printable page the underlying form). “You found the original styled document here: URL” will do nicely. (We favour the “You enter Annexia” style of declamation [pace Naked Lunch].)
  3. The printable version should contain the same update information as the onscreen version (e.g., date and time of last update); a concise copyright declaration; and a notation of the simplest possible way to provide feedback (like an E-mail address, or at least a URL to a comment form).
  4. If an alternate-language version is available in any form, say so in that target language: “Également offert en français: French-URL” is one example (cite the default French version there, usually the onscreen one).
  5. Any URL cited as itself in a printable page should be a live hyperlink within an <a></a> element in the source code. If someone loads the printable page in an actual browser, links should act like links.
  6. Do not alter the title of the page (i.e., the <title></title> of a page). The Boston Globe Online changes the title of a page (example) to “Boston Globe Online: Print It!” Quit it!
  7. Don’t serve ads on a printable page. At all. Forego the fraction of a centime in revenue. Among other things, they’re always in colour; you can’t click them in print; people actively resent the permanence of a Web ad on paper and will vow to enact revenge on the advertiser.

Print-media stylesheets

The advice from high-schooler Lachlan Cannon is correct: Add a link element with a media="print" stylesheet to the <head></head> of your document – but don’t take anything away. You’re adding here.

We like to append -mono to the original stylesheet filename, as nublog.css and nublog-mono.css.

<link rel="Stylesheet" href="nublog.css" type="text/css" title="NUblog stylesheet" />

<link rel="Stylesheet" href="nublog-mono.css" type="text/css" title="NUblog printable stylesheet" media="print" />

Note that if you leave out media="anything" in stylesheet definitions, browsers tend to default to an interpretation of media="all". Specifying the print stylesheet as media="print" but not specifying the media of the other stylesheet is the wisest course of action (otherwise you end up with a mishmash like media="screen,projection,TV", and life is too short).

Defanging text

Hyperlinks do not have to be any specific colour, all claims to the contrary. Web-surfers (the ones who can see and who use graphical browsers, at least) have developed a sophisticated set of heuristics to decide what might be a link: Columns on the left and right, and panels at top and bottom, are probably links no matter what they look like; company logos are usually links; anything with an underline or that is bolder and a different colour is probably a link.

And links should be preserved in printable pages. The reader needs to know that, were the printed version reëxperienced online, specific terms are actual links that lead to other realms. Do not, in effect, lie to your readership by effacing links in the transition from onscreen to printable. (Images that are also links may never be differentiable on paper.)

But to make links tidy on paper, make them black, along with all the other type on the page that doesn't call for special treatment:

body, a:link, a:visited, a:hover { color: black; background-color: white; }

You must set a background colour if you set a foreground, unless the entire purpose of the declaration is to set only one or the other (e.g., a hiliter effect). And be sure to change your <body> element –

<body text="black" bgcolor="white" link="black" alink="black" vlink="black">

– for steam-powered browsers that cannot handle stylesheets.

If you use special text effects, like borders or knockout backgrounds, use black or any shade of grey you like. (Web-safe colours are obviously not necessary, but the available Web-safe greys are #CCCCCC, #999999, and #666666.)

As for the various hacks proposed to automatically hide unwanted page elements by setting various div class names to display: none, we can’t get ’er to work. Lovely idea, though.

Oh, and hypocrisy alert: The current NUblog printable-page “architecture” does not follow all the preceding advice. Yet.

Posted on 2002-03-23

(NUblog: Joe Clark)