What is display:ruby - css

Question

While going through the css drafts spec for display properties came across this property
display:ruby
A little bit of search explained that is used for showing Japanese characters .
is this the only use case? (using it for normal text doesnt do anything special , futher more, chrome marks it as a invalid property)
how does it differ from our usual block container ?

Answer 1

From HTML5 docs
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations
So you basically use it for pronunciation of any language. But it does not restrict you to using it only for that.

Answer 2

I was having trouble with the a tag taking the whole block in an li, so, i used ruby and it didnt take the whole block space, nor did it ruin the format of the rest of the visual structure.

Answer 3

From MDN web docs:
The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML elements.
You can use it together with display: ruby-base; and display:ruby-text, which similarly act like <rb> and <rt>.
To see an example on how all of these could be used:
body {
font-size: 2em;
}
ruby {
ruby-position: above;
}
.ruby {
display: ruby;
}
p.ruby>span:nth-child(odd) {
display: ruby-base;
}
p.ruby>span:nth-child(even) {
display: ruby-text;
}
<p>
<ruby>
<rb>漢</rb>
<rb>字</rb>
<rb>が</rb>
<rb>難</rb>
<rb>しい</rb>
<rp>(</rp>
<rt>kan</rt>
<rt>ji</rt>
<rt>ga</rt>
<rt>muzuka</rt>
<rt>shii</rt>
<rp>)</rp>
</ruby> ！
</p>
<p class="ruby">
<span>漢</span>
<span>kan</span>
<span>字</span>
<span>ji</span>
<span>難</span>
<span>muzuka</span>
<span>しい</span>
<span>shii</span>
<span>!</span>
</p>