ruby-align

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;

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 definition

Initial valuespace-around
Applies toruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

start | center | space-between | space-around

Examples

Ruby aligned at the start of the base text

HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-align: start;
}

Result

Ruby aligned at the center of the base text

HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-align: center;
}

Result

Extra space distributed between ruby elements

HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-align: space-between;
}

Result

Extra space distributed between and around ruby elements

HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-align: space-around;
}

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 NoFirefox 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