Rich Text Box Option?

I’m a little surprised at something: I want to put two short paragraphs of instructions on a page in my app and the text includes a word I want to bold and a short bullet list. I don’t see a “rich text” component among the options, which seems odd. The Label component doesn’t allow for rich text. How would I accomplish what I want to do here?

Appreciate the help,

Michael

2 Likes

Hi mbritt,
Maybe some workaround will be WebViewer component with setting URL of it to HTML data representing what you want to see. Here is a little example of code for that:

data:text/html,
<!DOCTYPE html><html><meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><body>
   <p style="width:100%;">Here is the <strong>example</strong> text:
      <li>point1
      <li>point2
      <li>point3
   </p>
</body></html>

You can put this code in your application line by line (as I pasted it here) using the join text or on one line with text.
Later if you want to make changes to the HTML data, you can do so using for example with replace text. Below is example of blocks for that:

3 Likes

I suggest to change the category of this post to “feature request”, because Thunkable has no support for this type of label formatting unfortunatelly.

3 Likes

The easiest way is to use a text character changer such as Tools


This is not supported by iOS.

1 Like

Thanks for verifying this. I put HTML text into the Label component as @hatmanactions suggested and it looks great on the laptop, but on my iphone it’s just a white block with nothing in it. Darn… Going to try his suggestion above using blocks.

1 Like

Type the text you want using YayText which will give you the appearance you are looking for as long as it is a static text.

Hmm. I do want to use static text and I’m looking at the YayText page, but I don’t see how this would address the issue. It seems to create all kinds of interesting/unique versions of your text, but not sure I need that. Maybe I don’t get what you’re suggesting.

1 Like

See my Make Bold project
https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1

Sample output
image

2 Likes

Interesting and very impressive!

1 Like

This is super cool and I might use this! However this only works for same colour labels. However something like the below is currently not possible on thunkable.

This is super cool and I might use this! However this only works for same colour labels. Like if I wanted something like this Hello my name is zander"
2 Likes

See my other project demo in the older UI (StP)
https://x.thunkable.com/projectPage/6120f1399a4679001179829a

In this demo you can paste any paragraph and then choose the normal color and the highlighted words’ color with the ability to choose the highlighted words from the paragraph.

Have Fun

1 Like

@muneer You’re clearly pretty darn good at this, but your examples all require the user to press a button to see the highlighted text. Is there any way you can think of where the text just appears on the page with the highlights pre-determine?

Michael

1 Like

Yes there is. Create your own text parser.

[Update]

As a proof of concept, I have modified the Make Bold project to include an Input_text component that you can type and will see the result in the label below. I have chosen the <b> to start the bold letters and then another <b> to go back to normal letters.

See the project
https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1

See sample output
image

Remember, this is only a Proof of Concept, so you should expect errors in it and you should not use it in your app without testing it.

CC:
@tatiang
@Jared_Gibb
Let me know what you think.

1 Like