Question

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

＆＃13;

ruby {
  font-size: 72pt;
}

＆＃13;

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

＆＃13;

作为参考，这是它在我当前的浏览器（Linux上的Firefox）中的显示方式，尽管我在其他浏览器中看到了类似的行为：

我想要的是将红宝石文本的高度调整为更像这样的东西：

然而，我尝试的任何东西似乎都对红宝石文本的定位没有任何影响。这些都是我尝试过的不起作用的东西：

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

有什么方法可以调整这个文本的位置吗？

Answer 1

我认为我找到了一个解决方案，它允许在保留语义的同时设置<ruby>元素的样式。这是一个演示，然后是一些关键的见解：

＆＃13;

body {
  font-size: 72pt;
}

ruby {
  display: inline-flex;
  flex-direction: column-reverse;
}

rb, rt {
  display: inline;
  line-height: 1;
}

＆＃13;

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

＆＃13;

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

当<rt>为display: block时，Chrome似乎有一些特殊行为，这会阻止将其设置为普通的块级元素。使用display: inline时，该特殊行为似乎已停用。

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

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

使用flexbox定位ruby文本。

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

我使用display: inline-flex将ruby元素视为普通文本，同时仍具有弹性内容，然后flex-direction: column reverse将文本垂直放置，顶部放置<rt>。< / p>

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

文本与其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>

Answer 3

对我来说，只需在 Firefox 上使用 <rt> 的 margin-bottom：

<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> 中的字符将被分隔（注意下面“数”和“多”之间的空格）。< /p>

火狐：

但是它在 Chrome 上运行得不是很好（不过我使用的是 Chromium）：

调整红宝石文本的垂直位置

3 个答案:

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

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

使用flexbox定位ruby文本。

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

调整红宝石文本的垂直位置

3 个答案:

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

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

使用flexbox定位ruby文本。

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

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

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

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