Rob Posted…

Thanks Andreas for reporting on this. Do you have any plans for making a wp plugin out of this? It would be very useful.

I've also got a pile of papers in word format that I've been trying to convert to xhtml without losing the footnotes. Word's own conversion facility is awful but now I've seen a good solution for footnote display I might go ahead and write my own macro to do the job. Thanks to you and Tim.

Andreas Posted…

Rob, as for doc2xhtml conversion, have you tried OpenOffice.org in combination with Henrik Just's Writer2Latex tool (which includes an excellent Writer2xhtml converter)? Back in 2003, I wrote a simple howto for Writer2xthml - however, as it is slightly outdated, I suggest you follow the instructions on Henrik's website instead. Be sure to give it a spin!

paul haine Posted…

This sidenote example doesn't work in IE though - the footnotes appear at the bottom of the page. If the footnotes are off-screen, then clicking on the number appears to do nothing at all, which could be confusing.

Posted…

Andreas, thanks for tip. I'll give it a try. The last time i tried OpenOffice, though, it trashed my XP setup -- had to uninstall.

I hope you decide to go down the plugin route for this footnote idea too!

Andreas Posted…

Paul: oh, you're right. I'll ask Tim about it.

Rob: as for creating a plugin - don't know if it's really necessary (and my meager PHP skills wouldn't allow me anyway). As it's all JavaScript, adding the code to your template should do the trick.

BrandSpankingNew Posted…

Should be working in IE6 now. Turns out that IE ignores position:fixed...

Alessandro Posted…

Hi Andreas, sincerely I don't like to be critic...but I believe that together with the many advantages of Tim's script, that is very concise and effective (even if I'd probably have used a full DOM approach instead of innerHTML), comes a major downside. They're a great example of how improve usability with javascript, but there is an accessibility matter I'd like to point out.

One of the advantage of footnotes on books is that you can skip them if you want. Browsing a page that adopt Tim's solution with javascript turned off, or with an alternative browser such as a screen reader, a text browser or a mobile you're simply forced to read them, and perhaps your reading could result confused. An <em> tag instead of spans would probably help distinguish notes from normal text in those cases.

Maybe I'd use a full html based approach, like John Gruber presented.

The problem with footnotes, as Andy Clark pointed out, is that there isn't such a construct in HTML, and probably wil never be. But providing loopback links (if you can pass me the term) just in the markup like John Gruber did is perhaps the only way to improve usability without sacrifying accessibility.

Finally, I'd like to link a good reading on the subject, written about two years ago.

Tino Posted…

Some sidenote on the script presented (now that's an applicable term ;) ): it isn't XHTML-compliant. innerHTML doesn't work in real XHTML, attributes should be in lowercase (onClick should be onclick), and don't put script in HTML comments since it will be seen as such thus ignored completely. Also the type attribute is missing from the script-element.

If you want to use XHTML per-sé (even when there's no reason to - HTML would do just fine here) than please do it right. This script is not forward-compatible.

Tim Posted…

@Tino: Ok, thanks for pointing that out. Lazyness/haste/ignorance on my part (I didn't know that innerHTML was out).

Here's the HTML version.
Here's the XHTML version (without innerHTML).

Andreas Posted…

@ Tino, Tim: thanks for the bug report resp. fix. Very nice.

@ Alessandro: "An <em> tag instead of spans would probably help distinguish notes from normal text in those cases." - what about <small>? I think I'd use that instead of <span> or <em>. And indeed, the inline+JavaScript approach comes with a couple of accessibility/usability issues. However, I like it better than John Gruber's original as it is so much easier to create (and is similar to what is used in other markup languages such as DocBook). Also thank you for that link - very interesting.

Tino Posted…

Tim: with the risk of being called a nitpicker I have 2 more small remarks; on line 107 of your XHTML version you assign a value to variable 'i' which is not previously declared meaning it will automatically become global. On line 129 you declare variable 'newEle', but since this is inside the for-loop it will get redeclared with every iteration. These are not direct errors, but good coding practice also means to avoid this kind of warnings (webdeveloper toolbar for Firefox has an option to show these strict warnings).

Alessandro Posted…

Andreas, yes perhaps since both <span> and <small> haven't semantical meaning, but <small> has a presentational value, perhaps it could be a good choice as Peter-Paul Koch suggested. My take on <em> was quite wrong: I was thinking about a presentational use of it.

Tim, a very nice work with the pure-DOM sidenotes.

Beau Hartshorne Posted…

I thought of a way to build sidenotes in pure CSS, with no hacks, and no browser problems. I've posted details here:
http://hartshorne.ca/2005/07/27/footnotes_v_sidenotes/

matt Posted…

Check out this link. This has been around for a LONG time.

http://king-maths.kingston.ac.uk/~James/JS/printing_endnotes.htm

Andreas Posted…

Just for everybody's reference: Dr. ZAx has created a fine WordPress plugin that functions along the same lines as Tim's Javascript solution.

Features: Inline insertion, automatic numbering, XHTML, no Javascript (also meaning the only way to turn it off is to deactivate the plugin) and the possibility to refer the same footnote more than once (take that, Word!).

NB: I don't really like the fact that you need to wrap your inline footnotes inside a <footnote> tag though - imagine you want to export your original content to another app (that doesn't recognize the footnote tag) for instance. So, I altered footnotes.php a bit, and now it uses <small> tags (which makes sense, even in a non-WP context). Here's how you can do the same. Fire up footnotes.php in a text editor and change the word "footnote" into "small" on line 20, 82 and 83. Save and you're done.