Preset

Annotations above horizontal text (standard for Japanese horizontal)

Target Element

Ruby Position

Ruby Align

Preview Language

Preview Settings

Font FamilyFont Size: 24pxAnnotation Size: 50%Show Position Comparison

Save/Load

Live Preview

東京(とうきょう)Tokyo

日本(にほん)Japan

漢字(かんじ)Kanji

富士山(ふじさん)Mt. Fuji

桜(さくら)Cherry blossom

Position Comparison

over

東京(とうきょう)

Ruby appears above (horizontal) or to the right (vertical) of base text

under

東京(とうきょう)

Ruby appears below (horizontal) or to the left (vertical) of base text

inter-character

東京(とうきょう)

Ruby appears between characters (for bopomofo)

Generated CSS

ruby {
  ruby-position: over;
}

ruby rt {
  ruby-align: space-around;
}

HTML Structure

<!-- Ruby annotation markup -->
<ruby>
  東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

<!-- With lang attribute for proper font rendering -->
<p lang="ja">
  <ruby>東京<rt>とうきょう</rt></ruby>
</p>

<!-- Multiple characters with individual annotations -->
<ruby>
  東<rt>と</rt>京<rt>う</rt>
</ruby>

Examples

Japanese Furigana (Horizontal)

/* Furigana above horizontal Japanese text */
[lang="ja"] ruby {
  ruby-position: over;
}

[lang="ja"] ruby rt {
  ruby-align: space-around;
  font-size: 50%;
}

/* HTML */
<p lang="ja">
  <ruby>東京<rt>とうきょう</rt></ruby>は
  <ruby>日本<rt>にほん</rt></ruby>の首都です。
</p>

Japanese Furigana (Vertical)

/* Furigana for vertical Japanese text */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.vertical-text ruby {
  ruby-position: over; /* Right side in vertical */
}

.vertical-text ruby rt {
  font-size: 50%;
}

/* HTML */
<div class="vertical-text" lang="ja">
  <ruby>富士山<rt>ふじさん</rt></ruby>
</div>

Chinese Pinyin (Simplified)

/* Pinyin above simplified Chinese */
[lang="zh-CN"] ruby,
[lang="zh-Hans"] ruby {
  ruby-position: over;
}

[lang="zh-CN"] ruby rt {
  ruby-align: space-around;
  font-size: 60%;
  font-family: sans-serif;
}

/* HTML */
<p lang="zh-CN">
  <ruby>你好<rt>Nǐ hǎo</rt></ruby>，
  <ruby>中国<rt>Zhōngguó</rt></ruby>。
</p>

Chinese Bopomofo (Traditional)

/* Bopomofo/Zhuyin for Traditional Chinese */
[lang="zh-TW"] ruby {
  ruby-position: inter-character;
}

[lang="zh-TW"] ruby rt {
  ruby-align: center;
  font-size: 40%;
  writing-mode: vertical-rl;
}

/* HTML */
<p lang="zh-TW">
  <ruby>台北<rt>ㄢㄠˋ ㄅㄔˋ</rt></ruby>是
  <ruby>台灣<rt>ㄢㄠˋ ㄊㄢˊ</rt></ruby>的首都。
</p>

Double-sided Annotations

/* Two-level annotations (e.g., pronunciation + meaning) */
ruby {
  ruby-position: alternate;
}

ruby rt:first-of-type {
  ruby-align: space-around;
  font-size: 50%;
}

ruby rt:last-of-type {
  ruby-align: center;
  font-size: 40%;
  color: #666;
}

/* HTML with two <rt> elements */
<ruby>
  東京
  <rt>とうきょう</rt>
  <rt>Tokyo</rt>
</ruby>

Styling Ruby Annotations

/* Enhanced ruby styling */
ruby {
  ruby-position: over;
}

ruby rt {
  ruby-align: space-around;
  font-size: 50%;
  color: #e74c3c;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Fallback parentheses for older browsers */
ruby rp {
  color: #999;
  font-size: 80%;
}

/* Hover effect */
ruby:hover rt {
  color: #c0392b;
  font-weight: 600;
}

Reference

Ruby Position Values

Value	Horizontal Text	Vertical Text	Use Case
`over`	Above base text	Right of base text	Japanese furigana, Chinese pinyin
`under`	Below base text	Left of base text	Traditional Chinese annotations
`inter-character`	Between characters	Right, inline with characters	Taiwan bopomofo/zhuyin
`alternate`	Alternates over/under	Alternates right/left	Double annotations

Ruby Align Values

Value	Description	Best For
`start`	Align to start edge of base text	Left-to-right annotations
`center`	Center over base text	Single character bases, bopomofo
`space-between`	Distribute with space between	Multi-character annotations
`space-around`	Distribute with space around (default)	General use, balanced spacing

HTML Ruby Elements

Element	Purpose	Required
`<ruby>`	Container for base text and annotations	Yes
`<rt>`	Ruby text (the annotation)	Yes
`<rp>`	Ruby parentheses (fallback for non-supporting browsers)	No
`<rb>`	Ruby base (explicit base text, rarely needed)	No
`<rtc>`	Ruby text container (for grouping)	No

Browser Support

Property	Chrome	Firefox	Safari	Edge
`ruby-position`	Partial (84+)	Yes (38+)	Yes (7+)	Partial (84+)
`ruby-align`	No	Yes (38+)	No	No
`<ruby>` element	Yes (5+)	Yes (38+)	Yes (5+)	Yes (12+)
`inter-character`	No	Yes (38+)	Partial	No

Best Practices

Use Correct Language Tags

Always set the lang attribute for proper font selection and text rendering. Use lang="ja" for Japanese, lang="zh-CN" for Simplified Chinese, lang="zh-TW" for Traditional Chinese.

Include Fallback Parentheses

Use <rp> elements to provide parentheses fallback for browsers that don't render ruby annotations properly.

Size Annotations Appropriately

Ruby annotations are typically 40-60% of the base text size. Too small is unreadable; too large disrupts layout.

Consider Vertical Text

For traditional Japanese and Chinese layouts, use writing-mode: vertical-rl with ruby-position: over for proper positioning.

Test Cross-Browser

Ruby CSS support varies significantly. Firefox has the best support, while Chrome and Safari have limited ruby-align support.

Match Cultural Conventions

Japanese prefers furigana over the text, Traditional Chinese often uses bopomofo to the side, Simplified Chinese uses pinyin above.

Cultural Conventions

Japanese (\u65E5\u672C\u8A9E)

Furigana (hiragana readings) placed above horizontal text
Placed to the right of vertical text
Size: typically 50% of base text
Used for kanji pronunciation, especially in educational materials

Simplified Chinese (\u7B80\u4F53\u4E2D\u6587)

Pinyin (romanization) placed above characters
Includes tone marks (m\u0101, m\u00E1, m\u01CE, m\u00E0)
Size: typically 50-60% of base text
Common in textbooks and children's books

Traditional Chinese (\u7E41\u9AD4\u4E2D\u6587)

Bopomofo/Zhuyin placed to the right of characters
Uses inter-character positioning
Written vertically alongside each character
Standard in Taiwan educational materials

Korean (\uD55C\uAD6D\uC5B4)

Hanja (Chinese characters) with hangul readings
Placed above or after in parentheses
Less common in modern Korean text
Mostly used in formal/legal documents