将下划线移至下行线下方

Question

在元素上设置

text-decoration:underline

时，线条显示在基线上。

它位于字母的下行部分之上。如果该行包含许多带有下行字母的字母，则会导致阅读困难。

我想使用

text-underline-offset: 4px;

将下划线移动到下降部分下方。

它有效。

在 Chrome 上，这正是我想要的。但是，它不在 Safari 上的下降部分下方。

如果我使用，

text-underline-offset: 5px;

，它可以在 Safari 上运行。但在 Chrome 上，它靠近第二行的上升部分，而不是靠近同一行的下降部分。我可以使用更高的值来解决它

line-height

，但我不想要。

有没有什么方法可以计算下降部分的高度，以便我将下划线精确度偏移到基线以下？

信息：

我使用的字体称为Basis Grotesque Pro Regular

链接

• 上升器
• 下降
• 文本下划线偏移

Answer 1

使用 https://stackoverflow.com/questions/10180148/how-to-calculate-descender-height-in-javascript#:~:text=This%20is%20possible%3A%20use%20this%20library 的想法%3A%20baseline%20ratio%2C,%200%20px%20font%20lies%20on%20the%20baseline.

您可以通过将两个跨度彼此相邻来计算下降器的高度。

第一个字体大小为 0px。如果您找到它的顶部位置，这将是这对跨度的基线位置。

第二个跨度具有您感兴趣的任何字体大小。

然后您可以通过从第一个跨度的顶部获取第二个跨度的顶部来获得上升器的高度。下降器的高度将是第二个跨度的高度减去此值。

const span1Params = document.querySelector('.span1').getBoundingClientRect();
const span2Params = document.querySelector('.span2').getBoundingClientRect();
document.querySelector('.text').style.textUnderlineOffset = (span2Params.height - (span1Params.top - span2Params.top)) + 'px';

.test {
  position: absolute;
  top: -1000px;
}

.span1 {
  font-size: 0px;
}

.span2 {
  font-size: 36px;
}

.text {
  text-decoration: underline;
  font-size: 36px;
}

<div class="test">
  <span class="span1">j</span>
  <span class="span2">j</span>
</div>
<div class="text">Atmospheric impacts of hydrogen as an energy carrier</div>

Answer 2

尝试这样做：

.test {
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}

我认为应该有效。