Align center on Text elements does not always work correctly

[ohnoitsfraa]

I'm building a product customization tool for my client and I'm using Konva heavily on this feature. One issue I'm having is that whenever I have a text element and I use the align() function, whenever I choose 'center' , it depends on the font if it shows correctly or not. For some fonts it's correctly centered, for other fonts it looks shifted to the left or right. Even changing it to uppercase or lowercase changes the visual horizontal alignment.

If I check the textWidth manually I see that it shows that correctly. I guess the centering of the text uses this textWidth property and the normal width property to function. Could there be something wrong with this? Or am I missing something?

[lavrton]

Please make a demo. Make sure you set correct font family of the text element AFTER the font is loaded.

[ohnoitsfraa]

Hi

I've made a demo on codepen: https://codepen.io/ohnoitsfraa/pen/XJbMjYN

On top you have 4 examples in plain HTML with all the texts centered, below you have a copy but via Konva.
I've added a center line to make it visually easier to notice a difference. As you can see, on top they look visually centered like they should, via Konva they're is always an offset.

For short pieces of text or if you only show one piece of text, this is probably not so noticeable and that's okay.
If you have multiple texts below each other and they differ in casing, font family or font size, the difference becomes more noticeable.

[lavrton]

On the demo, text is not centered because the margin of the body effects the position/size of the stage. If you remove the margin (or adjust stage size to match container size) the visual will look correct: