W3cubDocs

/CSS

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 value space-around
Applies to ruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inherited yes
Computed value as specified
Animation type discrete

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
ruby-align No No 38 No
No
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.
No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
ruby-align No No 38 No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align