Working Draft · css-ruby

CSS Ruby Annotation Layout

4 properties defined by this specification, 3 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: ruby-align, ruby-overhang, ruby-position, display: ruby.

Read the Editor's Draft ↗ W3C Working Draft ↗

Each feature in detail

`ruby-align`

Property Baseline: newly availablesince December 2024 Modern CSS: ruby-align

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

Live preview Example from MDN

ruby {
  ruby-align: start;
}

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

Syntax

start | center | space-between | space-around

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: space-around
Applies to: ruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting ruby-align
Chrome	128
Edge	128
Firefox	38
Safari	18.2
Chrome Android	128
Safari iOS	18.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`ruby-merge`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

separate | merge | auto

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: separate
Applies to: interlinear ruby annotation containers
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: by computed value type

Specification ↗

`ruby-overhang`

Property Limited availability Modern CSS: ruby-overhang

MDN The ruby-overhang CSS property specifies whether or not a <ruby> annotation overhangs any surrounding text.

Live preview Example from MDN

#default-example {
  font-size: 2em;
}

<section id="default-example">
  <p id="example-element">
    あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
    ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
  </p>
</section>

Syntax

auto | spaces

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: ruby annotation containers
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting ruby-overhang
Chrome	151
Edge	151
Firefox	No
Safari	18.2
Chrome Android	151
Safari iOS	18.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`ruby-position`

Property Baseline: newly availablesince December 2024 Modern CSS: ruby-position Modern CSS: display: ruby

MDN The ruby-position CSS property defines the position of a ruby element relative to its base element. It can be positioned over the element (over), under it (under), or to the right (inter-character).

Live preview Example from MDN

#example-element {
  font-size: 2em;
}

<section id="default-example">
  <ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>

Syntax

[ alternate || [ over | under ] ] | inter-character

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: alternate
Applies to: ruby annotation containers
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting ruby-position
Chrome	84
Edge	84
Firefox	38
Safari	18.2
Chrome Android	84
Safari iOS	18.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