How CSS ruby-align Spaces Pronunciation Guides

The CSS ruby-align property controls how ruby annotation text—commonly used for pronunciation guides such as Japanese furigana or Chinese pinyin—is horizontally distributed relative to its underlying base text. Because pronunciation annotations rarely match the exact width of the base characters they describe, ruby-align defines the typographic spacing rules that resolve this width mismatch to ensure readability and aesthetic balance.

The Role of ruby-align in Typography

In East Asian typography, ruby text (defined with the HTML <rt> element) sits adjacent to base text (within the <ruby> container). When the annotation text is shorter or longer than the base text, the browser must adjust the inline alignment.

The ruby-align property can be applied to ruby containers, base containers, or individual annotation elements. It accepts four primary values: space-around, center, space-between, and start.

space-around (Default)

The space-around value is the standard default in modern browser implementations. When the ruby text is shorter than the base text, the browser distributes the excess whitespace between and around the ruby characters.

• The spaces between characters are typically twice as wide as the margins at the start and end of the annotation.
• This creates a balanced, natural distribution (often referred to as a 1:2:1 spacing ratio in East Asian print standards), preventing characters from crowding or leaving harsh gaps at the edges.

If the base text is shorter than the ruby text, the same proportional distribution is applied across the base characters instead.

center

The center value aligns the midpoint of the ruby text directly with the midpoint of the base text.

• No extra inter-character space is inserted between glyphs.
• If the ruby text is shorter than the base text, it clusters in the center with equal empty space on both sides.
• If the ruby text is wider than the base text, it extends symmetrically past the start and end of the base characters.

This value is frequently used for single-character bases or when strict, unspaced character grouping is preferred over stretched text.

space-between

The space-between value forces the text to span the full width of the counterpart text by adjusting only the internal spacing.

• The first character is aligned flush with the starting edge of the base text.
• The last character is aligned flush with the ending edge of the base text.
• All remaining empty space is divided equally among the spaces between the interior characters.

This produces sharp, justified vertical edges on both margins, though it can cause unnatural visual gaps if there are very few characters spanning a long base word.

start

The start value aligns the inline-start edge of the ruby text with the inline-start edge of the base text.

• In typical left-to-right writing modes, the text aligns to the left margin.
• Any excess space remains at the trailing edge.
• Characters maintain their natural typographic spacing without expansion.

This is generally used in specialized layouts or dictionaries where consistent left-alignment aids rapid vertical scanning.

Implementation Example

ruby {
  font-size: 2rem;
}

rt {
  font-size: 0.5em;
  ruby-align: space-around; /* Options: space-around, center, space-between, start */
}

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

By switching the value of ruby-align, the browser automatically computes whether extra space must be injected into the base characters or the ruby characters, maintaining clean alignment regardless of dynamic font sizes or character count differences.