rt

Specifies the ruby text (annotation) in a ruby annotation.

Description

The <rt> element specifies the ruby text component of a ruby annotation. This is the small text that appears above (or beside) the base text to provide pronunciation or other annotation. It must be contained within a <ruby> element.

Basic Example

漢字 かんじ
<ruby> 漢字 <rt>かんじ</rt> </ruby>

With Fallback Parentheses

Use <rp> elements to provide fallback parentheses for browsers that don't support ruby:

東京 (とうきょう)
<ruby> 東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp> </ruby>

Individual Character Annotations

Each character can have its own ruby text:

漢 かん 字 じ
<ruby> 漢 <rt>かん</rt> 字 <rt>じ</rt> </ruby>

Pinyin Annotations

Ruby text is also used for Chinese pinyin:

中文 zhōngwén
<ruby> 中文 <rt>zhōngwén</rt> </ruby>

Styling Ruby Text

The <rt> element can be styled with CSS:

<style> rt { font-size: 0.5em; color: #666; font-style: normal; } </style> <ruby> 日本語 <rt>にほんご</rt> </ruby>

Common styling adjustments include font size, color, and position.

Attributes

This element supports global attributes.

Accessibility

Screen readers handle ruby text differently. Some may read the base text followed by the ruby text, others may skip the ruby text or provide options for users to hear it. The ruby text is valuable for language learners and those who need pronunciation assistance.

Related Elements

  • <ruby> - Parent element for ruby annotations
  • <rp> - Fallback parentheses