Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Question How to create a colored background behind specific text

Discussion in 'UI Toolkit' started by BruceKristelijn, Oct 3, 2023.

  1. BruceKristelijn

    BruceKristelijn

    Joined:
    Apr 28, 2017
    Posts:
    92
    I have this UI Toolkit text in my game and I would love for some text to have a red background, like it is marked. After searching I found <mark> but this does not seem to work. Even with richtext enabled. Is this something that can be achieved within UI Toolkit?

    upload_2023-10-3_18-19-16.png

    Thank you!
     
  2. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    359
    Hi @BruceKristelijn, you should be able to use the
    <mark>
    tag in UI Toolkit (ref).

    Which version of Unity are you using?
    Hope this helps!
     
    BruceKristelijn likes this.
  3. BruceKristelijn

    BruceKristelijn

    Joined:
    Apr 28, 2017
    Posts:
    92

    I am on Unity 2022.3 and your color code does seem to work, I first used this color code: #00000000 which was white in TMPro. Thank you so much!
     
  4. vejab

    vejab

    Joined:
    Dec 21, 2021
    Posts:
    85
    Colored background for parts of the text has been a basic feature that has been asked for years but I think it's still not available. The mark tag is not for background color, it's for highlighting text so it appears above the text instead of below. In your case, I think your color code is wrong because you set alpha to zero so it's not visible. Try with the one in the documentation "#ffff00aa".
    If you're not satisfied with the highlighting and you require colored background, there is a hack to make it work in this thread : https://forum.unity.com/threads/text-background-color-on-some-letters.454491/
     
  5. BruceKristelijn

    BruceKristelijn

    Joined:
    Apr 28, 2017
    Posts:
    92
    Thanks I noticed the color being in front aswell. So I opted to calculate the line count and create "background" elements behind the text to giv the effect of markings