I sent some experimental code live today which I’ve been working on a little over the last couple of days. Now visible on the individual entry pages is a ‘Printable Version’ link that can be seen on the bottom left of the post’s content, which when clicked extracts (nearly) all links and creates a series of footnotes with the URL’s displayed. It also extracts any printing stylesheets and displays them so you get a better idea as to how it will print. Hopefully this technique will make printing from sites with many hyperlinks more useful.

The code is completely written in Javascript, and I hope to publish a full writeup on how it works in the next few days. The idea was inspired by an “IE-only bookmarklet”:http://www.kokogiak.com/gedankengang/default.asp#12012200393, although it has been completely rewritten to be supported in more browsers. In the meantime I’d appreciate it if you could let me know of any problems with the technique, especially if there are any problems with Safari or Opera (neither of which I have to hand right now). Known problems include:

* Some links probably shouldn’t be extracted as footnotes – for example the next/last post controls. I am filtering some out already so thats an easy fix.
* No effort has gone into styling the footnote section
* the printing stylesheet is quite primitive – it hides the side menu for example by doesn’t expand the main column to take advantage of the extra space which is available.
* It seems to break the automatic citation links for block quotes, although I have a good idea as to what’s causing that
* The location of the ‘printable version’ is a little out of the way – my aim is that when the code is finished the ‘printable version’ will be available on every page.
* The only way to get back to the non-printable version is using the back button.
* I need to see if there is some proper semantic markup to be used for footnotes

Whilst the technique is being used here for printing, it can easily be applied just to fit in with a site’s editorial style.

_Update_ 1: Oh, and I’ve just noticed the Javascript is stopping the document from validating as (X)HTML Transitional…

_Update_ 2: Also if the text for a link contained other HTML elements, the text is being displayed unformatted – again this is a fairly easy fix.

_Update_ 3: Priting broke when I uploaded the new design, so I’ve taken it off line for the moment until the issues are resolved.

Advertisements