GUI Text fill in Plane

Questions
1

Hello BabylonJS Community,

I am trying to find a way to make a text fill in a Plane no matter its dimension.
This is my current approach: https://playground.babylonjs.com/#ZI9AK7#3306

  • I have a container that uses the entire plane space and from which I get the height in pixel.
  • I then put a small font size on my text and compare the height of the textblock and container using computeExpectedHeight.
  • I raise the font size and compare the difference between the heights again. I continue until the textblock height is bigger than the container height and I stop.

But as you can see in the playground the text is way outside my container. It seems that either heights of the container and textblock do not use the same unit or the computeExpectedHeight function returns a bad result.

One other weird thing I realized is that if I put a different font size before launching the loop, the displayed result is different as if the first font size indicated will impact the rest which I don’t think is logical.

Anyway, there is clearly something I don’t understand about how GUI works here.

Tagging @RaananW who I think is the expert in GUI if I am not mistaken. :wink:

Thanks for your help community!

2

It shall be @carolhmj :slight_smile:

2 Likes
3

Hello! If you run the font size update in the render loop, it will work: Texture mode Babylon.GUI | Babylon.js Playground (babylonjs.com)

4 Likes
4

Thanks a lot, @carolhmj !!

I was wondering if there was another way to make sure computeExpectedHeight return the right value?
I tried things like markallAsDirty on different GUI elements but I guess onAfterRenderObservable is the safest.