When I first decided to hack furigana for the web, I simply used HTML tooltips, with a bit of CSS to highlight the glossed word. It mostly worked, but the presentation was iffy, and by default IE didn’t use a Unicode font for tooltips. I also knocked together a script to simplify the process of marking up a lot of text; that one needs some more work, still.

My second try used the popular jquery JavaScript library, which abstracted away most of the browser dependencies, and left the HTML clean. I liked the results, but I got sidetracked before I managed to clean up the code. Also, at the time I was reluctant to add the overhead of even a relatively compact JS library to every page.

After my recent discovery that IE7 is still hosed for basic CSS, I broke down and cleaned up my JS code, and I’m going to start using it. Here’s the first test: 漢字には全てふりがなが付いています。

The big feature of this version is that if JavaScript is turned off in the browser, the pop-up furigana still display as tooltips. One known bug is that they appear in the wrong place if the window has been scrolled horizontally.

[Update: hmm, the offset function in the new version of the jquery dimensions plug-in isn’t calculating the correct bounding box for the base text in IE 6. I’ll have to look at that. However, the ifixpng plug-in does finally make my site logo work in IE6.]

[Update: I’m behind the times. offset() has been rolled into the core jquery library, and it’s fine; the problem was that IE6 doesn’t bother calculating changes to a hidden DIV. If I show it and then update its position, it works fine.]