Constructing Content - HTML5 with CSS3 - page 119

thousands of written characters, and even life-long native speakers will often encounter unfamiliar
symbols. Furthermore, the same character may have very different meanings in different contexts or when
spoken in different tones, so pronunciation hints can be vital to understanding the written text.
You can see an example of Japanese ruby text in Figure 4-26, where the smaller characters act as a
pronunciation guide for the larger characters beneath them (ruby annotations are also called furigana in
Japanese).
Figure 4-26. An example of Japanese ruby text
HTML5 introduces a set of elements specifically to mark up ruby text. The ruby element indicates a word
or phrase that includes ruby text annotations, and an rt element indicates each annotation. Listing 4-39
shows an example in Chinese with pīnyīn phonetic pronunciation hints.
Listing 4-39. The Chinese name for San Francisco, with ruby annotations for each character
<p lang="zh">
<ruby>
旧 <rt>jiù</rt>
金 <rt>j ī n</rt>
山 <rt>sh ā n</rt>
</ruby>
</p>
As you see in Figure 4-23, each annotation is rendered above the character(s) preceding it, and at a much
smaller font size by default.
Figure 4-27. Ruby text rendered in a supporting web browser (Chrome, in this case)
Ruby text can also offer translations or an explanation of a character's meaning, instead of (or in addition
to) pronunciation hints:
<p lang="zh"><ruby> 旧金山 <rt>San Francisco</rt> </ruby></p>
These are new elements, so not every browser supports them yet, but there are ways to compensate for
lack of browser support and offer a readable fallback. The rp element indicates ruby parentheses , which