ruby-align

Overview

The ruby-align property controls the alignment and distribution of ruby annotations over the base text. Currently, this property is experimental and has highly limited browser support.

Examples and Usage

The only notable support for the ruby-align property comes from specific versions of Firefox. For more detailed information on this, refer to the Browser Compatibility and Useful Resources sections below.

Now, let's examine several illustrative examples of how ruby-align can be specified.

When set to start, the ruby elements align at the start of the base text:

/* Ruby annotations align at the start of the base text */
ruby {
  ruby-align: start;
}

When set to center, the ruby elements align at the center of the base text:

ruby {
/* Ruby annotations align at the center of the base text */
  ruby-align: center;
}

The space-between value distributes extra space between the ruby elements:

ruby {
/* Extra space is distributed between the ruby elements */
  ruby-align: space-between;
}

Finally, when ruby-align is set to space-around, the extra space is distributed both between and around the ruby elements:

/* Extra space is distributed between and around the ruby elements */
ruby {
  ruby-align: space-around;
}

Values

Note: For further details on the specifics of text justification and language nuances, refer to the official CSS Ruby Annotation Layout Module Level 1 specification.

Associated Properties

• ruby-position

Tips and Tricks

• Due to the experimental nature of the ruby-align property, it's generally not advised to use it in a production environment.

• Always consider the directionality of the language when using ruby text. Different languages have different rules about text directionality, which will affect the positioning and alignment of ruby text.

• Ruby text is primarily used in East Asian languages for providing annotations or guides for pronunciation.

• Keep in mind that "ruby text" or "ruby elements" often refer to the same thing: the annotations in ruby markup. The terms are often used interchangeably in various resources and specifications.

• When you come across the term "ruby box" in specifications or other resources, it typically refers to the container that holds both the base text and its corresponding ruby text together.

• While the <ruby> tag is used to create the overall ruby box, the <rt> tag is typically used to designate the ruby text.

Browser Compatibility

At the time of writing, Firefox, from version 38 onwards, is the only browser that supports the experimental ruby-align.

Useful Resources

Can I use: ruby-align

W3C's Editor's Draft of CSS Ruby Annotation Layout Module Level 1: ruby-align

CSS Ruby Annotation Layout Module Level 1 - What is ruby?