Ruby-specific properties fall into two main categories. There are those for styling and formatting ruby elements, which were first introduced in Chapter 3, and there are those for making other elements behave like ruby elements. These properties are introduced here.
1. Ruby Properties for Styling and Formatting
Ruby elements and their contents can be styled and controlled by many of the generic CSS properties discussed so far. However, there are also properties that are unique to ruby elements. Those defined as of time of writing are ruby-position, ruby-align, and ruby-merge, all of which are not yet widely supported by major browsers. The examples presented here were rendered in Firefox.
1.1. ruby-position
The ruby-position property specifies the position of the ruby text (i.e., <rt> element) relative to the corresponding ruby base (i.e., <rb> element) and is inherited. Table 14.17 lists the values it takes.
1.2. ruby-align
The ruby-align property allows you to specify how the ruby text in a <rt> element should be distributed across the base text in the corresponding <rb> element and is inherited. Table 14.18 lists the values for the property.
1.3. ruby-merge
The ruby-merge property allows you to specify how <rt> elements are rendered when there is more than one in a <ruby> element and is inherited. Table 14.19 lists the values it takes.
The property is not yet implemented in any major browser as of time of writing, so, a demonstration is not possible here, but it is specified in a similar way as the other two.
2. Converting Elements to Ruby Elements
It is possible to make other elements behave like ruby elements, using the display property first introduced in . However, it is usually best to use the dedicated elements, as this ensures that screen readers and browsers that do not support CSS or have it turned off can recognize them. The ruby-specific display values are listed in Table 14.20 and Figures 14.59 and 14.60 show how they are used and the effect.
In the example, the first <div> element and the <span> elements inside it are not converted and so behave as normal. In contrast, the .ruby{} rule makes the <div> element of class=“ruby” behave like a <raby> element.; the .rb{} rule makes the <span> element of class=“rb” behave like an <rb> element; the .rbc{} rule makes the <span> element of class=“rbc” behave like an <rbc> element, and so on for the rest of the rules.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.