Text styling
ruby-align
ruby-align sets how the shorter of a ruby annotation and its base text is laid out when their lengths differ: pushed to the start, centered, or spread out.
Syntax
start | center | space-between | space-aroundPreview
明日は東京
Presets
Drag the bottom-right corner to resize
Code
.box {
ruby-align: start;
}Controls
ruby-alignstart
明日は東京
About
It affects the shorter side
Ruby text is about half the size of its base, so depending on the number of characters either the annotation or the base ends up shorter. In the preview here, 明日 (あした) has the shorter annotation, so the annotation is spread, while 東京 (とうきょう) has the shorter base, so the base is spread.
What the values mean
start: aligns to the start (left in horizontal text, top in vertical text).center: centers it.space-between: adds space between the characters to reach both ends. With nothing to space out (a single character), it centers instead.space-around: spreads likespace-betweenand also adds half a gap at each end. This is the initial value.
Watch out
- It is inherited, so you can set it once on a paragraph or other outer element. The preview here sets it on the box.
- Chrome and Edge support it from 128, Safari from 18.2. Older browsers usually spread ruby like
space-around. - Whether a longer annotation may hang over the neighboring kana or punctuation is a separate property,
ruby-overhang.