Bookmarklet: Toggle Ruby

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:

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:

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.