In CSS, the ruby-position feature is used to control the placement of ruby annotations (in English: ruby text) in relation to the base text. This feature is particularly effective in languages like Chinese and Japanese that require small annotations on top of or next to their characters, making it very useful.
In Eastern cultures, there are times when the pronunciation or meanings of characters need to be displayed alongside them. For this reason, the ruby feature has been added to CSS. The ruby-position allows you to control how these annotations are displayed.
The ruby-position feature allows you to specify whether these annotations should be displayed above or below the base text. Given the nature of international design and also multilingual content, this feature is very important and practical.
In the following, we will look into how this feature is effectively implemented and its impact on web pages.
An example of how to use the ruby-position feature
<ruby>site<rt>site</rt></ruby>.
<ruby style="ruby-position: under;">text<rt>text</rt></ruby>
In the above example, the first ruby element defines the term 'site' with the text 'site' underneath it.
Then, another ruby element is created that shows the 'text' description along with the term underneath it.
Line-by-line descriptions:
<ruby>: The ruby tag is used to define text that requires a description or translation.site: The main text that needs to be explained.<rt>: The rt tag is used to define annotations or translations that relate to the main text.text: The description or translation shown by the rt tag.style="ruby-position: under;": This line makes sure that the annotations are placed beneath the main text.