Ruby HTML element


I still remember the day I discovered the <ruby /> HTML tag, I thought; “WTF, can we run Ruby code with that?” and I tried a simple hello world:

puts 'Hello, World!'

Of course, it didn’t worked, the HTML Ruby tag is not for that Ruby, it is for Ruby annotations.

Ruby annotation

Ruby annotations are used to provide a pronunciation guide for characters that could be unfamiliar to the reader, it’s typically used in East Asian language such as Japanese and Chinese. “Ruby” is the term used for a run of text that is associated with another text, referred to as the base text.

In 2001, W3C published a specification for the Ruby markup and even though the specification is finished, most browsers still has only partial support, check Can I use? for more browser support information.


Ruby markup consist in five HTML tags; ruby, rt, rtc, rp and rb.

  • ruby represents a ruby annotation.
  • rt (ruby text) specifies the ruby text component of a ruby annotation.
  • rtc (ruby text container) embraces semantic annotations of characters presented in a ruby annotation.
  • rp (ruby parenthesis) provides a fallback parentheses for browsers that do not support ruby annotation.
  • rb can have both pronunciation (rt) and semantic (rtc) annotations


The examples below provides a quick overview about the ruby markup, which is very straightforward.

This simple example shows the vowels in Japanese Hiragana.


Here is the final result, if your browser support ruby annotations.


In this example, we are also showing the vowels in Japanese Hiragana, but, we are also providing a fallback for browsers that don’t support ruby annotations.


If your browser don’t support ruby annotations, you would see something like this:

あ (a) い (i) う (u) え (e) お (o)

And here, we are using the rtc element.

日本Nihon Japan

You can also provide styles for each tags showed above, given the previous rtc example, you can pass any HTML attribute and use styles as well.

<ruby class="some-ruby-sample" id="some-id">
  <rb>日本</rb><rt class="ruby-text">Nihon</rt>

.some-ruby-sample {
  padding: 5px;

.ruby-text {
  background-color: #BC002D;
  color: #FFF;
日本Nihon Japan

The result will be as above.

Wrapping up

And that’s all, I really enjoy to explore not-so-used features of a language or system, it makes me appreciate even more all the hard work and effort that people put together to build something. 😃