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

ruby-align

The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.

Typography

Overview

The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.

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

Powered by web-features