TextMeshPro <2, rich text label>

The article is reproduced from  https://blog.csdn.net/qq_33337811/article/details/79029739

TextMeshpro supports rich text: more supported rich text

As usual:

粗体:<b>Bold</b>
斜体:<i>Italics</i>
下划线:<u>Underline</u>
删除线:<s>Strikethrough</s>
指定颜色删除线:<s color=#ff8000>Strikethrough</s>

设定字体大小:<size=48>Point size 48</size>
设置字体相对大小:<size=+18>Point size increased by 18</size>
设置字体相对大小:<size=-18>Point size decreased by 18</size>
设置偏移距离:<pos=5.5>Characters positioned about 5.5 characters from left side.
设置颜色:<color=yellow>Yellow text</color>
设定颜色:<#00ff00>Green text</color>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Effect: 

other:

1. Superscript<sup>Superscript</sup>

Such as: 
x<sup>2</sup>+y<sup>2</sup> = 1

2. Subscript<sub>Superscript</sub>

Such as: 
H<sub>2</sub>+O<sub>2</sub>=H<sub>2</sub>O

3. Shadow accents :<mark=#ffff0040>Highlighting</mark>

Such as: 
HIA<mark=#ffff0040>Highlighting</mark>HI

4. Text alignment
The text is globally aligned to the right, and the alignment can also be rewritten using a rich text label. You can use end alignment.

<align="right">Right 
<align="center">Center 
<align="left">Left 
<align=justified>在左边和右边的边缘都是齐平的。使用得当,合理的类型可以看起来干净和优雅。 

Switching alignment.

5. Color ( </color>end, one-to-one correspondence with the previous color)

1/ Color name <color="colorName"> 
Support: black, blue, green, orange, purple, red, white, and yellow.

2/ Use hexadecimal to represent the color:

<color=#005500>
  • 1

3/ only change the alpha

<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 <alpha=#66>66 <alpha=#44>44 <alpha=#22>22 <alpha=#00>00
  • 1
  • 2

Alpha from 100% to 0%.

6. Character spacing

    <cspace=1em>  </cspace>
    <mspace=2em> </mspace> 变为单间隔
  • 1
  • 2

Such as:

    <cspace=1em>Spacing</cspace> is just as important as <cspace=-0.5em>timing.
  • 1

Character spacing.

7. Upper and lower case

    <allcaps>all caps</allcaps> 变为大写
    <smallcaps> 小写变为大写,但是字的大小还是小写大小
  • 1
  • 2

8. Row Height

    <line-height=75> </line-height>
  • 1

9. Font size

    <size=75%> <size=1.5em> </size>
  • 1

10. Custom style

    <style="Title">Styles</style>
  • 1

The characters in the middle will not be affected by the FontStyle option of the panel, set it in the Style Sheet, right-click to create a new one, and then select him in the DefaultStyleSheet in TMP Settings

11. Horizontal margin (assignable pixel px, font unit em, percentage %)

    margin 行左右都留空(e.g.<margin=5%>)
     margin-left
    margin-right
  • 1
  • 2
  • 3

Such as:

    Our margins used to be very wide.
    <margin=5em>But those days are long gone.
  • 1
  • 2

12. Line indentation 
The indent effect is similar to pos, but this effect continues throughout each line. 
You can use it to create layouts, such as using bullet points. Indentation can be left blank for diagrams. You can use pixels, font units, or percentages.

1. <indent=15%>It is useful for things like bullet points.</indent>
2. <indent=15%>It is handy.
  • 1
  • 2

Using indentation to make a list.

**13. Hyperlink**Link

    <link="ID">my link</link>  ID要唯一
  • 1

14. Fonts 
can make individual characters use other fonts

    <font="Anton SDF" material="Anton SDF - Drop Shadow">multiple fonts</font>
  • 1

15. Mixed arrangement of pictures and texts

    <sprite=1> 赋值图的id,可在资源的SpriteList中查看;在TMP Settings的DefaultSpriteAsset中指定。
  • 1

After entering this expression, a sub-object will be automatically generated to display the expression (if there is none)


Tips:

1/ You can add \u00AD between English words to connect the front and back parts of a word, but the hyphen symbol will be displayed when the end of the line cannot be displayed. 
2/ maxVisibleCharacters in TMP_Text can dynamically set the number of visible characters, which can be used for a typewriter-like effect. 
3/ The typewriter effect is to control the maximum number of visible characters as above. If you want to display the console log output style, this should be the first line appearing at the bottom, and then the new line appears on the top, you only need to select the first line on the right in Alignment. All three are aligned at the bottom. 
4/ Set the text content in the code: 
TextMeshPro.SetText(str, arg);


Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325728364&siteId=291194637
Recommended