The ruby element and her hawt friends, rt and rp

Oli Studholme — Tue, 11 May 2010 14:00:55 +0000

Ruby text is a short annotation for some base text. It’s typically used to give pronunciation guidance in a phonetic script for kanji in Chinese, Japanese, and Korean (CJK) languages. It’s named after an old printers’ term for the very small size of 5.5 points.

The ruby element allows spans of phrasing content to be marked with ruby annotations.
W3C Specification

As the name implies, ruby text is small, displayed by default above the base text in horizontal text and to the right in vertical text. Browsers without support put the ruby text inline after the base text.

These are the elements used in creating ruby text in HTML5:

— an inline element that contains base text with ruby annotations
— ruby text, coming after the base text it defines
— ruby parentheses, an element used to wrap opening and closing parentheses around ruby text. These are for user agents that don’t support ruby text, so that it makes sense when displayed inline. Browsers that support hide via {display:none;}.

Examples

If you’ve never seen ruby in action you’re probably wondering what I’m talking about, so here are some examples:

Furigana ruby text in the Japanese manga Vagabond

Snippet of a Taiwanese newspaper for students, with bopomofo ruby

Korean hangul followed by hanja in an editorial on Chosun.com

Browser support

As is often the way with internationalisation features, browser support is — well, sparse. In a break from your expectations, Internet Explorer has supported since IE5 — three years before the actual 2001 W3C Ruby Annotation specification! While this specification was incorporated into XHTML 1.1, no browser ever implemented it.

in HTML5 is based on a reverse-engineering of IE’s implementation. It also lacks Ruby Annotation’s ‘complex ’, as these can normally be accomplished via nesting. (Please submit feedback if you have a real-world example that can’t be.) Webkit added HTML5 support at the start of 2010. At the time of writing, has made it into Chrome but not Safari. Firefox and Opera have yet to implement natively, although there are Firefox extensions for support (HTML Ruby (basic ruby including HTML5) and XHTML Ruby (complex ruby)).

On the styling side, there’s the W3C CSS3 Ruby Module (2003). It’s based on Ruby Annotation’s ‘complex ruby’ and is being updated for HTML5 . Because of this, it’s also yet to be implemented beyond the default IE-level formatting. Ruby text will be used in combination with the W3C CSS Text Layout Module Level 3 properties direction, block-flow, and writing-mode for alternative text flow (such as vertical text), but again these have poor implementation.

Summary of browser support for display & styling in the five main browsers
Browser	Basic	`writing-mode`	‘Complex ’	CSS3 Ruby (2003)
Internet Explorer	IE5.5+	IE6+*	-	-
Firefox	(via plugin)	-	(via plugin)	-
Chrome	Chrome5+	-	-	-
Safari	Safari5+	-	-	-
Opera	-	-	-	-

Note: writing-mode support in IE6 was lr-tb and tb-rl only. IE8 added support for all possible combinations.

CSS we can use

Having said that no browsers support the CSS3 Ruby module yet, there are still a few things we can do to style and friends. Default browser styles use font-size and display, so we can safely change these to affect display in both supporting and non-supporting browsers.

If you want to de-emphasise the ruby text when it’s displayed inline in non-supporting browsers, you could do this via setting the size of and , as IE and Webkit do:

rt, rp {font-size: 60%;} /* = Webkit value */

You can also move ruby text and parentheses to after the base text, mimicking non-supporting browser rendering on supporting browsers:

rt, rp {display: inline; font-size: 100%;}

Finally, if you’re brave/foolish, you can implement ruby display yourself via CSS inline-table (CSS with explanation and demonstration (Hiragana.jp)). Note that this currently doesn’t work in Chrome because of a bug with display:inline-table on (fixed in trunk), and as you’ll probably need per-browser style tweaks, I recommend against it.

Code samples and output

These code samples (with notes and CSS) are also available separately.

in Japanese — furigana and rōmaji

Using without

攻殻こうかく機動隊きどうたい

Using to indicate the pronunciation of the Japanese name of the Ghost in the Shell anime series in furigana. Notice that the lack of makes it pretty unreadable in a non-supporting browser (you may have to trust me on this!).

Using with

攻殻（こうかく）機動隊（きどうたい）

The above example with text surrounded by parentheses degrades gracefully on non-supporting browsers.

Nested for multiple ruby texts

攻（こう）殻（かく）機（き）動（どう）隊（たい）（Kōkakukidōtai）

The scope of depends on the amount of base text before it, from one character to an entire phrase. can also be nested to provide multiple ruby texts for one base text — in this case furigana and rōmaji. Although per-kanji is more informative, it degrades somewhat poorly in non-supporting browsers. Copy & paste support is also poor, as browsers just use source order, for example “攻こう殻かく機き動どう隊たい Kōkakukidōtai”. It’s also a PITA to code :-|

