How can I get a line height from font size within browser?
-
23-12-2019 - |
Question
Range.getClientRects()
method returns a list of ClientRect
occupied by range
and this works well when the range is within normal span which has text.
<div class="line">
<span class="run">Hello!</span><span class="run"></span>
</div>
But it fails to get ClientRect
when span is empty. (like in the second span)
I've tried the followings, however, the results were not satisfactory.
- Set span's display property to
inline-block
- Insert
'\ufeff'
into span. In this case, I can getClientRect
but this will mess up the other parts of codes.
If I can compute line height from the font-size
, it would be best. Is there any way to get the line height of empty span in px?
NOTE: I'm not trying to get line-height
css property. In this case, the line-height
would be normal
.
Solution
Just put any character into this
<span>
. In this case, I put aU+FEFF
character.var elem = $('span')[0]; elem.textContent = '\ufeff';
Get a rectangle.
var rect = elem.getClientRect(); ...
Restore the
<span>
to be empty.elem.textContent = '';
OTHER TIPS
You could traverse the DOM tree above the span to find the nearest element with a numerical line-height definition. In my test case this seems to work on percentage line-heights too -- it gets the computed line-height not the percentage. I'm not sure about the cross-browser support on that though.
Demo: http://jsfiddle.net/colllin/DHLWW/
Code:
var lineHeight = -1;
var $span = $('span');
var tree = $span.get().concat( $span.parents().get() );
$(tree).each(function(index, element) {
if (lineHeight < 0) {
lineHeight = parseFloat($(element).css('line-height')) || -1;
}
});
$(document.body).append('<br>line-height of span: '+lineHeight);