0
228
VistasMover el subrayado debajo de los descendientes
Al configurar text-decoration:underline en un elemento, la línea se muestra en la línea de base.
Está sobre el descendiente de letras. Dificulta la lectura si la línea contiene muchas letras con descendientes.
Quiero mover el subrayado debajo de los descendientes usando text-underline-offset: 4px; .
Funciona.
En Chrome, es exactamente como quiero. Sin embargo, no está por debajo de los descensores en Safari.
Si uso, text-underline-offset: 5px; , Funciona en Safari. Pero en Chrome, está cerca de los ascendentes de la segunda línea en lugar de estar cerca de los descendentes de la misma línea. Puedo resolverlo usando un valor más alto line-height , pero eso no lo quiero.
¿Hay alguna forma de calcular la altura de los descendientes para compensar el subrayado exactamente por debajo de la línea de base?
Información:
La fuente que estoy usando se llama Basis Grotesque Pro regular
Enlaces
1 Respuestas
Responde la pregunta0
puede calcular la altura de un descensor colocando dos tramos uno al lado del otro.
El primero tiene un tamaño de fuente de 0px. Si encuentra su posición superior, esa será la posición de la línea de base para el par de tramos.
El segundo intervalo tiene el tamaño de fuente que le interese.
Luego, puede obtener la altura del ascendedor tomando la parte superior del segundo tramo desde la parte superior del primer tramo. La altura del descensor será la altura del segundo vano menos esta cantidad.
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>