As I “mentioned before(Generate footnotes for printing)”:http://www.magpiebrain.com/archives/000231.html, I recently wrote some Javascript code to produce a more printable version of my pages. Since then I’ve updated the code a little, added a link to each page and refined my printing CSS. The Javascript code handles two tasks – firstly it extracts selected links and creates a footnote for each one. Secondly, it extracts any print stylesheets and displays them in the browser so you can get a better idea of how the printout will work. A couple of niggles still remain – I cannot skip links in blocks which use @id@ rather than @class@, and the markup for the footnotes is horrible. Once I’ve cleaned the code up and fixed the last few remaining issues I’ll post a proper writeup soon.
Now that the code is properly integrated in the new design, I though I’d ask for some feedback.(the ‘Print this page’ link can be found in the top-right hand corner) – you don’t actually have to print, just click the link and see how it looks. I’m especially keen to hear from people with browsers other than Firefox and IE.
magpiebrain 
5 Responses to “CSS and Javascript for more printable HTML”
This is very cool!
Might be useful to have the links still be links, just with the addition of the footnote. First of all, the set of words that are part of the link might be significant; if you take away the underline you could be losing information. Secondly, sometimes I use the printable view even if I’m not printing, because the contrast is usually better… would be cool if the links were fully functional (I see that you can click on the footnote reference, but that’s a much smaller target).
Joe such a change should be trivial – I would actually like to refactor the code to allow it to be easily tailored for specific uses.
magpie–
[0] The print option didn’t work at all in lynx_w32.2.8.2rel.1 nor w3m-0.1.9-CYGWIN.i686-mouse-en (no javascript)
[1] When viewing http://www.magpiebrain.com in a limited text based browser, the blogroll is above the changing content.
[2] http://magpiebrain.com doesn’t work as it should.
[3] in IE 6.0 the (print) bookmarks are straddled over the left thick black vertical line. Can javascript fetch the first paragraph of each page, would be nice to get an idea of the link content (think javablogs style) {probably not a javascript/efficient idea}
[4] newstyle.css has 3 validation errors – http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.magpiebrain.com&warning=1&profile=css2&usermedium=all
[5] Amaya 8.4 made it look… different, the footlinks on each article are up the creak and the search box is wonky.
[6] there is no… gripe [6]
magpie++
[0] looks really sweet, just like the lovely stuff in the zen garden.
[1] lovely colours, and fading backgrounds
[2] articles and ideas cool as ever 🙂
[3] site and print stuff looked really nice in Mozilla5 .0 {build:2002053012}
[4] you are 100% strict xhtml compliant http://validator.w3.org/check?uri=http%3A%2F%2Fwww.magpiebrain.com
[5] you owe me some hula hoops…
Ta for the feedback Jez – I do indeed owe you some hula hoops. If you can arrange that pint with Hani you might get them quicker…
magpie–
[0] – Understood. I’ll have to think of a way to hide the link from non-javascript browsers
[1] – Limitation of the current layout technique. I think I can fix it using floats rather than the current method – will look into it
[2] – Virtual hosting problem, can sort that quite quickly. Its on my todo list
[3] – The black line appears on IE? There shouldn’t be one – the print.css should remove the backgrund image. Getting ciontextual information is promblematic due to the way the DOM tree works. I could extract it if the link occured in a p tag, but in other circumstances it could result in sme strange results…
[4] – Will sort those validation issues.
[5] – Amaya I’ll have to look into.
So much of the redesign was inspired from other sources – I’ll be updating the Colophon accordingly in the next coulple of days.
Right, magpiebrain.com now resolves in the same way as http://www.magpiebrain.com. I fixed one XHTML issue on the individual entry page and fixed all the CSS issues, however the link you posted in your comment screws things up as it includes unescaped ampersands…