27

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 ?
semuzaboi
  • 4,972
  • 5
  • 20
  • 35

3 Answers3

12

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.

James Martinez
  • 191
  • 2
  • 11
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • 8
    any real time examples ? as i said... applying this to normal text doesn't do much :( – semuzaboi Mar 21 '17 at 06:31
  • @luciferous What you expect to get using in for Latin letters text? It has it's own purpose, if you find some other ways to use it - it's up to you. – Justinas Mar 21 '17 at 06:42
  • 3
    This was useful to me when I had a text and a few chips besides that text, even though I used `word-wrap` and other methods it didn't give me a cool style as `ruby`, which allowed the text to not wrap and the chips wrap –  Jun 10 '20 at 17:30
3

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.

kulkul
  • 55
  • 1
  • 10
    Hello kulkul, welcome to SO. It's great to see you are contributing, however, an answer could/should be more elaborate. Please take a look at https://stackoverflow.com/help/how-to-answer to gain extra insight on how to answer in a way that keeps our beloved SO to high standards. – Andrew Adam Mar 02 '20 at 08:45
1

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>
Lily Remigia
  • 41
  • 1
  • 5