CSS ruby-align Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The ruby-align property can be used on any element to control the text alignment of the ruby text and ruby base contents relative to each other.

Initial value: auto
Applies to: All elements and generated content
Inherited: Yes
Computed value: Specified value (except for initial and inherit)
Animatable: No
JavaScript syntax: object.style.rubyAlign

Syntax

ruby-align: start | center | space-between | space-around

Values

startThe ruby content is aligned with the start edge of its box.
centerThe ruby content is centered within its box.
space-betweenThe ruby content expands as defined for normal text justification, except that if there are no expansion opportunities the content is centered.
space-aroundAs for 'space-between' except that there exists an extra expansion opportunity whose space is distributed half before and half after the ruby content.

Example

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

Editor

Browser Support

The following table will show you the current browser support for the CSS ruby-align property.

Desktop

x	x	38	x	x

Tablets / Mobile

x	38	x	x	x	x

Last updated by CSSPortal on: 31st December 2023

Support Us