[GUI] StructuredTextBlock: multiple colors/styles in one block of text

@msDestiny14 Thanks for the reply!
And what about some typical game effects like slow-typing? Is it ok to add this to TextBlock?

Let’s write a separate issue for it.

Personally this feels like a animation/state machine like feature. Not sure if it makes sense to have it in the GUI system itself. But I can see reasons to have it in as well.

Let me get back to you on that!

@PatrickRyan if you have some time today would love to know your thoughts design wise.

Made a simple slow-typing example
https://playground.babylonjs.com/#XCPP9Y#9251

2 Likes

@aWeirdo Yes of course… But the effect is not nice when dealing with word-wrapping, alignment, and so on… At least, it’s not the effect that games are using for their dialog boxes.
All the alignment stuffs and line-break should be precomputed beforehand, that’s why it’s best to implement this internally in TextBlock.

Hi @cronvel
You can use \n directly in the text string for precise newlines at specific words (First 2 lines),
or textBlock.textWrapping = WordWrap; for automatic word-wrapping (Last 2 lines)
combined with textBlock.textHorizontalAlignment & textBlock.textVerticalAlignment to properly align the text to edges.

https://playground.babylonjs.com/#XCPP9Y#9264

Ofc, if you also want the container/rectangle to scale, which can be common in these scenarios, it’s a bit more work. :slight_smile:

A little update to say that I’ve made some progress hacking TextBlock.
For instance it supports multiple colors.
Now I will try to make bold and italic work.

By the way there is a lot a things that have/may have to change internally.
At the moment I just duplicated TextBlock methods to support both plain text and the structured format. It just detects if the user provide a string or an array as .text and branch accordingly.
In the future, it would be probably best to have only one codepath, so TextBlock would use only the structured format internally, and simply convert plain string into [{text:"my string"}] inside the setter.

Bold and underline are now working, also I improved underline, adding support for the outline feature (basically replaced the canvas .lineTo() by a canvas .strokeRect() before the .strokeText() and .fillRect() before the .fillText()).

1 Like

This is a single TextBlock with word-wrapping mixing colors underline, strike-through, bold and italic:

@msDestiny14 Is it better to continue discussion on Github or here? Also, before investing more time, I need some approval on this:

By the way there is a lot a things that have/may have to change internally.
At the moment I just duplicated TextBlock methods to support both plain text and the structured format. It just detects if the user provide a string or an array as .text and branch accordingly.
In the future, it would be probably best to have only one codepath, so TextBlock would use only the structured format internally, and simply convert plain string into [{text:"my string"}] inside the setter.

For instance my PoC was made in JS, I need to know if this is going to be accepted by the team before investing more of my free time for a PR.

3 Likes

Also I noted that the TextBlock is often fully recomputed for no reason.
E.g. simply opening dev-tools (which resize the screen but not the size of the TextBlock) have to compute word-wrapping again (which make a lot of context.measureText() calls).
Maybe it would be better to have more level of dirtiness, e.g. have a ._innerContentIsDirty property, and only recompute lines when the text have changed (or the TextBlock bounding box size).

1 Like

Feel free to make adjustments to textbook as you see fit. I personally am very open to this PR and feel free to add me on the review for it.

You can also continue the conversation on here and then on GitHub once you have a PR. My personal apprehension to this this might be more of a design question. Does the [{text:“my string”}] feel intuitive? Maybe it totally does! :grinning_face_with_smiling_eyes: Just want to double check this is the best approach. Also I think it would be best to keep everything on the current textblock. If there is a huge overhaul to the internals of it this will require a lot of testing. Plus remember any new changes must maintain backwards compatibility.

@msDestiny14 I prepared the PR here.
This is a PR to iterate over.
Please tell me what do you think about it! :wink:

4 Likes

I added a frame style (e.g. could be used for mardown backtick rendering, or whatever).

5 Likes

The progress made to StructuredTextBlock make it easy to plug in some nice effects with only few lines of codes:
crazy

6 Likes

News:

  • Support for hover effect
  • Support for clickable text part (hyperlink-like)
4 Likes

Dears,
As I am back with just another session of my GUI ‘evaluation’, I was just wondering:
Where do we stand with this project today?

Looking back at it a little, it might have just gone out of scope.

Though, I truly believe that the ability to use simple styling within a textBlock would really improve things and be a fine ‘nice to have’ if not a ‘must have’.

When I say ‘simple’, understand similar to html or just very basic inline css-like. Bold or strong, italic, underline…eventually color… I guess you got my point. Really not much more than that.

And then, in this simple form, (in my opinion only) I would really see it as part of the core features (not as a plugin)

What is your say? @sebavan @Deltakosh (who closed the topic on gh and requested for an extension) @carolhmj (my gui mentor :smiley:)

1 Like

Let me restart the discussion with the team :slight_smile: