Font size introduces offset or padding. Cannot center text vertically

[isbirkan]

Hello!

I've been intensively searching and I couldn't find an issue like this or at least related. I've been thinking that it applies to the custom font that I am using, but it looks like it applies to all of my fonts. When increasing the font, it gradually adds a top offset or padding. I even added a rectangle around so that I can see if it is font related or canvas related and I don't really know what the issue is. It pushed the rectangle downwards together with it.

The canvas dimensions are calculated with the fabric util, since I need a metric size proportion. I also calculated the font size with the util method but reverted to the hardcoded value for test purposes. And the code for adding the text is:

    const textBorder = new fabric.Rect({
      width: this.width,
      height: this.height,
      fill: false,
      stroke: '#000'
    });
    const newText = new fabric.Textbox(text, {
      id: 'text',
      fontFamily: this.fontFamily,
      fontSize: 100,
      lineHeight: 1,
      caching: false,
      strokeLineCap: 'round',
      strokeLineJoin: 'round',
      originX: 'center',
      originY: 'center',
      textAlign: 'center',
      charSpacing: -4,
      fill: style.grey,
      left: this.width / 2,
      top: this.height / 2
    });
    const textGroup = new fabric.Group([textBorder, newText], {
      left: 0,
      top: 0
    });

    this.fabric.add(textGroup);
    this.fabric.renderAll();

Image examples

• Up until the font size of 370, it all fits well
  
• From there on, the offset is introduced - size 400
  
• Size 500
  
• Size 600
  
• And so on

I've tried doing something like I had previously when I was using the vanilla Canvas API. The font X and Y offset was introduced by the browser itself and was different for all of them. So I was able to pretender a canvas with my custom font calculate the top and left offset and subtract it from the position I am giving to my display text. But it doesn't seem to work. It kind of actually thinks that top 0 is the one in the picture.

If you wish, I can try to provide more details and hopefully this isn't a duplicate.

[i-prikot]

Hi. Have you tried using this?
http://fabricjs.com/docs/fabric.util.html#.clearFabricFontCache
http://fabricjs.com/docs/fabric.Text.html#initDimensions

[isbirkan]

I am not sure if it would help me, since my font is loaded before the rendering happens, during the page load. It's declared inside an scss file and used in a hidden div on-page, so that I am sure it is loaded. Had this issue before, when it wasn't loading until I typed the first character, which generates the canvas.

I jus tried the initDimensions and it is still the same.

[isbirkan]

I see that it only happens when having:

      originX: 'center',
      originY: 'center',

But from what I've seen, that's the only correct way to actually center a text

[asturur]

So when you use originX and originY = 'center' what you center is the text bounding box and not the text itself.
There isn't a way to center the text itself easily.
The text has a top and bottom padding that are regulated by specifc constants that you can look at.
Is unclear how are you changing the font size compared to the width/height you want to obtain.