Japanese glossary

Furigana is the name given to using hiragana phonetic script beside words written in kanji to aid reading. It’s used extensively in education for learners of Japanese, and in reading material for children. It’s also sometimes used when writing kanji a literate adult may not be able to read.

Rōmaji is the romanisation of Japanese into the latin alphabet. Rōmaji is generally used for those who don’t know Japanese, especially in signage and tourism information.

in Chinese — Pīnyīn and zhùyīn fúhào (bopomofo)

Ruby is used to some extent in China (pīnyīn), and more so in Taiwan (zhùyīn fúhào), especially in textbooks and signage.

Pīnyīn

The Grass mud horse — 草泥馬(Cǎo Ní Mǎ) — is … characterised as “lively, intelligent and tenacious”. However, their existence is said to be threatened by the “river crabs” — 河蟹 (héxiè)  — which are invading their habitat.

In this example of pinyin you can see how significantly affects the leading () of text blocks in supporting browsers. Setting font-size for and can de-emphasise ruby text in non-supporting browsers, as demonstrated in the second in the second image.

Zhùyīn fúhào

世（ㄕˋ）上（ㄕㄤˋ）無（ㄨˊ）難（ㄋㄢˊ）事（ㄕˋ）只（ㄓˇ）怕（ㄆㄚˋ）有（ㄧㄡˇ）心（ㄒㄧㄣ）人（ㄖㄣˊ） （Anything can be done with enough perseverance）

Unfortunately, no browser can render this example of Zhùyīn fúhào (bopomofo) ruby on horizontal Mandarin Chinese correctly. I’ve included an ideal rendering and how it appears in both a browser supporting simple ruby (with incorrectly rendered bopomofo) and a non-supporting browser.

Chinese glossary

Pīnyīn is a romanised phonetic system for Chinese, generally written above or after the word. Bopomofo (Zhùyīn fúhào) is a phonetic script for transcribing Chinese, especially Mandarin. It is generally written (in both horizontal and vertical scripts) vertically to the right of each hanzi character.

Korean ruby

While the use of hanja (kanji) is decreasing in South Korea, they are still used for disambiguation and proper names.

한자(漢字)

Current Korean ruby use is to have the hangul coming before the hanja in parentheses (the opposite way from the default fallback style). For styling use: rt, rp {display: inline; font-size: 100%;}. This formatting is also used when foreign words such as English are included in Korean text.

Korean glossary

Hangul is the Korean script, and hanja is Korean for Chinese characters. Traditionally written Korean used hanja, but now it’s mainly used in academic texts and occasionally for disambiguation.

Using for English

Not everyone is using East Asian languages, but any short annotation is (theoretically) applicable. While English doesn’t typically have pronunciation guidance, phonetic annotations are used in dictionaries:

cromulent (crôm-yü-lənt)

Using ruby text for a dictionary definition by displaying the ruby text inline after the base text

: to use or not to use

The main use case of is marking up pronunciation in Asian writing, such as bopomofo for traditional Chinese and furigana for Japanese. I don’t know whether Arabic diacritics like Taškīl, Hebrew Niqqud, or other non-CJK languages would use for marking up phonetic annotations or diacritics. The WHATWG specification says:

Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations

WHATWG specification

As someone who uses tools like Popjisyo to add pop-up readings and translations to kanji, I definitely see as semantic (and valuable) for ‘phonetic annotation,’ in the same way that provides extra information on potentially confusing content. Outside of this usage, however, could be seen as a presentational hack. Oh noes! I believe the Korean and English examples above are valid uses, but much like some people think the extra code of using is not justified when the default presentation is the same as plain text.

To further muddy the waters, the 2001 W3 Ruby specification included an abbreviated word marked up with a visible definition via , and a use-by date where the day, month, and year are added via . These uses seem like presentational hacks to me, and while they’re not forbidden, the lack of such examples in HTML5 indicate they’re not exactly blessed either ;-)

In conclusion…

The most important thing is that the , , and elements are valid HTML5, and even if they’re not officially supported, they will by default display as if they were s in non-supporting browsers. Because of this, if you actually need to use , especially for phonetic annotations, do it! It might not look perfect yet in non-supporting browsers, but this will change, and hey, at least you don’t have IE support to worry about! ;-)

For non-phonetic annotation, consider using to give an expanded reading via mouse-over for an abbreviation or acronym, unless displaying the reading by default is important. Consider for phrasing content-level side comments, if the comment placement is not important and the association with the relevant content doesn’t need to be explicit.

Feedback please!

So what do you think of and friends? Let us know in the comments! If you know about the use of annotations like this in other languages, or have used , tell us about it too!

The ruby element and her hawt friends, rt and rp originally appeared on HTML5 Doctor on May 11, 2010.

HTML5 Doctor » rt