ruby
Represents a ruby annotation, used for East Asian typography.
Description
The <ruby> element represents a ruby annotation. Ruby annotations are small text above or beside the base text, typically used to show pronunciation of East Asian characters (like furigana in Japanese or pinyin in Chinese).
A ruby annotation consists of the base text and the ruby text (<rt>), with optional fallback parentheses (<rp>) for browsers that don't support ruby.
Basic Example
Japanese Furigana
Ruby is commonly used to show furigana (pronunciation guides) for kanji:
東京は日本の首都です。
Chinese Pinyin
Ruby can also display pinyin for Chinese characters:
北京 is the capital of China.
Multiple Ruby Annotations
Multiple ruby elements in a sentence:
明日の 天気は 晴れです。
Styling Ruby
Ruby annotations can be styled with CSS:
The ruby-position property controls whether annotations appear above (over) or below (under) the base text.
Attributes
This element supports global attributes.
Accessibility
Screen readers may read both the base text and ruby text, or just one depending on the implementation. The ruby text provides pronunciation information that benefits learners and those with reading difficulties. The <rp> fallback ensures that in unsupported browsers, the annotation appears in parentheses.