Text's lineHeight implementation does not match HTML

Text lines are current aligned to the top. When for instance the lineHeight is bigger than the fontSize the gap gets added to the bottom.

This is not how HTML or graphics editors work.

Rubén from the Slack channel thinks this is due to this code in Text.ts:

linePositionY = ((style.strokeThickness / 2) + (i * lineHeight)) + fontProperties.ascent;

Maybe not everyone is building a graphics editor like me in PIXI, but I don’t see why PIXI shouldn’t be as close as possible to how HTML works.

[bigtimebuddy]

Problem

To rephrase the problem a little more specifically:

PixiJS does not respect the line-height for the first line so it’s impossible to know where the baseline is positioned. With HTML-based text rendering, line-height is always added to the first line so you know exactly where the baseline is relative to the top of the element.

@nuthinking and I chatted, and he’s going to sponsor a bounty for someone who can fix this.

Example

Here’s a preview (HTML on top, PixiJS on bottom) from @nuthinking demo above:

https://jsfiddle.net/bigtimebuddy/t10wnyvf/ (moved to fiddle so we have a stable link)

[Bouh]

Here my result: https://jsfiddle.net/Bouh/0p1f5kc3/11/

I’ve added few comment for see where are my changes. See for //ADDED by Bouh at the end of script tag in HTML part. If you are interested i can open a PR for it in few hours when i go back to my home for a proper & clean view on changes.