调整Ruby文本的垂直定位

Question

调整Ruby文本的垂直定位

11

我想使用HTML的<ruby>标记来标注日语文本的发音。然而，我发现在大字号下，<rt>文本的基线远高于它所标记的字符的顶部。以下是一个示例，展示了我的意思：

ruby {
  font-size: 72pt;
}

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

参考一下，这是在我目前的浏览器上（Linux上的Firefox）的显示方式，虽然我在其他浏览器中也看到了类似的行为：

我想要的是将注音文本的高度调整为更像这样：

但是，我尝试的所有方法都没有对注音文本的定位产生任何影响。这些都是我尝试过但没有效果的方法：

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

有没有办法可以调整此文本的定位？

- Rose Kunkel

你的目标浏览器是哪些？看起来在Chrome和Firefox中，文本显示方式有很大不同（即使你将文本更改为“font-family：sans-serif”以匹配示例输出），而且似乎只有Firefox对于与<ruby>相关的属性进行样式设置具有真正的支持。顺便说一下，当我研究所有这些内容时，我发现这篇博客文章非常有用。 - Paul Fioravanti

@Paul Fioravanti 我最感兴趣的是如何在基于WebKit的浏览器中实现这一点。但如果您有Firefox解决方案，也可以发表！即使支持针对Ruby的特定CSS规则，我也没有看到这样做的方法。 - Rose Kunkel

很不幸，我无法提供解决方案 :( 在Chrome上，我尝试调整各种CSS属性，但似乎无法将振仮名靠近汉字。然而当我在Firefox中打开您的代码时，两者之间的距离看起来几乎与您的屏幕截图相同，这就是为什么我会问的原因。 - Paul Fioravanti

4个回答

5

为了尝试回答这个问题，我去了https://japanese.stackexchange.com/看看实际的专家是如何做的。在那里，他们似乎放弃了<rb>和<rt>标签，而是改用<span>并适当地进行了样式设置。

基于我在那里发现的样式，我想出了这个 CSS 技巧，它似乎至少可以控制一些振り仮名文本的大小和位置。

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>

- Paul Fioravanti

很棒的答案！我找到了一种方法，可以同时使用<rb>和<rt>元素来完成它，但是你的解决方案可能更适合旧版浏览器。 - Rose Kunkel

很棒的答案。这是我最终使用PrinceXML HTML转PDF工具时得到的CSS规则，使得红宝石元素对齐。 - Kanuj Bhatnagar

0

一些字体存在这个问题，而其他字体则没有。我们可以尝试欺骗浏览器，让它认为上升和下降不同，方法是先加载一个用unicode-range清空的字体，然后回退到我们实际想要的字体。需要进行一些试错才能确定哪些字体具有最佳或最兼容的度量标准，如果它们太短，像 g 这样的字母可能会发生冲突。

@font-face {
    font-family: "Empty";
    font-weight: 400;
    font-style: normal;
    unicode-range: U+000A;
    src: local("Webdings"), local("Times New Roman"), local("Arial");
}

ruby {
    font-size: 72pt;
    font-family: "Empty", "My Font Here", sans-serif;
}

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

- gnucchi

0

对我来说，在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>中的字符将被分开（请注意下面“数”和“多”之间的空格）。

Firefox：

然而，在Chrome上效果不太好（我正在使用Chromium）：

- Eric Stdlib

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rose Kunkel · Accepted Answer

我认为我已经找到了一种解决方案，可以在保留语义的同时对<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>元素可以给我们一个好的容器元素，并且使样式设置更加容易。这在语义上等同于使用单个ruby元素和多个<rt>和<rb>元素。

使用flexbox来定位ruby文本。

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

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

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

文本和其ruby标记之间的额外空间很大程度上归因于默认情况下行高与文本高度不同。设置line-height: 1将确保它们相同。

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

调整Ruby文本的垂直定位

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

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

使用flexbox来定位ruby文本。

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

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

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

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