Span for Text element

[CosmaVergari]

Hi Lightning team!

I have a question/proposal: is it possible to implement a syntax to have a portion of text in a Text element of a different style w.r.t. that of the Text element (e.g. a bold word in a normal sentence)?
Similarly to what is achieved in HTML using the <span> tag.

[elsassph]

Funny because I just asked the question on Discord. LightningJS 2 has an "advanced text renderer" which supports basic markup for multi-style text.

[chiefcll]

@frank-weindel thoughts?

[frank-weindel]

HTML-based rich text is possible. The functionality from the advanced text renderer for Canvas text could be ported. For SDF text it's tricky but doable.

[elsassph]

It is otherwise really awkward/inefficient to create a label (especially multiline) with multiple styles.

[chiefcll]

@frank-weindel - If we were to do this on the Framework side...

<Text>Hello <i>Franke</i><Text>

If I created two text nodes to do this vs you doing it on the renderer... Would they be equal in performance?

@CosmaVergari - What types of styling would you need? (Italic, bold...) I think Solid can do some of this now you just put multiple nodes with different props and put it inside a Flex container. Multiline would be hard on the framework side.

[CosmaVergari]

I'm trying to put a different color and size to a text at the beginning of a multi-line paragraph (for specific reasons), I don't think it is reliably achievable with the framework as you said.

[frank-weindel]

@chiefcll You don't really have access to the raw text layout data at that level. While you might be able to approximate it at the framework level, it will never be 100% correct.

[elsassph]

@chiefcll there a few cases where flexing elements can be an acceptable workaround, but creating many nodes doesn't scale well, and it certainly won't work for multiline text. Indeed <i> and <b> would be good. Maybe <u>.