search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.89k stars 3.5k forks source link

Text bounding box with emoji #6959

Closed GreenFootballs closed 3 years ago

GreenFootballs commented 3 years ago

Yes, it's me again, and this time I'm fairly sure it's a real bug although I don't have a suggestion to fix it.

If a Textbox contains emojis, they overflow the top of the object's bounding rect:

491

And toDataURL() cuts off the image:

492

Here's a Codepen to demonstrate:

https://codepen.io/green_footballs/pen/wvoOpoZ?editors=1010

asturur commented 3 years ago

what font are you using for emoji?

asturur commented 3 years ago

Let's categorize this bug as issue with emoji and text bounding box, because dataUrl issue is just a consequence of the bounding box issue

asturur commented 3 years ago

So for me works after the reload: image

Hinting a bit at the fact that the emoji font isn't loaded initially and gets loaded by the browser/os at the moment of use.

melchiar commented 3 years ago

This is actually the same issue as https://github.com/fabricjs/fabric.js/issues/6432. It isn't specific to emojis since it affects any font character where the ascenders/descenders extend outside of the bounding box.

As a workaround you can always manually adjust the height and top values when outputting your dataURL to allow for some extra space.

Something like this emojis.toDataURL({height: 150, top: -10})

GreenFootballs commented 3 years ago

The images are of the Mac OS built in emoji font. I'm not sure what you mean by:

So for me works after the reload:

Hinting a bit at the fact that the emoji font isn't loaded initially and gets loaded by the browser/os at the moment of use.

That's interesting - what did you reload? When I refresh the page nothing changes. But somehow you managed to get the bounding box adjusted?

asturur commented 3 years ago

the second time i run the codepen everything was ok. How much consistent is the issue for you?

GreenFootballs commented 3 years ago

I've tried reloading the codepen several times and it never fixes the issue. Maybe it's a Mac OS problem? I can't find any way to pre-load the built-in emoji font.

asturur commented 3 years ago

i m on macos and i m fine. Tu load the custom emoji font the only way i know of is prime on the canvas sone emoji text. You can also just add a text like you did and with a setTimeout later clear the fabricjs cache for dimensions and do it again? is a weird issue anyway.

How doea firefox behave?

GreenFootballs commented 3 years ago

Very strange. Firefox acts the same way for me - the bounding box never adjusts, even after a setTimeout. How do I clear the cache for dimensions?

asturur commented 3 years ago

sorry the cache for dimensions keeps only the width of the fonts. Just try to invalidate the object cache, add another char to it so it redraw.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.