Foundation HTML5 with CSS3

Chapter 4

are hidden in browsers that support the ruby, rt, and rp elements, but will be visible in browsers that

don’t recognize these elements. Each single parenthesis should be enclosed in an rp element, with the rt

element in between, as you see in Listing 4-40.

Listing 4-40. The rp element hides ruby parentheses from supporting browsers

<p lang="zh">

<ruby>

旧<rp> (</rp><rt>jiù</rt><rp>) </rp>

金<rp> (</rp><rt>jīn</rt><rp>) </rp>

山<rp> (</rp><rt>shān</rt><rp>) </rp>

</ruby>

</p>

In browsers that don’t recognize these elements and/or apply no default styling, the annotations will simply

appear inline after the base text they reference, just as if the ruby elements weren’t present at all (see

Figure 4-28).

Figure 4-28. Ruby text as rendered by a browser that doesn’t recognize the rt or rp elements

For even more information on when, how, and why to use ruby text, along with more examples of practical

usage, see Oli Studholme’s indispensible article at HTML5 Doctor, The ruby Element and Her Hawt

Friends, rt and rp (html5doctor.com/ruby-rt-rp-element/)

Required Attributes

The ruby, rt, and rp elements don’t have any required attributes.

Optional Attributes

There aren’t any optional attributes for the ruby, rt, or rp elements.

The term “ruby text” is old British typesetter’s jargon referring to very small type, roughly

5.5 points, which was often used for between-the-lines annotations. Why they called this

particular type size “ruby” is a mystery lost to time. Other sizes of type had names like

diamond, pearl, brilliant, great primer, and paragon. Those old printers were an odd

bunch.

Bidirectional Text: bdi and bdo

Written languages are read either from left to right (like English, Spanish, German, Malay, or Hindi) or from

right to left (like Arabic, Persian, or Hebrew). Documents written predominantly in one language may still