CODEWITHSUNDEEP
fabricjs
five
five

Reputation: 367

FabricJS Textbox - The cursor position is not set correctly for certain fonts

enter image description here

In the above image, the cursor should be at the end, but for some reason, it is placed before the last character. This only happens for certain fonts.

I don't think it is related with how the custom font is being loaded, this image was taken from http://fabricjs.com/loadfonts. Also, the last version of the library is being used.

To reproduce the issue you have to do the following:

  1. Change the font-family to "Pacifico".
  2. Click on the text box to enter in edit mode.
  3. Start typing.

Sometimes, even the last character goes outside of the bounding box. I think that this has something to do with how the _measureChar() function executes, but I'm not sure what needs to be changed.

Thanks in advance!

Edit: I did more tests and it seems that this problem is not present in IE. This problem appears in Chrome and Firefox. It is also strange how the characters are being rendered in each browser: enter image description here

Upvotes: 2

Views: 1428

Answers (1)

Shakti Patel
Shakti Patel

Reputation: 3862

add below code before canvas.requestRenderAll();

fabric.charWidthsCache[this.value] = {};
canvas.getActiveObject()._initDimensions();
canvas.getActiveObject().setCoords();

Upvotes: 3

Related Questions