CSS - ruby-align

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

Examples

Example1

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

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

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;
}

This gives the following 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;
}

This gives the following 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;
}

This gives the following 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;
}

This gives the following result:

Syntax  

CSS
/* 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;

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

CSS
start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space-between <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space-around

Description  

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

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

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support 38 (38) No support[1] No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 38.0 (38) No support[1] No support No support

[1] Since version 9 Internet Explorer implements an early draft of CSS Ruby where ruby-align had the following values: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Here is a rough conversion table:

IE syntax Standard syntax
auto Don't use ruby-align
left Use start (in ltr scripts)
center center
right Use start (in rtl scripts)
distribute-letter No direct equivalent, use space-between or space-around
distribute-space space-around
line-edge No direct equivalent.

See Also  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/ruby-align

CSS CSS Reference CSS Ruby Property Reference