Author - Web Developer - Educator
RSS Feed

Introduction of the <ruby> tag

As much as I've wanted to write Japanese on the web, I never really knew how hiragana characters were written above kanji (see example).
NHK News Easy Website

I always thought that it was manually inserted with each set of characters a special <div> that showed the pronunciation, or there was a special engine or library that automatically did it.
Well, whether there is or there isn't, I have found a way: the <ruby> tag.

I always saw the <ruby> tag and thought it was for inserting Ruby on Rails code into HTML. I knew about merging Ruby and HTML codings, but never like this.
<ruby>愛
 
	<rt>あい</rt>
 
</ruby>
Produces this
あい


That is it. In order to insert special Japanese (or Chinese/Thai/Korean/etc) characters, you don't need to look up each special character code for each character if you already have access to it (like a Japanese IME or keyboard). Just copy and paste (or write) and the <rt> tags will put the special pronunciation over the selected character. Although, you may need to insert multiple <ruby> tags in order to write out a paragraph or something, but the concept is there.

I find it interesting that this is possible, and I may be late to the game, but it is nice to be able to do something like this.


Tags:#html #demos #tags #ruby #japanese