0
225
ViewsMove the underline below the descenders
When setting the text-decoration:underline on an element, the line is shown on the baseline.
It is over the descender of letters. It makes reading difficult if the line contains many letters with descenders.
I want to move the underline below the descenders using text-underline-offset: 4px;.
It works.
On Chrome, it is exactly how I want. However, it is not below the descenders on Safari.
If I use, text-underline-offset: 5px;, It works on Safari. But on Chrome, It is close to the ascenders of the second line rather than being close to the descenders of the same line. I can solve it using a higher value line-height, but that I don't want.
Is there any way to caclualte the height of the descenders so that I offset the underline exaclty that much below the baseline?
Info:
The font I am using is called Basis Grotesque Pro regular
Links
1 answers
Answer question0
you can calculate the height of a descender by putting two spans next to each other.
The first has a font size of 0px. If you find its top position that will be the position of the baseline for the pair of spans.
The second span has whatever font size you are interested in.
Then you can get the height of the ascender by taking the top of the second span from the top of the first span. The height of the descender will be the height of the second span minus this amount.
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>