Scale fontSize on both width and height window resize

Hi, is it possible to scale the fontSize of an adt textblock on both of a width and height window resize event? It scales correctly on either width or height window resize (depending on if % units or idealWidth is used), but never both.

https://www.babylonjs-playground.com/#FWGQ1X

By “width or height window resize”, I mean dragging the bottom or right window edge and having fontSize scale for both.

Thanks in advance for any help.

pinging @Evgeni_Popov if he has a few free cycles :wink:

When setting a font size in percentage, the system must compute a font size in pixels from it.

Currently it is using the height of the container of the control and do container_height_in_pixels * font_size_percentage to get the font size in pixels. It could use the width instead (it was a design choice I guess). By doing so, you really get a text height that is a percentage of the height of the container.

Now, we could have the text size to change whenever the width OR the height changes by doing something like (container_height_in_pixels + container_width_in_pixels) / 2 * font_size_percentage to compute the font size. It would be a breaking change, however, and I don’t know if it’s a feature that would be that useful. So I let @Deltakosh arbitrate this (to avoid a breaking change, we could add a property like useWidthAndHeightForFontPercentageConversion to GUI.Control, or even a more generic property that would let you choose which of the width, height or both values should be used in the computation).

As for the case in your PG where idealWith is set and fontSize is a pixel value, the change in the width font size comes from the stretching of the texture, not from a change in the font size itself (it always stays at 36px).

2 Likes

I think this is something that should be handled at user level honestly (by handling the onResize observable)

2 Likes

Thanks Evgeni and DeltaKosh, I’ve used both of your suggestions. :slightly_smiling_face:

https://www.babylonjs-playground.com/#FWGQ1X#2

2 Likes