...or; enhancing website printouts

Although this site show very little proof of it, I've been thinking a lot about printing websites lately. How, if at all, our beloved digital media should relate to its analog cousin, if people print anything from the web, if these printouts serve any purpose or if its just wasting ink. Then deciding to take a stab at making printouts more accessible and more valuable.

Consider the page you're reading now for printing, it quickly becomes apparent that a lot of the elements that makes it a web page isn't that helpful when printed. As stuff like the site menu, blogroll, categories or last entries won't add much value on a piece of paper, I quickly dropped all such elements for my print style sheet. One thing that often adds value to documents on the web are links, though the same underlined words on a piece of paper can hardly be considered to have any value. Links, often an integral part of documents on the web, doesn't make the conversion to paper at all. For the sake of usability of a webpage once printed, I needed a method to convey the links over to the paper.

My first idea was to include URIs in a parenthesis using CSS2's :after pseudo element. Although doable (I was already doing this with abbreviations), in many cases this made documents hard to read and really didn't provide all the information I'd like to. Another problem with this approach would be the limited browser support (read: it won't produce any results in IE). So after thinking a bit more about it, appending a "table of links" of sorts seems to be a good solution. Maybe even including other elements, such as the above mentioned abbreviations, that normally isn't all that usable once printed.

This could easily be done server-side by the CMS, though it would require that extra little bit of processing by the server and all pages would be a couple of KB extra to download. As such, this seemed like the perfect task to be handled client-side with a tiny bit of JavaScript magic. At this point it has to be said that JS isn't close to being one of my strong points, so the script is far from production ready. Though as a proof of concept it currently should be working pretty well in (hopefully most of) the major browsers. Another point worth noting is that it's rather reserved in what it includes, namely that it requires a rel="external" attribute set for links before they are included, though this is easily customized to suit other setups/sites.

To see it in action simply select print preview for this page, at the bottom of the document you should see the results; Some basic document information, a list of external links and a list with definitions for the abbreviations I've used (if there existed any, embedded objects would also be listed). This is my initial attempt at making printouts a bit more usable, it's an early alpha version so expect some bugs and shortcomings. If you'd like to get your hands on the code I've prepared a smaller example document where all the necessary code is included inline for easy access.

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.000 seconds...

Errors occurred while generating this page... (More info availible)