Print this page!

24 March 2004

Writing for the Web had a post on Printable Link Footnotes (available here). The link is to a site with a bookmarklet that prints something of a table at the bottom of the page with the URL’s and the link text formatted all nicely. If I recall correctly, Internet Explorer had something like that built right in. Double-checking, IE 6 still allows you to print a table of links under Print - Options - Print table of links.

For Mozilla and Firefox users, neither of these tricks does us much good: the bookmarklet above doesn’t work in Firefox (and I assume it doesn’t in Mozilla), and you would have to put me through some medieval torture regimen to get me to use IE again. Fortunately, Mozilla developers paid attention to CSS2 and as a result, thoughtful Web designers can take advantage of print style sheets and a:link:after to print out URL’s inline. (If you’re using Mozilla or Firefox to read this, do a File - Print Preview to see what I mean–or see this screenshot.)

The basic style is this:


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

Pretty simple, huh? I have to thank A List Apart for explaining how to do this:

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We’re pretty used to styling for the screen, but thinking about other media isn’t a habit yet. And as all the “printer-friendly” links attest, our thinking about the print medium has been limited to recreating a document in a different way.

Comments are closed.