…without <rp> parentheses

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

…using <rp> parentheses

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

…using generated content instead of <rp>

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

While there’s a lot less markup, you can’t turn it off for supporting browsers — not recommended. We need Modernizr for <ruby>

Nested <ruby> example

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

Nesting <ruby> lets us achieve most of what ‘complex <ruby>’ was specced to do.

The only thing I’ve found that ‘complex <ruby>’ can do but HTML5 <ruby> can’t is Korean-style ruby text before base text, although this could be addressed in the CSS3 Ruby module. While it’s possible to fake using CSS, we don’t even need to if we add the hanja to <rt> and use hangul as the base text.

Chinese bopomofo (not yet supported)

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

Currently no browser supports correct bopomofo display for horizontal text — the <rt> text should be displayed vertically beside each character. However IE6+ should display bopomofo correctly (to the right) for vertical text.

Note that in some browsers the ‘horizontal dash’ bopomofo character “ㄧ” sometimes renders as vertical. Check the “Origin of zhuyin symbols” table in this Wikipedia article for the line “ㄧ i, y From 一 yī”. Webkit-based browsers: vertical here, horizontal on Wikipedia; Opera: horizontal on both; FF: vertical on both. Bugs eh.

I’ve faked horizontal bopomofo display via CSS below though…

Chinese Pinyin

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.

Beware of the changes <rt> text makes to leading (<line-height>) in supporting browsers.

The second <ruby> instance here is styled to be de-emphasised in non-supporting browsers, without affecting supporting browser rendering. I used font-size: 60%; for <rt> (the same as Webkit’s default style), and added a space to each <rp>, which improves things for non-supporting browsers quite a bit. Should you wish to de-emphasise ruby text non-supporting browsers this is what I’d recommend.

Using <ruby> for English pronunciation, dictionary style

cromulent (crôm-yü-lənt), n. — Suitable, fitting, reasonable — often used in riposte by the erudite when their colloquy is cumbered by pedants, lingual or otherwise; e.g. “That is a perfectly cromulent usage”

Given dictionaries typically place the phonetic pronunciation in brackets after the defined term, I’ve faked that with rt, rp {display: inline; font-size: 100%;}. The W3 CSS3 Ruby Module had much better control, including ruby-position: right; but has zero implementation and is being completely rewritten.

As to whether this is a … cromulent use of <ruby>, that depends on whether you see it as a presentational hack allowed for internationalisation, or a legitimate way of annotating phonetic information, similar to <abbr>. As someone who has had to guess the pronunciation of a Japanese name from kanji more than once, I’m firmly in the latter, so I think associating pronunciation in English is appropriate. Hixie and Annevk both suggested that unless the semantic information was really necessary <ruby> is overkill for any content that would be displayed inline by default anyway.

Korean <ruby> via CSS

The top example is of old-style Korean ruby usage, with hangul following the hanja (smaller and to the right in vertical text). The bottom example is of current Korean ruby use, with the hangul appearing before the hanja in parentheses. I perceived ruby text as phonetic information for the base text as that’s how it is in Japanese, but the spec 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.

As the hangul is now the main content and the hanja only for disambiguation I think they fall under “other annotations”. While it’d be fine to add the parentheses via generated content, I’ve left them as <rp> in case styles are turned off.

Thanks to Gen of Mozilla and Channy for Korean advice.

Other experiments