Jump to content

GUI TextBlock Lines


Recommended Posts


I am trying to create a TextBlock with textwrapping and wait until the _lines property has been calculated. Is there any sure way of doing that? Maybe some function I can call to have it calculated instead of having to use an observable. (Also, the TextBlock is child to a StackPanel)

Right now I am creating the TextBlock and using TextBlock.onDirtyObservable and inside that I check TextBlock._lines. However, this value can sometimes be wrong as I have seen. This seems to be due to _context.measureText returning different values at times. I observed this behavior when I force reload the page, if I just reload it normally the _lines property is properly computed.

Maybe there is some kind of caching on the canvas context or something that makes it return different text widths?

Any help on this would be appreciated.

Link to comment
Share on other sites

Hiya E.

    Let me imagine-up something...

     var linesArray = myTextBlock._lines;
     [...demented before-textBlock-display experiments...]

Would THAT give you a solution?  You could do stuff to the _lines array... prior to textBlock display.

But don't expect the textBlock to update its measurements... AFTER you adjust stuff.  Babylon GUI doesn't enjoy trying automatic "late-measuring". 

If you really know what you are doing, you can tweak the measurement numbers manually, yourself.  The tweaks might not respond as you want, though.

But, again, it's better to dispose stale/unwanted textBlocks, and make new ones, whenever CERTAIN changes are wanted.  There is no HTML browser-like "automatic re-flow"... in BABYLON GUI.

I hope this helps.  I think you might be wishing-for GUI features... that are impossible, due to the way GUI operates.  Not sure, though.  If you can give us a few more details about what you wish to do, that might help.  Are you going to try re-wrapping, or maybe in-text font sizings/colorings?  Do tell more, if you would/can.  Thx.  Party on.

Link to comment
Share on other sites

Sorry, that's not what I meant.

I meant I want to do something like this:

var panel = new StackPanel

var myTextBlock = new TextBlock

myTextBlock.fontSize = '20px'

myTextBlock.text = 'Testing text'

myTextBlock.textWrapping = true

var height = myTextBlock._lines.length * 20

panel.height = `${height}px`


But this is not currently possible because the _lines property is not even set as soon as you create the TextBlock. You have to wait for the next few frames.

So, I was wondering if there is an internal function I can call to take the measurements as soon as I set all the TextBlock properties.

Link to comment
Share on other sites

The internal function that initializes lines is _parseLineWithTextWrapping - it's protected, so API could change any time:

The WebGL call to measure text only returns width, but you could write your own loop like that to measure height - just need width of container.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...