【龍】甲辰年甲戌月壬子日 / 九月十四日
Tuesday October 15, 2024

Ruby

Ruby characters are used to show prononounciation around a character. This can be used to add zhuyin (bopomofo) to characters.
HTML5 supports the <ruby> tag and so most modern browsers are capable of displaying it.

Display RUBY in text editor

OpenOffice: If 'Enhanced language support for Asian languages' is enabled in OpenOffice you are able to add ruby to characters. This is available in Format > Asian Phonetic Guide...

Microsoft Word: For Word XP/2002/2003 this can be found under Format > Asian Layout > Phonetic Guide...
In Word 2007 the phonetic guide can be found on the 'home'-tab, 4th icon on the right of the font size.

Display RUBY on the internet

Example: WWWWord Wide Web

The code for the above notation is :
<ruby>
  <rb>WWW</rb>
  <rt>Word Wide Web</rt>
</ruby>

Fallback example: WWW(Word Wide Web)
Use this fallback instead, the ruby text will be displayed between parentheses after the ruby base if the browser does not support ruby:
<ruby>
  <rb>WWW</rb>
   <<rp>(</rp>
    <rt>World Wide Web</rt>
   <<rp>)</rp>
</ruby>

Workaround:
If the following code is added to the stylesheet of the document you should be able to display Ruby on your page (it was originally developed for Netscape)

/* Rules for Ruby annotation */
ruby {
display:inline-table;
text-align:center;
white-space:nowrap;
text-indent:0;
margin:0 -0.2em;
vertical-align:-20%;
}

/* ruby base */
ruby>rb,ruby>rbc {
display:table-row-group;
line-height:90%;
}

/* ruby text before */
ruby>rt,ruby>rbc+rtc {
display:table-header-group;
font-size:60%;
line-height:40%;
letter-spacing:0;
}

/* ruby text after */
ruby>rbc+rtc+rtc {
display:table-footer-group;
font-size:60%;
line-height:40%;
letter-spacing:0;
}

/* complex ruby text */
rbc>rb,rtc>rt {
display:table-cell;
letter-spacing:0;
}

rtc>rt[rbspan] {
display:table-caption;
}

/* ruby parentheses */
rp {
display:none;
}

(thanks to Kitamura Akatsuki, original source)

More information, see Ruby Annotation (W3C) and CSS3 module: Ruby (W3C)