Text background color on some letters

Hi,

I have a Text(Script) component the following text:
“My name is Boi.”
With the Rich Text checkbox turned on, it looks like:
“My name is Boi.”
So far so good. Now I would like to change the background color the letters in my name (Boi), let’s say to yellow. Unfortunatelly the Rich Text doesn’t support a background color tag. Only color tag. So how would one go about this? I can not just manually put an image with a yellow texture behind the text, because I would like a more generic system. I have a lot of sentences with some words bold. I would like only those words to have a yellow background. Also those backgrounds need to follow the words when them move around the screen (for instance in a responsive environment).

Thanks for any usefull tips.

Regards,

Boi

You can’t change the background color of text through the Rich Text XML format. If you want to change the background color, you have to change the color of the text container.

hope that helps.

Are you looking for something like the tag in TextMesh Pro?

As per the link above, the tag format is <mark=#FF00FF80> which includes color and alpha. These tags can be nested as well.

I realize that TextMesh Pro is not free but I wanted to make sure you were aware of said functionality just in case you can’t find any alternatives to suit your needs.

2 Likes

Thank you for your answer. Unfortunately, I want to highlight some words. Not all of them.

@Stephan-B, I am aware of the TextMeshPro asset. Thanks anyway.

@Stephan-B, also TextMeshPro seems to overlay a rect with color. I want the rect to be behind the text.

2 Likes

Since the geometry of the highlight is part of the text’s geometry and added into the vertices array after the text, it renders over the text.

You can control the transparency of the highlight by using alpha such as <mark=#FFFF0080> or you can actually get the text to be rendered over the highlight by using the font tag which results in the text being part of a sub text object which renders over the highlight.

For instance, let’s assume your text object has the BANGERS SDF font asset assigned to it. Using the following <font=“NotoSans SDF”>This <mark=#FF8000>text is highlighted."

Basically, assign a font asset you are not planning on using in this text and immediately switch to the font asset you are planning to use using the tag.

P.S. I am currently exploring some alternative ways to handles this as although it works fine, I am not thrilled with having to use this workaround when looking for fully opaque highlight. I also want to provide the ability to add padding on the highlight as well.

3 Likes

Interesting…
one more question: will the tag be able to be visible over multiple lines? For instance this string:

“Hello, my name is Boi. Nice to meet you. What is your name?”
I want to make some words bold and highlight their background orange (like in your example). Th string would look like this:
“Hello, my name is Boi. Nice to meet you. What is your name?”
Now here comes the tricky part: I want that string in a Unity UI Textbox like this:
“Hello, my name is Boi. Nice to
meet you. What is your name?”
BUT the “Nice to meet you.” part highlighted as well. So in fact 2 orange rectangles, but only 1 mark tag (well 2, 1 for opening and one for closing.

Short answer: Yes

Just like Underline and Strikethrough which can span multiple lines, the tag is no different where all of this is handled automatically behind the scene.

This is the raw text in the Text Input Box
<font=“NotoSans SDF”>This <mark=#FF8000>text is high\u00adlighted <sprite=“Sprite Icons” index=7>.

P.S. The hyphenation is done by using a soft hyphen (\u00AD) in the text or “high\u00ADlighted”

P.S.S. I even added a sprite inline for good measure. “Sprite Icons” refers to the Sprite Asset. index=7 or name=“Heart” references the specific sprite in the TMP Sprite Asset.

3 Likes

Sorry but where do you get the value “<font=“NotoSans SDF”>” what if I have my own font created?

The NotoSans SDF is just a font asset that I created from the NotoSans.otf font using the Font Asset Creator in TextMesh Pro.

This <font=“Font Asset Name”> is the font tag itself that allows to use multiple fonts per text object. See the font tag information here.

I wonder, did you find a better way than the workaround? because if the text starts with the highlighted part it doesn’t work

I’m also interested in an alternative solution. Are there any updates regarding this issue?

1 Like

I second that

1 Like

This is something that I plan on revisiting but simply haven’t had a chance yet… and thank you for the remainder.

P.S. Besides sorting control, the ability to also control the padding of the highlight region is also on the list. Ability to use a sprite with even 9 slice has also been requested. All stuff I plan on adding if I can get there.

3 Likes

Right now I’m trying to replicate this highlighting effect that Minecraft uses. It’s an underneath highlight that spans the entire line that text appears in. Is this possible?

5975846--641579--Снимок экрана 2020-06-13 в 15.42.15.png 5975846--641582--Снимок экрана 2020-06-13 в 15.42.23.jpg
This solution doesn’t work now. Unity 2019.2.17f1, TMPro 2.0.1

Using <font=“Default”> means that it is using the same primary font where as such the mark geometry would be after the characters which is why it is on top of the characters. You have to assign some other font asset as primary and then use <font=“Some other font asset”> to ensure the characters from this other font are rendered on top.

P.S. When I have time, I will revised this so that Underline and Mark geometry are first.

2 Likes

Im getting an error that ; is expected but its already defined.

s = s.Substring(0, 3);
TextBody.text = s += "<font="Bariol"><mark=#ffff8000><b>...</b></mark>";

This doesn’t work with custom font too.
100000001073317--757078--Без названия.png