将下划线移至下降部分下方

Question

在元素上设置 时text-decoration:underline，线条显示在基线上。

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

我想使用 移动下划线下方的下划线text-underline-offset: 4px;。

有用。

在 Chrome 上，这正是我想要的。然而，它并不低于 Safari 上的下降部分。

如果我使用，text-underline-offset: 5px;它可以在 Safari 上运行。但在 Chrome 上，它靠近第二行的上升部分，而不是靠近同一行的下降部分。我可以使用更高的值来解决它line-height，但我不想要。

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

信息：

我使用的字体称为Basis Grotesque Pro 常规字体

链接

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

Answer 1

使用/sf/ask/712610391/#:~: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>