Adjust the vertical position of the ruby ​​text

Question

I would like to use HTML <ruby>to mark Japanese text with my pronunciation. However, I found that with large font sizes, the basic level of text <rt>far exceeds the top of the characters it marks. Here is an example that shows what I mean:

ruby {
  font-size: 72pt;
}

<ruby>遅<rt>おそ</rt>い</ruby>

Run codeHide result

For reference, this is how it appears in my current browser (Firefox on Linux), although I have seen similar behavior in other browsers:

I would like to adjust the height of the ruby ​​text to be something more similar:

However, nothing I try seems to affect the positioning of the ruby ​​text. This is all I tried that didn't work:

• vertical-align: -10px
• postion: relative and top: 10px
• transform: translateY(-10px)

Can I reposition this text?

Answer 1

, , <ruby> . , :

body {
  font-size: 72pt;
}

ruby {
  display: inline-flex;
  flex-direction: column-reverse;
}

rb, rt {
  display: inline;
  line-height: 1;
}

<ruby><rb>遅</rb><rt>おそ</rt></ruby>い

Hide result

<rt> display: inline.

Chrome, , , <rt> display: block, . display: inline.

<ruby> .

, <ruby> . <rt> <rb>.

flexbox .

Flexbox . flexbox, inline-table, , . .

display: inline-flex ruby, , , flex-direction: column reverse, <rt> .

line-height: 1 <ruby>.

, . line-height: 1 , .

, margin-bottom <rt> . .

Answer 2

, https://japanese.stackexchange.com/, , . , , <rb> <rt> <span> .

, , CSS jiggery-pokery, , -, , .

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;
}

<ruby>
  <span class="rb">遅</span>い
  <span class="rt">おそ</span>
</ruby>

Hide result