resizeToFit after lineSpacing in BABYLON.GUI.TextBlock()

Dear BabylonJS Community,

I would like to bring to your attention a potential issue I encountered while using BABYLON.GUI.TextBlock().

Specifically, I have found that when applying the resizeToFit property, it does not consider other applied properties. For example, if I use the lineSpacing property (and regret the absence of the letterSpacing property, which I also find essential), the resizeToFit property inaccurately determines the text boundaries, resulting in truncation from the bottom.

It’s important for such functions to consider all relevant styling properties, including line spacing and, potentially, letter spacing, to ensure accurate text rendering and scaling.

I kindly request that the development team look into this issue. If possible, I would greatly appreciate the addition of support for the letterSpacing property and improvement of the resizeToFit function to accommodate various text styling properties.

Example in playground: https://playground.babylonjs.com/#ZEMNXC
Thank you for your attention to this matter.

Best regards, Alexander

I’ve made a letterspacing element before let me see if I can dig it up.

1 Like

https://codesandbox.io/p/sandbox/nebu-game-example-9k20t?file=%2Fsrc%2FRender%2FUI%2FElements%2FTextBlockExtra%2FTextBlockExtra.ts

It might need some updates and refinement, but this could get you on your way.

1 Like

I thoroughly enjoyed the graphics in your example. I’m wondering, could we integrate this extension into the BabylonJS GUI library? Or are they intentionally keeping it lightweight to prevent the GUI library from becoming too heavy in terms of kilobytes?

Not sure, anytime I need specific behaviors or special UI elements Ive always just taken a root element like a rectangle and made an extension with a custom draw method. Or in this case I needed letter spacing so the TextBlock got extended.

Im sure we could make the case to get letterSpacing into the core TextBlock though.

1 Like

I agree with you that feature extensions are the developer’s choice. But at a minimum, existing features need to work well to make a good impression. At a minimum, they can warn that you need to use linespacing at your own risk and resizeToFit will not work with it. :smiley:

1 Like

I’m sure resizeToFit could be adjusted to support it as well.