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!


Star Fork


from 恋ING by Morning Musume (モーニング娘。)

いつまでも　二人でいたい
パンが１つなら　わけわけね
また　実際　駆け出しね
全ての　始まりね
恋愛　進行形
Show all annotations | Hide all annotations

Example of mixing persistent and dynamic annotations:

from "Just be yourself" by The World Standard (わーすた)

ゆめゆめ パステル 時間の宝石箱
カワイイと虹のドキドキ詰め込んで
10年後 30年後 過去になった“イマ”を
笑顔でね、思い出そうよ！
輝いて プリパラ
Show all annotations Hide all annotations

How do you use DynRuby in your own HTML? Just write: 

<ruby class="dyn-ruby" data-annotation="カン">漢</ruby>
and you would get: 漢!


To use persistent annotations, write: 

<ruby class="dyn-ruby-p" data-annotation="カン">漢</ruby>
and you would get: 漢. The effect is the same as writing all the HTML by yourself, and it's more like just a shorthand.


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):
"Show: <a class="show-dyn-ruby" href="#">Text here</a>.
"Hide": <a class="hide-dyn-ruby" href="#">Text here</a>.


Of course, don't forget <script src="https://raw.githubusercontent.com/xuanruiqi/dynruby/master/dyn-ruby.js"></script>. DynRuby relies on jQuery, so also make sure that you have included jQuery.