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
<rp> is optional) and
put only one set inside each
Download the compiled and minified shim
and add it to the
<head> of the document:
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.