TextMesh Pro How to set text background color?

I can't find any background option in the inspector? Or I overlook?

I want the TextMeshPro UI text look like a clickable button.

 

It doesn't have a background colour, you'll have to make an image element and put it behind.

 

Well, you can highlight text with mark tags, which is a little bit like a background color.

But the normal way to make a button with text on it is to have both an Image and a Text as separate objects. Try right-clicking in your object hierarchy and selecting UI -> Button to see an example.

 

Just to add a grain of salt to what @Antistone said I found out that if you use a mark tag on text using the font tag then the mark is drawn below the text. I don't know if this was intended but it was exactly what I needed.

 

@Stephan_B I guess the answer is no, but is there currently any way to add a padding to the mark? I have some text that I just want to be clearly readable against the background, and a mark (behind) with some padding would be an ideal solution for this. A global or per-font setting would be sufficient for my case.

// EDIT: Using UI with a content-size fitter does not work well for multi-line text. I would like the background to be just behind the characters, i.e. be less wide in lines that have less characters than others.

 

Whoa, perfect! Thank you!

Exactly this is what I'm going for. Wouldn't work handling it manually with Unity UI and a content-size fitter, but works with <mark> and thanks to the padding property, that's just what I need.

To confirm, the only way to bring the mark behind the text still is applying a <font> tag with a different font than the Default, right?

 

Thanks again for the hints, I got it to work, but for my case I figured that a very thick outline behind the text, maybe even with some slight softness, would look a little bit nicer than the blocky mark. I already figured out how to make it pretty thick, but I wonder if there is a more elegant solution to make the outlines not overlap adjacent characters. Duplicating the font asset and the text and putting the duplicate behind the original would not work so well in my case as I am dealing with different fonts in the same text (regular and one for emphasis), using custom style sheets. Any ideas how to handle this?

 

Not sure if this is known but in 3.0.1, using the font tag does not work...

 

@Stephan_B Any thoughts on this? Thanks in advance.

 

@Stephan_B I can get all of this work but had to upgrade to 2.1.1 (mark padding didn't work in 2.0 for me), however since upgrading to 2.1.1 I get errors when expanding extra settings and none of the controls in those extra settings respond to input (Unity 2019.3.8).

 

hi there

I am also interested in setting background color for text and while I got it to work using a different font asset, I want to start using your in-development approach right away.

Quick question about text though. I am developing an instructional manual application that is text heavy, maybe a few interactions/animations.
can I have bulleted lists with colored bullets? It looks like I need to add a glyph to the string with the color property, and use the indent property to achieve that effect, is that correct?
Also is it even worth it to use Unity at this capacity? I am familiar with xamarin and could give it a shot but just wanted to hear your opinion as if it wasn't for text mesh pro Unity wouldn't even be an alternative.

Thanks

 

Unfortunately, this does not work if you want to change the font color with tags too, even with 3.0.3

We need a proper solution for this that works and doesn't involve using font tags too.

 

Any schedule for this as 3.0.3 still does not fully work?

 

Can we make this mark using mesh only. I'm a making a typing game where index of character is needed and I wanted to put <mark> on the char where 'Player' does a mistake. But the problem is that using <mark> in included as string in the text that increases the length of string hence making charIndex hard to use.
Suppose I have "one" , to highlight 'n', i can put "o<mark=#FF8000>n</mark>e" but this then makes index 'n' become 14 insted of 1. am i doing it incorrectly ? or is there other way that i didn't know of.

 

Is it possible to blur the mark border? Would be nice for my gui-case.

 

@Stephan_B Any news on the correct mark behavior update?

 

I am having a hard time to place text above the marking rectangle. The hack with font tag does not really changes anything. I have placed the font itself in Resources/Fonts & Materials folder, as referenced in TMPro Settings. The font changes itself correctly, but marking rect is stil above the text, not behind. Is any other way to place marking rect behind text?

Code (CSharp):

1. hint.text.text = "<font=\"lvichki SDF\"><mark=#000000AA>" + hint.text.text + "</mark></font>"; // sometimes dark bg is not enough for text

upd: Figured it out. It is also important that font in Text Component is something different. If Text component has just same font as font tag, nothing happens (and text is still behind marking-rect)

 

The "mark solution" alone will not work if you need some dark background as it will erase the content.

Best solution that i found was to use two Texts that overlap with a 0.1f offset in Z.
The TMP at the back is used as Background (with a mark)
Text : <mark="#000000" padding="100, 100, 100, 100">Hola, ¿Qué tal? yo muy bien, ¿y tú?</mark>

The TMP in front displays the content
Text : Hola, ¿Qué tal? yo muy bien, ¿y tú?

Both TMPs share the same text content and should be updated together so the background will evolve with the text

Code (CSharp):

1. _front.text = text;
2. _frontBackground.text = $"<mark=\"#000000\">{text}</mark>";

 

Hi all

I'm trying to get this working as well with very little success.

Can anyone tell me where I can find the TMPro settings that show the font location to make sure that I put my fonts it the right place to get this working?

I don't have a Resources/Fonts folder as other people have mentioned above.

 

Is this still the case? It doesn't appear to work that way for me.

 

I'm a bit shocked and disappointed that there is no setting in the inspector to set the background color considering how powerful TMP is. Not sure how this could have happened. Was it intentional? If so, what was the reason for it?

 

Hi I cannot get this background trick to work using mark and font as described above. I've tried the following combos and they all show the the mark on top of the text. The font asset works fine on it's own. Using Unity 2021.3.0f1. TMP version 3.0.6

Code (CSharp):

1.  //poolEntry.Text.text = "<mark=#FF8000><font=\"LiberationSans SDF_DebugDraw\">" + command.Text + "</font></mark>";
2. //poolEntry.Text.text = "<font=\"LiberationSans SDF_DebugDraw\"><mark=#FF8000>" + command.Text + "</font></mark>";
3. poolEntry.Text.text = "<font=\"LiberationSans SDF_DebugDraw\"><mark=#FF8000>" + command.Text + "</mark></font>";
4.  
5. //This renders text fine
6. //poolEntry.Text.text = "<font=\"LiberationSans SDF_DebugDraw\">" + command.Text + "</font>";

 

I know this thread is very old, but for future seekers like me, here's a workaround I found.

So, we have a RawImage background and TMProUGUI TextMesh as it's child object. Example here


We go into BG's inspector and add 2 components: a Content Size Fitter and a Vertical Layout Group (Horizontal Layout Group also works)

For Content Size Fitter, set both Horizontal and Vertical Fit to "Preferred Size"
For V/H Layout Group, tick both Width and Height under Control Child Size
There you can adjust Padding for your needs (I have all sides set to 21, just for example)

And that's what you should get.

The Text component doesn't seem to require any special modifications.

And here's the result in-game!


Another test. Text is now "Pizza", and Padding is set to 5. Nothing else modified.


No matter what you do with the text, the BG should still adjust properly.
Except you have to move the parent to change text's position, but I think it's quite obvious.

I hope I can help someone with my short guide

 

Excellent !

 

This obviously only works when the whole text should have a background instead of only parts of it.

 

Same. Looks like it was patched out for some reason

 

OK Just in case anybody in the future will still come searching for this, I've thought of a workaround.

It's gonna sound stupid, but a good way to achieve highlighting without the use of underlying image assets, is to duplicate the text mesh game object, having the clone sit on top of the original in the scene hierarchy, and apply marking to the bottom text mesh. That way you can set whatever color you want to the mark, including opaque values, and since the mesh clone is rendered on top, it won't be obstructed by the mark.

Obviously this isn't ideal, and you'll have to manage both text values so that they'll display the exact same string, but if you're like me, and absolutely must have a dynamic and different color value behind every character in your text object, it's a pretty decent solution.