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 */
When set to
center, the ruby elements align at the center of the base text:
/* Ruby annotations align at the center of the base text */
space-between value distributes extra space between the ruby elements:
/* Extra space is distributed between the ruby elements */
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 */
|Aligns the ruby annotations at the start of the base text.
|Aligns the ruby annotations at the middle of the base text.
|Distributes extra space between the elements of the ruby.
|Distributes extra space both between the elements of the ruby and around them.
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.
Tips and Tricks
Due to the experimental nature of the
ruby-alignproperty, 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.
<ruby>tag is used to create the overall ruby box, the
<rt>tag is typically used to designate the ruby text.
At the time of writing, Firefox, from version 38 onwards, is the only browser that supports the experimental