Definition and Usage
This property is used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base.
| Name: | ruby-position |
|---|---|
| Value: | [ over | under | inter-character ] && [ right | left ] |
| Initial: | over right |
| Applies to: | ruby annotation containers |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value |
| Animatable: | no |
| Canonical order: | per grammar |
Syntax
ruby-position : [ over | under | inter-character ] && [ right | left ];
Values
- '
over' - The ruby text appears over the base in horizontal text.
- '
right' - The ruby text appears on the right side of the base in vertical text.
- '
under' - The ruby text appears under the base in horizontal text. This is a relatively rare setting used in ideographic East Asian writing systems, most easily found in educational text.
- '
left' - The ruby text appears on the left side of the base in vertical text.
- '
inter-character' -
The ruby text appears on the right of the base in horizontal text. This value forces the '
writing-mode' of the ruby annotation to be vertical.This value is provided for the special case of traditional Chinese as used especially in Taiwan: ruby (made of bopomofo glyphs) in that context appears vertically along the right side of the base glyph, even when the layout of the base characters is horizontal:
Note that the user agent is responsible for ensuring the correct relative alignment and positioning of the glyphs, including those corresponding to the tone marks, when displaying. Tone marks are spacing characters that occur (in memory) at the end of the ruby text for each base character. They are usually displayed in a separate column to the right of the bopomofo characters, and the height of the tone mark depends on the number of characters in the syllable. One tone mark, however, is placed above the bopomofo, not to the right of it.
Examples
.class {
ruby-position: after ;
}
