DynRuby provides "smart" ruby annotations that are displayed on hover, and works with any browser with support for ruby annotations. DynRuby is designed for displaying Furigana 振り仮名 annotations for Japanese Kanji 漢字, but can also be used with Chinese to display phonetic notations with Hanyu Pinyin 汉语拼音 or Bopomofo/Zhuyin Fuhao 注音符號. Note that Zhuyin Fuhao are usually displayed vertically, and might not be displayed correctly if rendered horizontally.
The Kanji in the following lyric snippet are annotated with Hiragana as Furigana. Simply move your mouse on to the characters and you'll see the annotations!
Example of mixing persistent and dynamic annotations:
How do you use DynRuby in your own HTML? Just write:
and you would get: 漢!
<ruby class="dyn-ruby" data-annotation="カン">漢</ruby>
To use persistent annotations, write:
and you would get: 漢. The effect is the same as writing all the HTML by yourself, and it's more like just a shorthand.
<ruby class="dyn-ruby-p" data-annotation="カン">漢</ruby>
I also provided two "magic links" that displays/hides all DynRuby annotations on click. Once they are displayed this way,
they do not respond to hover anymore (until they are hidden by the "hide" link):
<a class="show-dyn-ruby" href="#">Text here</a>.
<a class="hide-dyn-ruby" href="#">Text here</a>.
Of course, don't forget
DynRuby relies on jQuery, so also make sure that you have included jQuery.