GUI.TextBlock : Incorrect width (too small) when resizeToFit is true & fontStyle is "italic" [Fix proposed in the post]

Bugs
1

Since its my first post here : I must thank all the BabylonJS contributors it is an incredible piece of software !

Now about the issue. Well as said in the title, when a TextBlock has both resizeToFit at true and fontStyle at “italic”, the calculated width of the TextBlock is too small.

Repro here in the playground, the “d” of “Hello world” is cropped because as said above the TextBlock is too small: https://playground.babylonjs.com/#XCPP9Y#8770

What happens here is that TextBlock calculate the width taken by a string of text on a canvas by directly using the width property of a “context.measureText”, the thing is this width is only meant for the text with no font style.

This issue and its fix are actually documented in MDN : https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics#measuring_text_width

In the babylon codebase it would means updating TextBlock._parseLine, TextBlock._parseLineEllipsis and TextBlock._parseLineWordWrap

I tested those changes on my end and they fixed the issue. If the bug is seen as legitimate and the approach to fix it is deemed good I can submit a PR.

1 Like
2

@Kalkut thanks a ton for your amazing feedback and solution :slight_smile:

Please create a PR and we ll be glad to merge it !!!

3

@sebavan Issue opened and PR proposed !

I tried my best to follow the guidelines, don’t hesitate to tell me if I have to change something

2 Likes
4

Looks perfect to me !!! waiting on @msDestiny14 feedback and this will be in the next nightly :slight_smile:

5

Oh man! This is sweet. Thank you for finding this and fixing. What an interesting edge case. :joy:

I approved as well and merged. :+1:

6

Woah this process was smooth, so happy to have contributed ! :partying_face:

2 Likes
7

Congrats !!! We are so happy you contributed :slight_smile: