Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

TextMesh Pro How to set text background color?

Discussion in 'UGUI & TextMesh Pro' started by Xhitman, Oct 18, 2018.

  1. Xhitman

    Xhitman

    Joined:
    Oct 30, 2015
    Posts:
    452
    I can't find any background option in the inspector? Or I overlook?

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

    Carwashh

    Joined:
    Jul 28, 2012
    Posts:
    764
    It doesn't have a background colour, you'll have to make an image element and put it behind.
     
  3. Antistone

    Antistone

    Joined:
    Feb 22, 2014
    Posts:
    2,836
    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.
     
  4. yukamui

    yukamui

    Joined:
    Nov 19, 2013
    Posts:
    12
    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.
     
    Last edited: Jun 12, 2020
    ilmario likes this.
  5. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    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 <font> 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.
     
  6. Daerst

    Daerst

    Joined:
    Jun 16, 2016
    Posts:
    275
    @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.
     
    Last edited: Jul 29, 2020
  7. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    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.

    upload_2020-7-29_16-53-5.png
     
    Last edited: Jul 30, 2020
  8. Daerst

    Daerst

    Joined:
    Jun 16, 2016
    Posts:
    275
    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?
     
  9. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    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.
     
  10. Daerst

    Daerst

    Joined:
    Jun 16, 2016
    Posts:
    275
    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?
     
  11. jampakdd

    jampakdd

    Joined:
    Jul 8, 2014
    Posts:
    3
    Not sure if this is known but in 3.0.1, using the font tag does not work... :(
     
  12. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    The <font> 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.
     
  13. Daerst

    Daerst

    Joined:
    Jun 16, 2016
    Posts:
    275
    @Stephan_B Any thoughts on this? Thanks in advance.
     
  14. DeloitteCam

    DeloitteCam

    Joined:
    Jan 23, 2018
    Posts:
    22
    @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).
     

    Attached Files:

  15. gegagome

    gegagome

    Joined:
    Oct 11, 2012
    Posts:
    392
    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
     
  16. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    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).
     
  17. Ziplock9000

    Ziplock9000

    Joined:
    Jan 26, 2016
    Posts:
    360
    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.
     
  18. Ziplock9000

    Ziplock9000

    Joined:
    Jan 26, 2016
    Posts:
    360
    Any schedule for this as 3.0.3 still does not fully work?
     
  19. Raikir-i-sh

    Raikir-i-sh

    Joined:
    Aug 9, 2018
    Posts:
    13
    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.
     
  20. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    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.
     
  21. maltakereuz

    maltakereuz

    Joined:
    Mar 29, 2015
    Posts:
    54
    Is it possible to blur the mark border? Would be nice for my gui-case.

     
  22. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    It is not currently possible but certainly something that could be added.
     
  23. Nyankoooo

    Nyankoooo

    Joined:
    May 21, 2016
    Posts:
    144
    @Stephan_B Any news on the correct mark behavior update?
     
    Last edited: Jul 18, 2021
    L0tan likes this.
  24. maltakereuz

    maltakereuz

    Joined:
    Mar 29, 2015
    Posts:
    54
    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)
     
    Last edited: Aug 14, 2021
    splintergames likes this.
  25. technsmile

    technsmile

    Joined:
    Sep 29, 2016
    Posts:
    2
    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>";
     

    Attached Files:

    oliver_unity892 likes this.
  26. oliver_unity892

    oliver_unity892

    Joined:
    Oct 28, 2019
    Posts:
    91
    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.
     
  27. ChickenVegetable

    ChickenVegetable

    Joined:
    May 3, 2020
    Posts:
    87
    Is this still the case? It doesn't appear to work that way for me.
     
  28. djhatvr

    djhatvr

    Joined:
    Sep 22, 2019
    Posts:
    53
    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?
     
    Ziplock9000 likes this.
  29. LukeFireproof

    LukeFireproof

    Joined:
    Jan 21, 2016
    Posts:
    13
    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>";
     
    SassyPantsy likes this.
  30. DenVAleC

    DenVAleC

    Joined:
    Jan 16, 2022
    Posts:
    1
    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
    2022-08-12_02-27-59.png

    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.
    2022-08-12_02-29-39.png
    The Text component doesn't seem to require any special modifications.

    And here's the result in-game!
    upload_2022-8-12_2-49-21.png

    Another test. Text is now "Pizza", and Padding is set to 5. Nothing else modified.
    upload_2022-8-12_2-49-9.png

    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 :)
     
  31. josue16

    josue16

    Joined:
    Apr 24, 2017
    Posts:
    7
    Excellent !
     
  32. Nyankoooo

    Nyankoooo

    Joined:
    May 21, 2016
    Posts:
    144
    This obviously only works when the whole text should have a background instead of only parts of it.
     
  33. SassyPantsy

    SassyPantsy

    Joined:
    May 17, 2020
    Posts:
    142

    Same. Looks like it was patched out for some reason
     
  34. SassyPantsy

    SassyPantsy

    Joined:
    May 17, 2020
    Posts:
    142

    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.
     
  35. Raseru

    Raseru

    Joined:
    Oct 4, 2013
    Posts:
    87
    For people struggling with the original <mark> solution and not seeing any of the text, this is likely because you are using the 6 digit hex code, mark takes 8, last 2 being the alpha, if you don't provide it, it'll be 100%, so black could be <mark=#0000002b>Test</mark>, but you still run into the issue with it being rendered on top of the text, so you would need to play with the alpha.
     
  36. JesterUITech

    JesterUITech

    Joined:
    May 5, 2023
    Posts:
    1
    If you want to have the mark appear behind your text one thing I've noticed is that you have to target a different font in your style tags. This will append a new font mesh after the mark background has been applied. If you try to use the same font it won't work.
    The best way to think of all of this is in terms of render layers, each new step creating a new layer on top of the last. If you try to use a <font> tag to use the same font as what you have set in the base text component, TMP sees that the mesh for that font already exists and doesn't add anything new.
    • Base Layer (bottom layer)
    • <mark> tag
    • <font> tag targeting different font (top layer)
    This would read in line something like
    "Here is some text that I want <mark=#ffff0080><font="Helvetica">Highlighted</font></mark> !"

    And as long as your base font wasn't also "Helvetica" you would see the word "Highlighted" in front of a yellow background with 50% alpha.
    I imagine that if you had two different font source files with the same font you would be able to get around having to see a different font for the highlighted text I haven't tested that myself though.

    This sort of thing works best for when you're trying to highlight something in-line. If you're just trying to have a background behind text, look into having a content size fitter background. You will have a lot easier of a time and not have to deal with multiple fonts.
     
  37. MUGIK

    MUGIK

    Joined:
    Jul 2, 2015
    Posts:
    482
    Hi, can we have an update on this?
    Or could you please just add another tag, something like <bgmark> (background mark)? Because I see use for both marking behaviors, sometimes you want it on top, sometimes on the background.
    Also, having the option to control margins of the highlight using tag attributes would be awesome.

    The hack with <font> requires managing 2 separate TMP_FontAssets per font which is cumbersome.

    UPD
    While investigating the source code of TextMeshPro I found out that <mark> tag has an undocumented `padding="left,right,top,bot"` attribute.
     
    Last edited: Dec 18, 2023
  38. MUGIK

    MUGIK

    Joined:
    Jul 2, 2015
    Posts:
    482
    I was able to make it work by modifying TextMeshPro source code. Kinda successful. It was no fun.
    upload_2023-12-19_17-41-48.png

    upload_2023-12-19_17-41-59.png

    The remaining problems are:
    - last character in each line is missing
    - the last character in the whole sentence is drawn under highlight.

    I achieved this effect by moving highlight triangles to the beginning of the mesh data, so they are drawn first.

    UPD
    I deleted the original code snippets. Look for the next post
     
    Last edited: Dec 19, 2023
  39. MUGIK

    MUGIK

    Joined:
    Jul 2, 2015
    Posts:
    482
    Ok, I managed to fix these issues and improve performance.

    upload_2023-12-19_20-54-2.png

    Was quite sad to find out that TMPro package has not been updated since 2021. No hope for this feature to be officially supported:(.


    TMP_MeshInfo.cs
    Code (CSharp):
    1. public void ResizeMeshInfo(int size)
    2. {
    3.   // ...
    4.             // Re-assign Normals, Tangents and Triangles
    5.             if (size <= previousSize)
    6.             {
    7.                 this.mesh.Clear(true); // Added line
    8.                 this.mesh.triangles = this.triangles;
    9.                 this.mesh.vertices = this.vertices;
    10.                 this.mesh.normals = this.normals;
    11.                 this.mesh.tangents = this.tangents;
    12.  
    13.                 return;
    14.             }
    15.   //..
    16. }


    TMP_Text.cs
    Code (CSharp):
    1. protected virtual void DrawTextHighlight(Vector3 start, Vector3 end, ref int index, Color32 highlightColor)
    2. {
    3. // ...
    4.     // Begin of added code
    5.     {
    6.         var meshInfo = m_textInfo.meshInfo[underlineMaterialIndex];
    7.         int previousSize = index / 4;
    8.         if (s_tris == null || s_tris.Length != 6)
    9.             s_tris = new int[6];
    10.         Array.Copy(meshInfo.triangles, previousSize * 6, s_tris, 0, 6);
    11.         Array.Copy(meshInfo.triangles, 0, meshInfo.triangles, 6, previousSize * 6);
    12.         Array.Copy(s_tris, 0, meshInfo.triangles, 0, 6);
    13.         meshInfo.mesh.triangles = meshInfo.triangles;
    14.     }
    15.     // End of added code
    16.  
    17.     index += 4;
    18. } // end of method DrawTextHighlight()
    19.  
    20. // Cached array to copy triangles, length 6.
    21. private static int[] s_tris;


    TMPro_UGUI_Private.cs
    Code (CSharp):
    1. protected virtual void GenerateTextMesh()
    2. {
    3. // ...
    4.     k_GenerateTextPhaseIMarker.Begin();
    5.     // Begin of added code
    6.     for (var index = 0; index < m_textInfo.meshInfo.Length; index++)
    7.     {
    8.         var mi = m_textInfo.meshInfo[index];
    9.         var tris = mi.triangles;
    10.         int quadCount = mi.vertices.Length / 4;
    11.         for (int i = 0; i < quadCount; i++)
    12.         {
    13.             int index_X4 = i * 4;
    14.             int index_X6 = i * 6;
    15.             tris[0 + index_X6] = 0 + index_X4;
    16.             tris[1 + index_X6] = 1 + index_X4;
    17.             tris[2 + index_X6] = 2 + index_X4;
    18.             tris[3 + index_X6] = 2 + index_X4;
    19.             tris[4 + index_X6] = 3 + index_X4;
    20.             tris[5 + index_X6] = 0 + index_X4;
    21.         }
    22.     }
    23.     // End of added code
    24. // ...
    25. }
     
    Bshsf_9527 likes this.
  40. Bshsf_9527

    Bshsf_9527

    Joined:
    Sep 6, 2017
    Posts:
    43
    Thank you, I tried it out and found it useful!