ruby-align property CSS Reference



Definition and Usage

This property specifies how text is distributed within the various ruby boxes when their contents do not exactly fill their respective boxes. Note that space distributed by 'ruby-align' is unrelated to, and independent of, any space distributed due to justification.

Name: ruby-align
Value: start | center | space-between | space-around
Initial: space-around
Applies to: ruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

Syntax

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

Values

'start'
The ruby content is aligned with the start edge of its box.

Diagram of glyph layout in left aligned ruby when ruby text is shorter than baseDiagram of glyph layout in left aligned ruby when ruby text is longer than base

'start' ruby distribution

'center'
The ruby content is centered within its box.

Diagram of glyph layout in center aligned ruby when ruby text is shorter than baseDiagram of glyph layout in center aligned ruby when ruby text is longer than base

'center' ruby distribution

'space-between'

The ruby content expands as defined for normal text justification (as defined by 'text-justify'), except that if there are no expansion opportunities the content is centered.

Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than baseDiagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base

'space-between' ruby distribution

'space-around'

As for 'space-between' except that there exists an extra expansion opportunity whose space is distributed half before and half after the ruby content.


Examples

.class {
ruby-align: right ;
} 

Relative articles