Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Shim to enable basic <ruby> support in Firefox and other Gecko browsers
JavaScript Ruby
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
Makefile
README.md
furigana.js
furigana.max.css
furigana.max.js
release.rb
test.html

README.md

furigana-shim

FirefoxやOperaはルビ(振り仮名など)を表示することができない。短いスクリプトでできるようにする。

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.

Use

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:

<ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

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

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

That’s it!

Limitations

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.

Feedback

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.