This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

/* Keyword values */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* Global values */
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
Initial valuespace-around
Applies toruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

start
Is a keyword indicating that the ruby will be aligned with the start of the base text.
center
Is a keyword indicating that the ruby will be aligned at the middle of the base text.
space-between
Is a keyword indicating that the extra space will be distributed between the elements of the ruby.
space-around
Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

Formal syntax

start | center | space-between | space-around

Examples

This HTML will render differently with each value of ruby-align:

<ruby>
  <rb>This is a long text to check</rb>
  <rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>

Ruby aligned at the start of the base text

ruby {
  ruby-align: start;
}

This gives the following result:

Ruby aligned at the center of the base text

ruby {
  ruby-align: center;
}

This gives the following result:

Extra space distributed between ruby elements

ruby {
  ruby-align: space-between;
}

This gives the following result:

Extra space distributed between and around ruby elements

ruby {
  ruby-align: space-around;
}

This gives the following result:

Specifications

Specification Status Comment
CSS Ruby Layout Module Level 1
The definition of 'ruby-align' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ruby-align
Experimental
Chrome No support NoEdge No support No
Notes
No support No
Notes
Notes Edge supports an earlier draft of CSS Ruby with non-standard values for this property: auto, left, center, right, distribute-letter, distribute-space, and line-edge.
Firefox Full support 38IE No support No
Notes
No support No
Notes
Notes Internet Explorer 9 and later supports an earlier draft of CSS Ruby with non-standard values for this property: auto, left, center, right, distribute-letter, distribute-space, and line-edge.
Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 38Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,