Retrofitting furigana to browsers

I’ve written a small shim script that adds support for <ruby> markup to browsers that don’t support it natively, viz. Firefox and Opera.

Some time around the middle of the last decade, when Internet Explorer 6 was still a pretty good browser and Firefox had just come out, I noticed that Firefox didn’t support the HTML <ruby> markup used to put furigana pronunciation glosses above Japanese text. IE had supported it since version 5, and the W3C recommendation on Ruby Annotation had been around since 2001, so I assumed that it would arrive shortly.

And so to today. It’s 2012. I’m working on a project that uses <ruby> to annotate pronunciation guides against Japanese text. This works in Internet Explorer. It works in Chrome, and other WebKit browsers. It still doesn’t work in Firefox. There are a couple of add-ons (HTML Ruby and XHTML Ruby Support) that give Firefox this functionality, but that’s not particularly helpful as a publisher, as you can’t rely on them being installed.

Without browser support, it’s not a complete catastrophe: <ruby> is designed to fall back gracefully, so that you end up with the pronunciation after the character in parentheses instead of above it, but it’s definitely a worse reading experience.

Fortunately, Firefox’s support for CSS is pretty advanced, so it’s possible to retrofit the necessary styles quite easily. With the addition of a small shim script that adds those styles to the document only when necessary, all that’s needed is to add one shim script to the head of the document, and <ruby> just works.

Before:

After:

Opera doesn’t support <ruby> either, but the shim script works there too. As usual, Opera is weird, so the shim has to use slightly different CSS for Opera that doesn’t give quite as good results at every font size: characters may occasionally be a pixel or so off the baseline. Given that Opera is both idiosyncratic and relatively unpopular, I think that’s a good effort.

You can find the script and the instructions for use on the furigana-shim project page on GitHub.

Comments

  1. Craiggybear

    Wrote at 2012-07-27 17:38 UTC using Chrome 20.0.1132.47 on Mac OS X:

    Pretty cool. Thanks for this.