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

Question

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

ruby {
  font-size: 72pt;
}

<ruby>?<rt>??</rt>?</ruby>

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

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

但是,我尝试的任何东西似乎都对红宝石文本的定位没有任何影响.这些都是我尝试过的不起作用的东西:

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

铬似乎时有一些特殊的行为<rt>是display: block,这防止造型它作为一个正常的块级元素.使用时,该特殊行为似乎被禁用display: inline.

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

虽然有几种有效的方法可以标记ruby文本,但<ruby>为每个注释使用一个新元素可以为我们提供一个漂亮的容器元素,并使样式更容易.这是语义上等同于使用具有多个单个红宝石元件<rt>和<rb>元件.

使用flexbox定位ruby文本.

Flexbox是迄今为止定位ruby文本的最简单,最强大的方法.如果您的浏览器还不支持flexbox,您可以尝试使用inline-table,但我在使用它的样式内容方面没有太大成功.旧浏览器的用户可能也想看看Paul Fioravanti的答案.

我曾经display: inline-flex将红宝石元素当作普通文本处理,同时仍然具有弹性内容,然后flex-direction: column reverse将文本垂直<rt>放置在顶部.

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

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

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

Answer 2

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

\n\n

根据我在那里找到的样式，我想出了这个 CSS jiggery-pokery，它似乎至少达到了对注音文本的大小和位置进行某种控制所需的范围。

\n\n

\r\n

\r\n

ruby {\r\n  font-size: 72pt;\r\n  display: inline-block;\r\n  line-height: 1em;\r\n  position: relative;\r\n}\r\n\r\nspan.rb {\r\n  display: inline-block;\r\n  padding-top: 0.6em;\r\n}\r\n\r\nspan.rt {\r\n  font-size: 0.55em;\r\n  position: absolute;\r\n  display: block;\r\n  line-height: 1.3em;\r\n  top: 0;\r\n}

\r\n

<ruby>\r\n  <span class="rb">\xe9\x81\x85</span>\xe3\x81\x84\r\n  <span class="rt">\xe3\x81\x8a\xe3\x81\x9d</span>\r\n</ruby>

\r\n

\r\n

\r\n

\n