CSS Ruby Annotation Generator

Generate CSS for ruby annotations - Japanese furigana and phonetic guides

Content

Base Text (漢字)

Ruby Text (ふりがな)

over

Above (horizontal text)

under

Below (horizontal text)

inter-character

Between characters

start

Align to start

center

Center align

space-between

Space between

space-around

Space around

Base Font Size: 24px

Ruby Font Size: 12px

漢字かんじ

ruby {
  font-size: 24px;
}

rt {
  ruby-position: over;
  ruby-align: space-around;
  font-size: 12px;
}

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