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

为了尝试回答这个问题，我去 https://japanese.stackexchange.com/ 看看这方面的实际专家会怎么做。在那里，他们似乎已经放弃了 <rb> 和 <rt> 标签，而是将它们更改为 <span>s 并适当地设计了它们。

根据我在那里找到的样式，我想出了这个 CSS jiggery-pokery，它似乎至少在控制 furigana 的大小和位置所需的范围内文字.

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

我想我找到了一种解决方案，它允许在保留其语义的同时对 <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`。

当 <rt> 为 display: block 时，

Chrome 似乎有一些特殊行为，这会阻止将其设置为普通块级元素。使用 display: inline.

时，该特殊行为似乎被禁用

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

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

使用 flexbox 定位 ruby 文本。

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

我使用 display: inline-flex 将 ruby 元素视为普通文本，同时仍然具有 flex 内容，然后 flex-direction: column reverse 使用 [=13] 垂直放置文本=] 在上面。

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

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

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

Answer 3

对我来说，只需使用 <rt> 的 margin-bottom 即可在 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>

此解决方案确保如果 <rt> 比 <rb> 宽，<rb> 中的字符将被分隔（注意“数”和“之间的 space多”）。

火狐：

但是它在 Chrome 上效果不佳（不过我使用的是 Chromium）：

调整 ruby 文本的垂直定位

Adjust the vertical positioning of ruby text

html

css

cjk

ruby-tag

将 `<rt>` 元素设置为 `display: inline`。

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

使用 flexbox 定位 ruby 文本。

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

调整 ruby 文本的垂直定位

Adjust the vertical positioning of ruby text

html

css

cjk

ruby-tag

将 <rt> 元素设置为 display: inline。

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

使用 flexbox 定位 ruby 文本。

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

将 `<rt>` 元素设置为 `display: inline`。

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

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