Skip to content
Shim to enable basic <ruby> support in Firefox and other Gecko browsers
JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Internet Explorer and Chrome support the display of furigana glosses above text in the form of the <ruby> element. Firefox and Opera don't.

If you’re a user of Firefox, you can fix this omission via an add-on:

If you're a publisher, though, that doesn’t help.

This small shim fixes things from the web developer side by adding appropriate CSS to make <ruby> work properly in Firefox, Opera, and (possibly) other browsers that don’t natively support it.


Mark up your furigana as described in the 2001 W3C ruby recommendation. The important point to note is that you must use both <rb> and <rt> (<rp> is optional) and put only one set inside each <ruby> block:


Download the compiled and minified shim and add it to the <head> of the document:

<script src="furigana.js"></script>

That’s it!


Complex ruby – where there are glosses both above and below the text – is not supported.

In Opera, as vertical-align: bottom doesn't work quite as expected, the alignment of elements is achieved using an em value. This means that alignment is sightly less reliable in Opera.


This has not been extensively tested, so feedback is very welcome, either in the form of issues or via email to the author.

Something went wrong with that request. Please try again.