Text Formating in one TextBlock

Questions
1

Hello!
This is my first forum post . I have just started my journey with babylon, js , so don’t be mad if my question is trivial, but I guess I Searched everywhere .
So, I have a task:

  • I need a text displayed in 3D , attached to some object like cube - done

  • This text must always be directed to camera - i used .billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL; and it works

  • and here is the hard part. Text has a lot of formating - bold, italic or both .
    it looks like this :
    Była sobie żabka mała
    Rere kum-kum rere kum-kum
    Która mamy nie słuchała
    Rere kum-kum BĘĆ!
    I am Polish and the text is also in Polish, but i guess the meaning is not that important .
    I used an Array, divided the text, styled everything separately ,
    then i used for(let i=o …)

it worked but the text overlaps ,it is illegible :smiling_face_with_tear:
I will be honored if someone try to help me :slight_smile:

https://playground.babylonjs.com/#V5YR0T#44

2

Hello and welcome!!!

cc @DarraghBurke or @carolhmj

1 Like
3

Hi, my suggestion would be to keep a running total of the width of each text block, and then when that width exceeds the max width allowed for one line, push the text block to the next line. You can turn resizeToFit on for the text blocks to have them calculate the width and height based on the dimensions of the text.

You will need to wait one frame after the text blocks are created for the dimensions to be calculated. Once the dimensions are there (you can check the text block’s widthInPixels and heightInPixels to retrieve them), you can calculate the layout using the method I described.

Let me know if that makes sense!

4

HI! Thank you for your answer. I really do appreciate this .
I understand what you mean , but to be honest I do not know where I can check after waiting one frame . Should I check console or inspector ? :sweat_smile:

5

Sorry, I do not mean manually looking yourself. I mean calling a function to compute the layout yourself. So you can do something like:

function computeLayout() {
  // calculate the text block's dimensions and align them
}
scene.onAfterRenderObservable.addOnce(computeLayout);
6

Thank you for explaining ! Sorry for not answering for a while. I will definetely try your suggestion :slight_smile:
I managed to do my task using dynamic texture and then drawText method, but I also spend some time aligning the text to look good.

2 Likes
7

Hi just checking in, was your question answered? @Erykwk

8

Yes! Thank you :slight_smile:

1 Like
9

@carolhmj @DarraghBurke @RaananW
Is this 'StructuredTextBlock’ PR still pending? (rethoric question, I know it is :wink: Anyways, I believe once it’s live, it would most certainly deserve to be showcased and mentioned.

1 Like
10

Yeah, since the original author seems busy, it looks like we’ll have to take over it. :confused: If I’m not mistaken Raanan will be OOF the next two weeks, but I’ll discuss finishing the work with him once he’s back.

1 Like
11

fair enough. He deserves his holidays :parasol_on_ground: :sun_with_face: :sunglasses:

2 Likes