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).
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.
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.
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.
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.
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.
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.
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?
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.
