CSS ruby-align Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ruby-align property controls how ruby annotations (the small text usually used for pronunciation or other annotations above or beside base text) are positioned relative to their base text and to each other within the ruby container. It determines the distribution and anchoring of the annotation boxes when a ruby base has one or more annotation segments; in practice this affects whether annotations are grouped, centered, stretched, or spaced across the extent of their associated base text. This is important when annotations do not naturally match the width of the base text or when multiple annotation runs must share a single base segment.

Because ruby annotations can be rendered in different orientations and alongside different layout constraints, ruby-align interacts with other layout properties. It complements the placement decision made by ruby-position, which determines whether the annotations appear above, below, or beside the base text; while ruby-position picks the side, ruby-align chooses how annotation boxes are arranged along the axis of the ruby container. The effective alignment is also influenced by the page’s writing direction and flow, so authors should consider the document’s writing-mode when reasoning about how annotations will be distributed in horizontal versus vertical text.

In practical terms, ruby-align matters whenever you want predictable spacing or grouping of ruby text — for example, aligning multiple short annotations evenly across a wider base or preventing long annotations from pushing others out of alignment. It also interacts with inline-level alignment behaviors such as text-align because the positioning of the ruby container relative to surrounding inline content can affect available space and line-breaking; authors often use these properties together to achieve consistent visual results. Finally, because ruby layout can produce complex inline boxes (anonymous wrappers, stacked annotation levels), understanding how ruby-align redistributes annotation boxes helps avoid unexpected overlaps or uneven spacing in dense annotated text.

Definition

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

<div class="container">

  <h2>ruby-align examples</h2>

  <div class="examples">

    <div class="sample">

      <div class="label">ruby-align: start</div>

      <p class="text">

        <ruby class="r-start">漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

      </p>

    </div>



    <div class="sample">

      <div class="label">ruby-align: center</div>

      <p class="text">

        <ruby class="r-center">漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

      </p>

    </div>



    <div class="sample">

      <div class="label">ruby-align: space-between</div>

      <p class="text">

        <ruby class="r-space">漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

      </p>

    </div>

  </div>

</div>

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  padding: 2rem;
  background: #f7f7f9;
  color: #111;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

.examples {
  display: flex;
  gap: 1rem;
}

.sample {
  flex: 1;
  background: #fff;
  border: 1px solid #e3e3e6;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
}

.label {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}

.text {
  font-size: 2rem;
  line-height: 1;
}

ruby {
  /* Place annotations above the base text */
  ruby-position: over;
}

rt {
  font-size: 0.6rem;
  color: #c00;
}

rp {
  /* hide fallback parentheses in modern browsers */
  display: none;
}

/* Different ruby-align examples */
.r-start {
  ruby-align: start;
}

.r-center {
  ruby-align: center;
}

.r-space {
  ruby-align: space-between;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ruby-align property. Hover over a browser icon to see the version that first introduced support for this CSS property.