...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.
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.
- on the 24th of September 2006 @ 22:55
- in Code the web : Scripting