Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Shim to enable basic <ruby> support in Firefox and other Gecko browsers

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 .gitignore
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 furigana.js
Octocat-spinner-32 furigana.max.css
Octocat-spinner-32 furigana.max.js
Octocat-spinner-32 release.rb
Octocat-spinner-32 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.