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

Answer 2

I think I've found a solution which allows for styling <ruby> elements while preserving their semantics. Here's a demonstration, and then a few key insights:

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>い

Set the <rt> element to be display: inline.

Chrome seems to have some special behavior when <rt> is display: block, which prevents styling it as a normal block-level element. That special behavior appears to be disabled when using display: inline.

Use a separate <ruby> element for each annotation.

While there are several valid ways to mark up ruby text, using a new <ruby> element for each annotation gives us a nice container element and makes styling much easier. This is semantically equivalent to using a single ruby element with multiple <rt> and <rb> elements.

Use flexbox to position ruby text.

Flexbox is by far the simplest and most powerful way to position ruby text. If your browser doesn't yet support flexbox, you can try using inline-table, but I didn't have much success in styling content using it. Users of older browsers might also want to see Paul Fioravanti's answer.

I used display: inline-flex to treat the ruby elements as if they were normal text while still having flex contents, and then flex-direction: column reverse to position the text vertically with the <rt> on top.

Set line-height: 1 in the <ruby> element.

A lot of the extra space between the text and its ruby markup can be attributed to the fact that the line height is not the same as the text height by default. Setting line-height: 1 will ensure they are the same.

If the spacing between elements is still not the desired spacing, setting margin-bottom on the <rt> element can adjust it. It can be set to a positive or negative value.