What is the CSS ruby-align property?

Question

I saw an article mentioning the ruby-align property and I never heard of it. I checked w3schools to get some examples on this, but I couldn't see it mentioned at all.

http://www.w3schools.com/cssref/default.asp

I knew that Ruby was a new tag to HTML5 so I wanted to see if there was anything in the HTML Reference there.

I found out that ruby is used as an east-asian typography. I didn't find anything about its css properties there either.

I also see that Stack Overflow does not even have a tag for this property.

Does anyone actually know what this property does?

Is there any use at all to this property or the ruby tag?

Is there a reference anywhere that talks about this property? It's not on w3schools.

Answer 1

I recommend reading the Mozilla Hacks article. I include relevant parts here:

Introduction

What is ruby? In short, ruby is an extra text, which is usually small, attached to the main text for indicating the pronunciation or meaning of the corresponding characters. This kind of annotation is widely used in Japanese publications. It is also common in Chinese for books for children, educational publications, and dictionaries.

Basic Usage

Basically, the ruby support consists of four main tags: <ruby>, <rb>, <rt>, and <rp>. <ruby> is the tag that wraps the whole ruby structure, <rb> is used to mark the text in the normal line, <rt> is for the annotation, and <rp> is a tag which is hidden by default. With the four tags, the result above can be achieved from the following code:

<ruby>
  <rb>とある<rb>科学<rb>の<rb>超電磁砲</rb>
  <rp>（</rp><rt>とある<rt>かがく<rt>の<rt>レールガン</rt><rp>）</rp>
</ruby>

Advanced Support

Aside from the basic usage of ruby, Firefox now provides support for more advanced cases.

By default, if the width of an annotation does not match its base text, the shorter text will be justified as shown in the example above. However, this behavior can be controlled via the ruby-align property. Aside from the default value (space-around), it can also make the content align to both sides (space-between), centered (center), or aligned to the start side (start).

Answer 2

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

More info here. Sounds like it is experimental and only supported in Firefox.