Clever Geek Handbook

What is the ruby-align CSS property?

I saw an article that mentions a property ruby-align

and I have never heard of it. I checked w3schools to get some examples on this, but I haven't seen it mentioned at all.

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

I knew I Ruby

was a new tag for HTML5, so I wanted to see if there was anything in the HTML Reference.

I learned that ruby ​​is used as an East Asian typography. I didn't find anything about its css properties either.

I also see that Stack Overflow doesn't even have a tag for this property.

Does anyone really know what this property does?

Is it possible to use this property or ruby ​​tag at all?

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

+3


source to share


2 answers


I recommend reading the article on Mozilla Hacks . Here I include the relevant sections:



Introduction

What is ruby? In short, ruby ​​is additional text, which is usually small, attached to the main text to indicate 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 children's books, educational publications, and dictionaries.

enter image description here

Primary use

Basically, Ruby support consists of four main tags: <ruby>

, <rb>

, <rt>

and <rp>

. <ruby>

is a tag that wraps the whole ruby ​​structure, is <rb>

used to denote text on a regular line, <rt>

for annotation, and <rp>

is a tag that is hidden by default. With the four tags, the above result can be achieved from the following code:

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

Extended support

Apart from basic ruby ​​usage, Firefox now provides support for more complex cases.

By default, if the width of the annotation does not match its base text, shorter text will be justified, as shown in the example above. However, this behavior can be controlled using the ruby-align

property. Besides the default ( space-around

), it can also make the content consistent with both sides ( space-between

), centered ( center

), or start-side-aligned ( start

).

+4


source


The Ruby-align CSS property determines the distribution of various ruby ​​elements over the base.



More details here . It looks like this is experimental and only supported in Firefox.

+1


source






More articles:


All Articles