调整红宝石文本的垂直位置 [英] Adjust the vertical positioning of ruby text

问题描述

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

I'd like to use HTML <ruby> to mark up Japanese text with its pronunciation. However, I've found that at large font sizes, the baseline of the <rt> text is well above the top of the characters it's marking up. Here's an example which shows what I mean:

ruby {
  font-size: 72pt;
}

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

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

For reference, this is how it appears in my current browser (Firefox on Linux), though I've seen similar behavior in other browsers:

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

What I would like is to adjust the height of the ruby text to be something more like this:

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

However, nothing I try seems to have any effect on the positioning of the ruby text. These are all things that I have tried which did not work:

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

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

有什么办法可以调整此文本的位置?

Is there any way that I can adjust the positioning of this text?

推荐答案

我想我已经找到了一种解决方案，该解决方案可以对<ruby>元素进行样式设置，同时保留其语义.这是一个演示，然后是一些关键见解:

I think I've found a solution which allows for styling <ruby> elements while preserving their semantics. Here's a demonstration, and then a few key insights:

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: block时，Chrome似乎具有某些特殊行为，这会阻止将其样式设置为普通的块级元素.使用display: inline时，该特殊行为似乎被禁用.

Chrome seems to have some special behavior when <rt> is display: block, which prevents styling it as a normal block-level element. That special behavior appears to be disabled when using display: inline.

虽然有几种有效的方法来标记红宝石文本，但是对每个注释使用新的<ruby>元素可以使我们很好地使用容器元素，并使样式设计变得更加容易.从语义上讲，这等效于将单个红宝石元素与多个<rt>和<rb>元素一起使用.

While there are several valid ways to mark up ruby text, using a new <ruby> element for each annotation gives us a nice container element and makes styling much easier. This is semantically equivalent to using a single ruby element with multiple <rt> and <rb> elements.

Flexbox是迄今为止放置红宝石文本的最简单，最强大的方法.如果您的浏览器尚不支持flexbox，则可以尝试使用inline-table，但是在使用它设置内容样式方面我没有取得太大的成功.使用旧版浏览器的用户可能还希望查看 Paul Fioravanti的答案.

Flexbox is by far the simplest and most powerful way to position ruby text. If your browser doesn't yet support flexbox, you can try using inline-table, but I didn't have much success in styling content using it. Users of older browsers might also want to see Paul Fioravanti's answer.

我使用display: inline-flex将红宝石元素视为普通文本，同时仍具有可弯曲的内容，然后使用flex-direction: column reverse将文本垂直放置，并在顶部放置<rt>.

I used display: inline-flex to treat the ruby elements as if they were normal text while still having flex contents, and then flex-direction: column reverse to position the text vertically with the <rt> on top.

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

A lot of the extra space between the text and its ruby markup can be attributed to the fact that the line height is not the same as the text height by default. Setting line-height: 1 will ensure they are the same.

如果元素之间的间距仍然不是所需的间距，则在<rt>元素上设置margin-bottom可以对其进行调整.可以将其设置为正值或负值.

If the spacing between elements is still not the desired spacing, setting margin-bottom on the <rt> element can adjust it. It can be set to a positive or negative value.

这篇关于调整红宝石文本的垂直位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！