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.
1 Like
Just to provide more insight on this…
The underline, strikethrough and mark (highlight) geometry is contained in the primary mesh and added after the characters. As such these always render on top / after the characters which is fine for underline and strikethrough but not so good for the mark tag. This is simple the result of the order in which the geometry is created.
When using the tag with forces the creation of a sub mesh object which is render after the parent then the mark tag ends up behind the text which is the desired result.
Having said that, I plan on revising the geometry creation process to make sure the underline and mark are always rendered first / behind the characters and the strikethrough always on top.
I don’t have an ETA on this but that is the plan.
7 Likes
@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.
Yes.
You can use the padding attribute as follows: <mark=#FF8000 padding=“10, 10, 0, 0”> where the values are Left, Right, Top, Bottom.
Can you provide an example?
This is what I currently get using mark with multiple lines of text.
4 Likes
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 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 tag with a different font than the Default, right?
Correct. However, this is something I will be addressing in the future.
In the meantime, I suggest creating a font asset whose atlas is just big enough to contain the underline and ellipsis character / glyph. Then assign to the static small font asset, your real font asset with the characters. This will ensure the underline and mark are always behind the text coming from the fallback to this small font asset.
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… 
The tag should be working as expected.
First make font asset name is spelled correctly and in quotes as per the following: <font=“Name of font asset”>
Second, make sure the location of this font asset matches the specific path in the TMP Settings.
Let me know if after verifying the above is the issue persists.
@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
Take a look at example “10 - Bullets & Numbered List Example” included in the TMP Examples & Extras. This will give you a good idea of how to handle indentation and how to use sprites as those colored bullets (if you use sprites that have colors).
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 on the char where ‘Player’ does a mistake. But the problem is that using 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>ne” 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.
Short answer is yes.
First, I suggest you take a look at some of the examples included in the TMP Examples & Extras and more specifically the Animating Vertex Attribute example. Although this example is about modifying vertex colors and positions, it shows how to access the textInfo and textInfo.characterInfo[ ] which is what you would use to figure out the position of any given character and its vertices so that you could create your own mesh and position it correctly relative to the text.
The characterInfo[ ] also contains the index of the character in the original string which makes it easy to navigate through the characters vs markup tags in the text.
Take a look at this post that includes an example of an old script to sort of do what you want. This example should help you get a better understanding of it all.