Bookmarklet: Toggle Ruby

September 30, 2013

Ruby characters are characters placed on top of Chinese characters to show pronunciation. Wikipedia can explain ruby characters better than I can.

In practice, it looks like this: 日本語にほんごむずかしいです. The Japanese characters above the text are called furigana.

What’s interesting is what the HTML markup looks like:

HTML ruby markup

The ruby tag contains a rt (ruby text) with the pronunciation. The browser has some flexibility over the rendering, but the ruby usually goes on top, in a smaller font.

I created a bookmarlet to toggle the ruby text’s visibility: toggle ruby. Click it now and watch the ruby in the 2nd paragraph disappear/appear on each click. Drag the link to your bookmark toolbar to install.

Toggling the ruby looks like this on a news site:

HTML ruby markup

Why is this useful? If you’re practicing your kanji reading, ruby text is the answer. You might want to hide it — until you try to read it for yourself. Then, you can show it again to check your answer.

The code for this (toggleRuby.js) is in my bookmarklets repository on github.

Discuss on Twitter