Newly available Useful when ruby-align affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.

ruby-align

The ruby-align CSS property defines the distribution of the different ruby elements over the base.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ruby-align
128
128
38
18.2
128
18.2
center
128
128
38
18.2
128
18.2
space-around
128
128
38
18.2
128
18.2
space-between
128
128
38
18.2
128
18.2
start
128
128
38
18.2
128
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
ruby {
  ruby-align: space-around;
}
.centered-ruby {
  ruby-align: center;
}

Live demo

space-around

CSS Space-around demo.

PreviewFullscreen

center

CSS Center demo.

PreviewFullscreen

space-between

CSS Space-between demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use ruby-align to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links