Neat HTML5 features: Ruby without rails

I was looking through the new HTML5 tags and noticed the tag “ruby”. Of course I wanted to know what this tag does. So I googled and found this great article: It explains it quite well. Or look here for all the gory details:

In short the “ruby” tag allows annotating words with pronunciation hints which are often used for East Asian languages such as Japanese, Chinese, and Korean. You might have seen those hints in Chinese or Japanese books or in the credits of movies. Those hints are the little characters above words which tell you how to pronounce them.

The “ruby” tag doesn't come alone. It brings as companions the “rt” and “rp” tags. So what do they do? The “ruby” tag encloses the words that you want to markup. Inside the “ruby” "environment" you can use the “rt” tag to provide the actual hint which goes on top of the previous words. 

The “rp” tag is there for browsers that don't support the “ruby” tag. It allows for specifying which parentheses you want to put around the pronunciation hint. So typically the “rt” tag is surrounded by 2 “rp” tags. We will see this in action shortly.

Let's go through a few examples. Since I know a few Japanese words let's do it in Japanese. Let me use the proverb "Even monkeys fall from trees"- "猿も木から落ちる。" for demonstration. The reading in English would be "Saru mo ki kara ochiru". The first, third, and sixth characters are Kanji, which we want to annotate. To make sure, that all the characters display correctly in your browser, add the following line into the “head” of your html file. That sets the correct encoding. Otherwise you will see weird output.

<meta charset="utf-8"/>

And here comes the first markup. The “ruby” tag surrounds the whole string. Then for the first, third, and sixth character we have “rt” tags describing the pronunciation.


So how does it look?

Internet Explorer: 

The above 3 screenshots show Internet Explorer (IE), Chrome, and Firefox (FF), respectively. The output of IE and Chrome are as expected. It seems that FF does not yet support the “ruby” tag. It simply put the pronunciation hints inline, making it unreadable. So for this we can use the “rp” tag. We will use the round parentheses as separator in our next try. We have one “rp” for the open round parenthesis before and one “rp” for the closing round parenthesis after each “rt” tag.


Internet Explorer:

Chrome and IE understand the “ruby” tag, so by design they ignore whatever is placed inside the “rp” tag, therefore not displaying the parentheses. Since FF does not understand “ruby” yet, it also does not understand what “rt” and “rp” mean and simply displays everything inline, including the parentheses inside the “rp” tags.

We could almost be proud of ourselves, but looking at the placement of the little characters we see that they are not above the characters they should be, but rather centered over all characters since the last “rt” tag. So let's fix this by breaking one “ruby” tag for the sentence into one for each of the three characters that we want to annotate. Latest by now, this becomes kind of tedious.


Internet Explorer:

Now we have the correct markup. But we can do even better (at least in one browser). As you might know, the direction of Japanese text is top to bottom, right to left; and not like ours left to right, top to bottom. Unfortunately HTML just offers the tag “bdo” which allows for right to left text direction. This is great for Arabic and Hebrew but it doesn't help us here. The solution comes from the CSS3 draft which supports the property "writing-mode". One of the accepted values is "tb-rl" which stands for top to bottom, right to left. So let's try this. We add the following CSS to our project.

<style type="text/css">
writing-mode: tb-rl;
<div class="verticaltext">
This text is vertical.<br />
<ruby>猿<rp>(</rp><rt>さる< /rt><rp>)</rp></ruby>も<ruby>木<rp> (</rp>
<rt>き</rt><rp>)</rp>< /ruby>から<ruby>落<rp>(</rp><rt>お<

Internet Explorer:

Since currently this only works in IE I’m just showing a screenshot from there. I added some English text for demonstration. The English text is vertical now, but the characters are rotated by 90 degrees. So if that is desired you could use CSS rotation (transform: rotate(90deg);) to accomplish the same. However, although the Japanese sentence is vertical too, the Japanese characters are not rotated. And that’s the way it should be. So unfortunately the CSS rotation is not a solution to make it work in other browsers. :(

Last but not least. The “ruby” draft even provides an English example. This is for you to try.

An abstract language for describing documents and applications

I hope you found this little excurse a bit helpful. As always, if you have question let me know.


Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.