Firefox Tomorrow

css property

`ruby-align` CSS property

View on MDN ↗

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

Syntax

/* 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: revert;
ruby-align: revert-layer;
ruby-align: unset;

Values

This property is specified as one of the following keyword 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

Formal syntax

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also