Font Position - baseline problem

[neopheus]

Version

5.2.1

Test Case

• Browser Issue Template

Information about environment

Nodejs or browser? Browser
Which browsers? Chrome 104.0.5112.79 (Build officiel) (arm64)

Steps To Reproduce

Expected Behavior

Without Problem :
https://jsfiddle.net/avdigital/uw74h10y/46/

Actual Behavior

With Problem :
https://jsfiddle.net/avdigital/uw74h10y/45/

some fonts have problems with baseline and positioning when you want to center them

[ShaMan123]

dupliacte #8159

see my comment there

https://jsfiddle.net/9mLvnp8c/

still something with baseline exists

[ShaMan123]

provide a reproduction without fabric, canvas only - let's see if it's the font

[neopheus]

provide a reproduction without fabric, canvas only - let's see if it's the font

New code without fabric, canvas only: https://jsfiddle.net/avdigital/rzyh2exc/1/

No problem

the problem is in fabricjs

[neopheus]

have you a solution ?

thx

[neopheus]

I think the problem is in the _renderTextCommon function in text.class.ts

    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {String} method Method name ("fillText" or "strokeText")
     */
    _renderTextCommon: function(ctx, method) {
      ctx.save();
      var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset();
      for (var i = 0, len = this._textLines.length; i < len; i++) {
        var heightOfLine = this.getHeightOfLine(i),
            maxHeight = heightOfLine / this.lineHeight,
            leftOffset = this._getLineLeftOffset(i);
        console.log(top, lineHeights, maxHeight, this.lineHeight, leftOffset)
        this._renderTextLine(
          method,
          ctx,
          this._textLines[i],
          left + leftOffset,
          top + lineHeights + maxHeight,
          i
        );
        lineHeights += heightOfLine;
      }
      ctx.restore();
    },

if i replace

top + lineHeights + maxHeight,

by

top + lineHeights + heightOfLine,

I have no problem with this font
but it causes me problems with the others

[neopheus]

if the problem comes from the font, what is the action to be taken on the TTF/WOFF.... to remedy the problem?

[neopheus]

dupliacte #8159

see my comment there

https://jsfiddle.net/9mLvnp8c/

still something with baseline exists

It's not the same problem

for #8159 the problem is related to the loading of the font. in my case it is related to a problem of positioning calculation for this font even if it is loaded correctly

If I wait the font is loading :
https://jsfiddle.net/avdigital/uw74h10y/61/
Same problem

[ShaMan123]

Text is a part in fabric I do not fully comprehend.
@asturur @melchiar might be more helpful and insightful.
I do remember a discussion pointing out lineHeight as an arbitrary const. You can see that in the source files.

[ShaMan123]

fabric.js/src/shapes/text.class.ts

Line 140 in be4c6cf

lineHeight: 1.16,

https://github.com/fabricjs/fabric.js/blame/be4c6cf4227f75826046f1f10b2778728421a663/src/shapes/text.class.ts#L140

The blame points to #1872

[neopheus]

fabric.js/src/shapes/text.class.ts

Line 140 in be4c6cf

lineHeight: 1.16,

https://github.com/fabricjs/fabric.js/blame/be4c6cf4227f75826046f1f10b2778728421a663/src/shapes/text.class.ts#L140

The blame points to #1872

I tried but I don't see a global solution

Have you a solution ? thx

[ShaMan123]

absolutely not
sorry

[neopheus]

absolutely not

sorry

Thx 😁