Furigana using ruby tags in HTML

1 minute read Published:

Ruby tag example

It can be difficult when first learning Kanji to memorize all the readings, and the kanji itself can be challenging. The HTML5 Ruby Tag allows you to place helper furigana or rubi on top of your Kanji to assist readers. I’m of the opinion that each unique reading should only appear with furigana once per page or article to avoid dependence on them. Below is an example of how to create furigana using the HTML5 ruby tag..

The following code:

キラキラ<ruby>光<rt>ひか</rt></ruby>る<br/>
お<ruby>空<rt>そら</rt></ruby>の<ruby>星<rt>ほし</rt></ruby>よ<br/>
<ruby>瞬<rt>まばた</rt></ruby>きしては<br/>
<ruby>皆<rt>みんな</rt></ruby>を見てる<br/>
キラキラ光る<br/>
お空の星よ

produces:

キラキラひか
そらほし
まばたきしては
みんなを見てる
キラキラ光る
お空の星よ