Search Unity

Text background color on some letters

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Boi, Feb 3, 2017.

  1. Boi

    Boi

    Joined:
    Apr 10, 2010
    Posts:
    65
    Hi,

    I have a Text(Script) component the following text:
    "My name is <b>Boi</b>."
    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).

    Thanks for any usefull tips.

    Regards,

    Boi
     
  2. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,624
    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.

    hope that helps.
     
  3. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Are you looking for something like the <mark> tag in TextMesh Pro?



    As per the link above, the <mark> 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.
     
  4. Boi

    Boi

    Joined:
    Apr 10, 2010
    Posts:
    65

    Thank you for your answer. Unfortunately, I want to highlight some words. Not all of them.
     
  5. Boi

    Boi

    Joined:
    Apr 10, 2010
    Posts:
    65
    @Stephan-B, I am aware of the TextMeshPro asset. Thanks anyway.
     
  6. Boi

    Boi

    Joined:
    Apr 10, 2010
    Posts:
    65
    @Stephan-B, also TextMeshPro seems to overlay a rect with color. I want the rect to be behind the text.
     
  7. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    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</mark>."



    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 <font> 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.
     
  8. Boi

    Boi

    Joined:
    Apr 10, 2010
    Posts:
    65

    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. <b>Nice to meet you.</b> 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.
     
  9. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Short answer: Yes



    Just like Underline and Strikethrough which can span multiple lines, the <mark> 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 <b>high\u00adlighted</b> <sprite="Sprite Icons" index=7></mark>.

    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.
     
    Last edited: Feb 8, 2017
  10. Anflo

    Anflo

    Joined:
    Dec 3, 2014
    Posts:
    17
    Sorry but where do you get the value "<font="NotoSans SDF">" what if I have my own font created?
     
  11. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,168
    The NotoSans SDF is just a font asset that I created from the NotoSans.otf font using the Font Asset Creator in TextMesh Pro.

    This <font="Font Asset Name"> is the font tag itself that allows to use multiple fonts per text object. See the font tag information here.
     
  12. clever

    clever

    Joined:
    Oct 11, 2012
    Posts:
    35
    I wonder, did you find a better way than the workaround? because if the text starts with the highlighted part it doesn't work
     
  13. Hubi_C

    Hubi_C

    Joined:
    Mar 14, 2018
    Posts:
    10
    I'm also interested in an alternative solution. Are there any updates regarding this issue?
     
  14. Antoniusaft

    Antoniusaft

    Joined:
    Feb 28, 2013
    Posts:
    1
    I second that
     
  15. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,168
    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.
     
  16. Tknoguyfication

    Tknoguyfication

    Joined:
    Nov 11, 2013
    Posts:
    3
    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?

     
  17. RodolfoMorgan

    RodolfoMorgan

    Joined:
    May 3, 2019
    Posts:
    2