HTML&CSS · December 20, 2023

Css Basic: ruby-position

CSS Basics: ruby-position

In CSS, the ruby-position property is used to define the position of the ruby text annotations relative to the base text. Ruby annotations are small text elements that are used to provide pronunciation or translation information for East Asian typography.

Understanding Ruby Annotations

Ruby annotations are commonly used in East Asian languages such as Japanese, Chinese, and Korean. They are used to provide additional information about the pronunciation or meaning of certain characters or words. Ruby annotations are typically displayed above or below the base text and are smaller in size.

For example, in Japanese, ruby annotations are often used to provide furigana, which is the phonetic reading of kanji characters. This helps readers who may not be familiar with the kanji characters to understand the pronunciation of the words.

The ruby-position Property

The ruby-position property is used to control the position of the ruby text annotations. It can take one of the following values:

  • over: The ruby text is positioned above the base text.
  • under: The ruby text is positioned below the base text.

By default, the ruby-position property is set to over, which means the ruby text annotations are displayed above the base text.

Examples

Let's take a look at some examples to understand how the ruby-position property works:

<style>
  ruby {
    ruby-position: over;
  }
</style>

<p>
  <ruby>漢</ruby><ruby>字</ruby> (Kanji)
</p>

In this example, the ruby text annotations for the characters "漢" and "字" will be displayed above the base text. The result will be something like this:

漢字 (Kanji)

<style>
  ruby {
    ruby-position: under;
  }
</style>

<p>
  <ruby>漢</ruby><ruby>字</ruby> (Kanji)
</p>

In this example, the ruby text annotations for the characters "漢" and "字" will be displayed below the base text. The result will be something like this:

漢字 (Kanji)

Conclusion

The ruby-position property in CSS allows you to control the position of ruby text annotations in East Asian typography. By using the over or under values, you can specify whether the ruby text should be displayed above or below the base text. Understanding how to use this property can help you enhance the readability and comprehension of East Asian languages in your web designs.

Summary

In summary, the ruby-position property in CSS is used to define the position of ruby text annotations in East Asian typography. It can be set to over or under to control whether the ruby text is displayed above or below the base text. To learn more about CSS and its various properties, consider exploring Server.HK, a leading VPS hosting company that offers reliable and high-performance hosting solutions.

You may also like...