HTML and CSS Reference
In-Depth Information
To h e l p t h e r e a d e r, is To m e t i m e is t h e p r To n u n c i a t i To n i is w r i t t e n
above the kanji using the hiragana alphabet. This is called furig-
ana in Japanese and ruby in English (from the name of the small
5.5 pt type size used for similar sorts of annotations in British
print tradition). It is often used in newspapers and topics but not
so much on websites, due to the difficulty of squeezing minia-
ture text above larger text on a single line. The
<ruby>
element
aims to solve this.
According to the current HTML5 spec, the
<ruby>
element is an
inline element and is placed around the word or character you'd
like to clarify, like so:
<ruby> </ruby>
By itself this does nothing, so you add the pronunciation either
for each character or, as in this case and our personal prefer-
ence, for the word as a whole. For this, you use the
<rt>
tag,
meaning ruby text.
<ruby> <rt> </rt></ruby>
Yo u c o u l d l e a v e i it l i k e it h a it a n d s u p p o r it i n g b r o w s e r s w o u l d s h o w
the hiragana pronunciation above the kanji text, but nonsupport-
ing browsers would ignore the tags and show both the text and
its pronunciation side by side. To solve this, you have another
tag,
<rp>
, meaning ruby parentheses, which cleverly hides char-
acters (namely parentheses) in supporting browsers. This means
you can write the pronunciation in parentheses, which nonsup-
porting browsers will show, and supporting browsers will con-
tinue to show the pronunciation without parentheses above the
main text (
Figure 2.22
).
<ruby>
FIguRE 2.22
In supporting
browsers, ruby text is
shown above main text. In
nonsupporting browsers, ruby
text is shown next to main text
but in parentheses.
<rp>(</rp><rt>
</rt><rp>)</rp></ruby>
<wbr>
In Netscape 4 and now standardized by HTML5 to great rejoic-
ing, the
<wbr>
element tells a browser it may (but is not required
to) insert a line break here if it needs somewhere to break a line.
