What is the CSS "display: ruby" for?

Question

The question is basically this:

• What’s the point of display: ruby in CSS?
• This attribute is new?
• When to use it?

Answer 1

display:ruby is the standard ta tag display <ruby>. Just like the standard display of <div> is block and of <span> is inline.

Chrome seems not to use display:ruby for the tag <ruby>, but in Firefox you can already check that it works. Despite this, the tag is not so new, and has been in the W3C Working Draft since 2014 as you can see on the official link https://www.w3.org/TR/css-ruby-1/

Ruby annotation is a form of Interlinear annotation, consisting of small strings of text next to the base text. They are usually used in East Asian documents to indicate pronunciation or provide a short annotation.

Ie the tag ruby is used as text markup to indicate the pronunciation of some text in another language, usually Asian. Also, the tag should not be used alone, it should be used in conjunction with the tags <rp> and <rt> to assist in the construction of the marking. An element <rp> should include each of the opening and closing parentheses surrounding the element <rt>containing the annotation text. The <rp> is optional and helps to format text when the browser does not support ruby.

Along with the ruby tag you can also use other CSS properties like ruby-align and ruby-position to control how you want to visually display the text annotation. Here are more technical details https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Ruby

Take the example

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Another example, more complex and with two notes.

<ruby>
  <ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
  <rt lang=en>Southeast</rt>
</ruby>

Source: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element

Currently according to Caniuse this is the support of browsers https://caniuse.com/#feat=ruby