Ruby text is the term that is commonly used to describe a run of text that appears alongside another run of text that is known as the ruby base text to annotate or provide pronunciation guide to that run of text. It is typically placed above or to the right of the base text but can also be placed below or to the left. An example is shown in Figure 3.45, rendered in Microsoft Edge, in which ruby text is used to provide the pronunciation of the Chinese characters. The translation in, for example, English, could also be given instead of, or with, pronunciation.
Ruby text is usually smaller and thinner than the base text, and its use is especially common in East Asian text, such as Chinese, Japanese, and Korean (CJK) text. The elements used to implement it are listed in Table 3.5.
The elements in the table can be combined in various ways to produce the same result. For example, each pair of <rb> element and the corresponding <rt> element can be placed in <ruby> elements, or a sequence of <rb> elements and a sequence of corresponding <rt> elements can be placed in the same <ruby> element. Some examples of usage are presented next.
1. <ruby>, <rb>, <rt>, and <rp>
Figure 3.46 shows how the <ruby> <rb> and <rt> elements are used, and Figure 3.47 depicts the result, using the Chinese text for “Red Dragon is Alive!” The base text is in simplified Chinese, while the ruby text gives the traditional Chinese equivalence.
In Figure 3.46, notice that there are equal numbers of <rb> and <rt> elements in the <ruby> element. Each <rt> element is associated with the corresponding <rb> element and is displayed above it or to the right of it. However, in Figure 3.47, notice that some ruby characters are missing above some base characters. This is because the ruby characters are the same as the corresponding ruby base characters, and it is redundant to show them twice. In cases where there is no ruby character for a ruby base, an empty <rt> element must still be included in order to ensure correct matching between the base and ruby characters. It is also worth noting that a space can be put between the characters by having a space between the <rb> elements or having them on separate lines.
Figure 3.48 shows the same code as in Figure 3.46, but with the <rp> element used to add parentheses to enclose the <rt> elements, so that browsers that do not support ruby text can ignore them. Notice how this is done (shown in bold). The left parenthesis is added with <rp>(</rp>, and the right parenthesis is added with <rp>)</rp>. The code produces the same result as Figure 3.47, in browsers that support ruby text.
2. <rbc> and <rtc>
Apart from its use for containing <rb> elements so that they can be treated as one, the <rbc> element seems useful for little else as of time of writing. Even then, its use for containing <rb> elements can cause alignment problem with ruby text. On the other hand, being able to group <rt> elements with the <rtc> element makes it possible to provide more than one set of ruby text for the same base text, with the ruby texts stacked on top of the other. This means that you could, for example, provide more than one type of information for the same base text, such as pronunciation and meaning in another language. Figure 3.49 shows how the element is used, and Figure 3.50 shows the effect. It adds another layer of ruby text to provide pronunciation guide.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.