HTML rtc Tag: The Ruby Text Container Explained

HTML <rtc> Tag

The <rtc> tag in HTML defines a container for the ruby text component of a ruby annotation. Ruby text provides pronunciation, translation, or other forms of annotation alongside base text, commonly used in East Asian typography. The <rtc> tag is a crucial part of this annotation system, encapsulating the supplementary text to enhance readability and understanding. It's crucial for providing detailed information alongside base text.

Syntax

<ruby>
  <rb>base text</rb>
  <rt>ruby text</rt>
  <rtc>ruby text container</rtc>
</ruby>

Attributes

Example

<ruby>
  <rb>東京</rb>
  <rt>とうきょう</rt>
  <rtc>Tōkyō</rtc>
</ruby>

More Examples

Example 1: Basic Ruby Text with Container

This example demonstrates the basic usage of <rtc> to provide an alternative annotation for the ruby text.

<ruby>
  <rb>漢字</rb>
  <rt>かんじ</rt>
  <rtc>Kanji</rtc>
</ruby>

In this case, "漢字" (kanji) is annotated with its pronunciation "かんじ" (kanji) and the additional annotation "Kanji" as an rtc container

Example 2: Using with Pronunciation Guides

Here, we're using <rtc> to provide a phonetic guide alongside the primary ruby text. This approach is useful for learning materials and when different types of annotations are needed.

<ruby>
  <rb>你好</rb>
  <rt>nǐ hǎo</rt>
  <rtc>Ni hao</rtc>
</ruby>

This shows "你好" (nǐ hǎo) with the pronunciation guide "nǐ hǎo" and the container with its phonetics: "Ni hao"

Example 3: Multiple <rtc> Tags

It is valid to have more than one <rtc> tag, useful when you need multiple context, one with pronunciation guide, and another for its meaning

<ruby>
  <rb>先生</rb>
  <rt>せんせい</rt>
  <rtc>sensei</rtc>
   <rtc>Teacher</rtc>
</ruby>

Here, two containers are used, one with the romanization (sensei) and the other with its translation (Teacher)

Example 4: Complex Example

Combining multiple <rb>, <rt>, and <rtc> within a single <ruby> element for complex annotations.

<ruby>
  <rb>日本</rb><rt>にほん</rt><rtc>Nihon</rtc>
  <rb>語</rb><rt>ご</rt><rtc>go</rtc>
</ruby>

This showcases multiple base and ruby annotation to get multiple interpretations along with the containers

Browser Support

Notes and Tips

• The <rtc> tag must be nested inside a <ruby> element.
• While it's technically allowed to have multiple <rtc> tags, the typical use case is to provide alternative annotations for the <rt> element.
• If an <rt> element is not present, the rtc tag is invalid.
• Use <rp> tags with parentheses or similar markers to clarify the ruby text for browsers that don’t support ruby.
• The <rtc> tag can greatly improve the accessibility of content that relies on ruby annotations.
• Avoid excessive ruby annotations to maintain readability. Use them only when the additional information is critical.
• <rtc> helps with internationalization by providing translation hints alongside native characters.
• Correctly use of these tags helps to improve SEO for content that includes East Asian languages.