I’m looking to recreate an HTML-like text layout within BabylonJS. I need to mix regular and bold text within the same line, similar to HTML’s <span>Hello, <b>world</b></span>.
The TextBlock component doesn’t seem to support this kind of layout since individual blocks don’t acknowledge each other’s presence and overlap. Is there a way to achieve automatic text layouting that allows for mixed font weights?
Hello! There was a community pushed feature PR to allow structured text once, but it was not finished: StructuredTextBlock (GUI 2D) by cronvel · Pull Request #11383 · BabylonJS/Babylon.js (github.com). You can somewhat simulate this by using a stack panel with text with two different font styles: Babylon.js Playground (babylonjs.com)
Thanks! @carolhmj , do we have this equivalent in BabylonJS?
Demo: three.js examples
Source: three.js/examples/webgl_geometry_text_shapes.html at master · mrdoob/three.js · GitHub
If you mean the outline and outline color, yes, there is:
As for the rest (mixing font styles and faces) within a single textBlock… NOPE,… sadly.
@carolhmj @PatrickRyan I’d like to take this opportunity in case you plan to v2 the TB control, to state again my +1 
for this feature. In its simple version. In my opinion, the community project has gone beyond scope (and as said, never finished).
Thank you for sharing this, but in the THREE.js demo the text built with shape geometry which is a 3d object I assume
Sry, I didn’t look at the source (only the picture), lazy me 
However, this example doesn’t look extruded to me. It can be easily reproduced with a GUI for mesh (plane) and in fact further modified towards the view from the camera using billboard mode.
With 2D GUI I’m having some resolution problem, this example solves this problem in a way. If you have existing PG that does the same effect I’d like to checkout!
Well, no, I don’t have one at hand. But any based on one of the doc PG could be created in minutes I suppose. What sort of resolution problem do you have? Do you mean the text is blurry, not crisp or is it something else?
It is not that blurry, but not as sharp as in the demo I sent. The difference is like JPG vs SVG; some have limitations, while the other is vector-based.
Are you in full-screen mode or texture mode. Did you try the solution for crisp texts in FS mode. Else, in texture mode, use a higher resolution? And then, I suppose it will never reach the quality of SVG.
I was in full-screen mode all the time, never used texture-mode, what is the diff?
Also when I zoom in browser you can see the quality diff:
There is also MeshBuilder.CreateText that creates 3D text: MeshBuilder.CreateText (and you could create it with a small depth so it looks 2D)
