Adjust the vertical positioning of ruby text

Question

I\'d like to use HTML to mark up Japanese text with its pronunciation. However, I\'ve found that at large font sizes, the baseline of the <

Answer 1

In order to attempt to provide an answer to this question, I went to https://japanese.stackexchange.com/ to see how actual experts in this would do it. There, they seem to have dispensed with the and tags and instead changed them to s and styled them appropriately.

Based on the styles I found there, I came up with this CSS jiggery-pokery that seems to get at least in the ballpark of what is needed to take some control of the sizing and positioning of furigana text.

ruby {
  font-size: 72pt;
  display: inline-block;
  line-height: 1em;
  position: relative;
}

span.rb {
  display: inline-block;
  padding-top: 0.6em;
}

span.rt {
  font-size: 0.55em;
  position: absolute;
  display: block;
  line-height: 1.3em;
  top: 0;
}

  遅い
  おそ