html - 调整 ruby​​ 文本的垂直定位

Question

我想使用 HTML <ruby>用发音标记日语文本。但是，我发现在大字体下，<rt> 的基线文本远高于它标记的字符的顶部。这是一个说明我的意思的例子:

ruby {
  font-size: 72pt;
}

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

作为引用，这是它在我当前的浏览器(Linux 上的 Firefox)中的显示方式，尽管我在其他浏览器中看到过类似的行为:

我想要的是将 ruby 文本的高度调整为更像这样的东西:

但是，我尝试的任何事情似乎都不会对 ruby​​ 文本的定位产生任何影响。这些都是我尝试过但没有用的东西:

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

有什么办法可以调整这段文字的位置吗？

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

设置<rt>元素 display: inline .

Chrome 在 <rt> 时似乎有一些特殊行为是display: block ，这会阻止将其样式设置为普通的 block 级元素。使用 display: inline 时，该特殊行为似乎被禁用.

使用单独的 <ruby>每个注释的元素。

虽然有几种有效的方法来标记 ruby​​ 文本，但使用新的 <ruby>每个注释的 element 为我们提供了一个很好的容器元素，并使样式化更加容易。这在语义上等同于使用具有多个 <rt> 的单个 ruby​​ 元素。和 <rb>元素。

使用 flexbox 定位 ruby​​ 文本。

Flexbox 是迄今为止定位 ruby​​ 文本的最简单和最强大的方式。如果你的浏览器还不支持 flexbox，你可以尝试使用 inline-table ，但我在使用它设置内容样式方面没有取得多大成功。旧版浏览器的用户可能还想查看 Paul Fioravanti's answer .

我用了display: inline-flex将 ruby​​ 元素视为普通文本，同时仍然具有 flex 内容，然后 flex-direction: column reverse使用 <rt> 垂直定位文本在上面。

设置line-height: 1在<ruby>元素。

文本与其 ruby​​ 标记之间的许多额外空间可归因于默认情况下行高与文本高度不同的事实。设置line-height: 1将确保它们相同。

如果元素之间的间距仍然不是所需的间距，设置margin-bottom在 <rt> 上元素可以调整它。它可以设置为正值或负值。