Text Level Semantics - Part 6

The ruby element allows text to be marked with ruby annotations.

Ruby annotations are used to provide pronunciation guides to text in East Asian languages. I know it as furigana in Japanese.

The ruby element is made up of a number of sub elements that define what the ruby element represents.

The basic structure for a ruby element is:

<ruby><rb>base text</rb><rt>annotation text</rt></ruby>

The base text is the original text that you are annotating with the annotation text being the annotation.

So to use a Japanese example, we could use:

<ruby><rb>地下鉄</rb><rt>ちかてつ</rt></ruby>

which is displayed as:

If you want the annotations to be displayed with a specific base character, then you can do this using multiple base elements such as:

<ruby><rb>地</rb><rt>ち</rt><rb>下</rb><rt>か</rt><rb>鉄</rb><rt>てつ</rt></ruby>

which is displayed as:

If you wish to provide another set of annotation to the words, then you can also use the rtc element which is a ruby text container.

If we wanted to provide the pronunciation of the word written in English, then we would use:

<ruby><rb>地</rb><rt>ち</rt><rb>下</rb><rt>か</rt><rb>鉄</rb><rt>てつ</rt></ruby>

which in my browser is displayed as:

Some browsers do not support the ruby element and as such, the rp element exists to ensure that the text still makes sense.

The rp element is only shown in user agents that do not support the ruby element.

So using our original example of:

<ruby><rb>地下鉄</rb><rt>ちかてつ</rt></ruby>

we can make it work with user agents that do not support ruby by adding rp elements.

<ruby><rb>地下鉄</rb><rp>(</rp><rt>ちかてつ</rt><rp>)</rp></ruby>

which might be displayed as:

地下鉄 (ちかてつ)

Feel free to share your experiences and opinions related to this post in the comments and if you liked this blog post and can't wait to read more, bookmark this site or subscribe to the RSS Feed.