'Adjust the vertical positioning of ruby text

I'd like to use HTML <ruby> to mark up Japanese text with its pronunciation. However, I've found that at large font sizes, the baseline of the <rt> text is well above the top of the characters it's marking up. Here's an example which shows what I mean:

ruby {
  font-size: 72pt;
}
<ruby>遅<rt>おそ</rt>い</ruby>

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

incorrectly-formatted ruby text

What I would like is to adjust the height of the ruby text to be something more like this:

correctly-formatted ruby text

However, nothing I try seems to have any effect on the positioning of the ruby text. These are all things that I have tried which did not work:

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

Is there any way that I can adjust the positioning of this text?

htmlcsscjkruby-tag


Solution 1:[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 <rb> and <rt> tags and instead changed them to <span>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;
}
<ruby>
  <span class="rb">?</span>?
  <span class="rt">??</span>
</ruby>

Solution 2:[2]

For me, simply using <rt>'s margin-bottom works on Firefox:

<html>
<head>
  <style>
    div {
        float: left;
        border: solid;
        margin: 1em;
    }
    ruby {
        font-size: 5em;
        background-color: rgba(255, 0, 0, 0.3);
    }
    rt {
        font-size: 1em;
        background-color: rgba(0, 255, 0, 0.3);
    }
  </style>
</head>
<body>
<div>
  <ruby>
    <rb>???</rb>
    <rt style="margin-bottom: 0em;">kazuooku</rt>
  </ruby>
</div>
<div>
  <ruby>
    <rb>???</rb>
    <rt style="margin-bottom: -0.4em;">kazuooku</rt>
  </ruby>
</div>
<div>
  <ruby>
    <rb>???</rb>
    <rt style="margin-bottom: -0.4em; margin-top: -0.2em">kazuooku</rt>
  </ruby>
</div>
</body>
</html>

This solution makes sure that if <rt> is wider than <rb>, the characters in <rb> will be separated (notice the space between "?" and "?" below).

Firefox: Firefox

However it doew not work so well on Chrome (I am using Chromium, though): Chromium

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Eric Stdlib

Related Questions