Miscalculation when using custom fonts

[danielbitzer]

Thanks for developing this amazing script!

I just wanted to flag this issue in case anyone else has experienced it.

I only notice the issue when loading a custom font (from MyFonts) where the text is be balanced across too many lines, so text that could easily fit on 2 lines would render over 3 lines.

I think the issue can be traced back to the nowrapHeight calculation. I've fixed the issue for myself by changing line 313 from $this.css('line-height', 'normal'); to $this.css('line-height', '1');

[redmunds]

@danielbitzer Sorry for the delayed repsonse. Thanks for the info. I will keep this in mind for future changes.

[carasmo]

Thank you for the fix to '1' I found the word 'normal' in the current vanilla js version and it works great now!

[carasmo]

Oh well. Works great on headlines, but on small chunks of text that I use it on, it's very odd. Too bad this can't be tweaked per class with some arguments.

[daveyjones]

@redmunds Here's a fiddle that demonstrates this behavior:

https://jsfiddle.net/jsL7qh96/

Note that I was able to fix this by removing this line from the source:

// remove line height before measuring container size
el.style.lineHeight = 'normal';

Out of curiosity, why remove the line height in the first place?

[redmunds]

@daveyjones Normalizing the line-height fixes the case where line-height is much larger than font-size. See LINE HEIGHT TEST case in test/test1.htm .

[mattcoz]

I can confirm that changing it to 1 instead of normal fixes it for me too, thanks.