TextmeshPro Tags

Rich Text, TextMesh Pro Documentation
1 of 27
http://digitalnativestudios.com/textmeshpro/docs/rich-text/
Digital Native Studios
TextMesh Pro Documentation
Rich Text
You can use rich text tags to alter the appearance and layout of your text. These tags work like
HTML or XML tags, but have less strict syntax.
A tag looks like <tag>. Many tags operate on a scope, which you can end with </tag>. Such
scopes can be nested, and you don't have to close them in the same order that you started them.
Some tags have values and attributes, like <tag=value> and <tag attribute=value>. These
arguments are either names or numeric values. Numbers are either regular decimal numbers,
pixels like 1px, percentages like 80%, font units like 1.2em, or hexadecimal color values like #FF.
Names can be either with or without double quotes, but if there are more attributes, it's best to
use quotes.
Tags plus their attributes can be up to 128 characters long. This limitation shouldn't be an issue,
unless you're using very long string attributes.
12/29/2016 1:43 PM
2 of 27
1 Tag
Overview
Tags
align
alpha, color
Summary
Text alignment.
Color and opacity.
b, i
Bold and italic style.
font
Font and material selection.
line-height
Line height.
cspace
indent
Character spacing.
Indentation.
line-indent
Line indentation.
lowercase, uppercase, smallcaps
Capitalization.
link
margin
mspace
noparse
nobr
page
pos
size
space
sprite
s, u
style
sub, sup
voffset
width
Text metadata.
Text margins.
Monospacing.
Prevent parsing.
Non-breaking spaces.
Page break.
Horizontal caret position.
Font size.
Horizontal space.
Insert sprites.
Strikethrough and underline.
Custom styles.
Subscript and superscript.
Baseline offset.
Text width.
12/29/2016 1:43 PM
3 of 27
2 Text
Alignment
Each text object has an overall alignment, but you can override this with tags. All four horizontal
alignment options are available.
Typically, you put these tags at the start of a paragraph. If you do end up with multiply alignment
tags on the same line, the last one will win.
Successive alignment scopes don't stack. The </align> tag reverts back to the object's overall
alignment.
<align="right">Right
<align="center">Center
<align="left">Left
Switching alignment.
12/29/2016 1:43 PM
4 of 27
3 Color
You can change the color of your text in various ways. The most straightforward is to use
<color="colorName">.
and yellow.
Supported color names are black, blue, green, orange, purple, red, white,
You can also use a hexadecimal number to specify a color. Such colors are of the form #FFFFFF,
or #FFFFFFFF if you also want to define the alpha value. In this case, you can omit the color tag
name.
<color="red">Red <color=#005500>Dark Green <#0000FF>Blue

<color=#FF000088>Semitransparent Red
Colors.
If you only want to change the opacity of the text, you can use the alpha tag. It works with
hexadecimal values.
<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 <alpha=#66>66
<alpha=#44>44 <alpha=#22>22 <alpha=#00>00
Alpha from 100% to 0%.
All color adjustments are terminated with the same color tag, no matter which starting tag you
used.
<color="red">Red, <color="blue">Blue,</color> and red again.
Restoring color.
12/29/2016 1:43 PM
5 of 27
4 Bold
and Italic
You can apply bold and italic styling to your text with simple tags. The appearance of these styles
are defined by the font asset that you're using.
The quick brown fox jumps over the lazy dog.
Bold and italic.
12/29/2016 1:43 PM
6 of 27
5 Character
cspace
Spacing
allows you to adjust the character spacing, either absolute or relative to the original font.
You can use pixels or font units. Postive adjustments push the characters apart, while negative
adjustments pull them together.
The closing tag reverts back to the font's normal spacing.

<cspace=1em>Spacing</cspace> is just as important as <cspace=-0.5em>timing.
Character spacing.
12/29/2016 1:43 PM
7 of 27
6 Font
You can switch to a different font via <font="fontAssetName">. From then on until you close the
tag, the default font will be replaced by the font that you specified. You can also specify a
material to use, so you can switch between different materials for a single font. Font and material
assets must be placed inside a specifc folder, defined in the settings asset.
Font tags can be nested. Reverting to the default font can be done by closing all font tags, or by
using default as the font asset name.
Would you like <font="Impact SDF">a different font? or just <font="NotoSans"

material="NotoSans Outline">a different material?
Mixing fonts and materials.
12/29/2016 1:43 PM
8 of 27
7 Indentation
The indent tag does the same as the pos tag, but the effect persists across lines. You can use
this to create layouts like bullet points that work with word-wrapping. 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.
Using indentation to make a list.
12/29/2016 1:43 PM
9 of 27
8 Line
Height
The line-height tag gives you manual control over the line height. Use it to pull lines closer
together or push them further apart. As the line-height controls how far down the next line start,
this tag does not change the current line.
You can use pixels, font units, and percentages. Relative adjustments are based on the
line-height specified by the font asset. The closing tag reverts to this height.
Line height at 100%
<line-height=50%>Line height at 50%

<line-height=100%>Rather cozy.
<line-height=150%>Line height at 150%

Such distance!
Different line heights.
12/29/2016 1:43 PM
10 of 27
9 Line
Indentation
line-indent
inserts horizontal space directly after it, and before the start of each new line. It only
affects manual line breaks, not word-wrapped lines. You can use pixels, font units, or
percentages.
The closing tag ends the indentation of lines.

<line-indent=15%>This is the first line of this text example.
This is the second line of the same text.
Indent every new line, with one tag.
12/29/2016 1:43 PM
11 of 27
10 Text
Link
You can use <link="ID">my link</link> to add link metadata to a text segment. The link ID
should be unique to allow you to retrieve its ID and link text content when the user interacts with
your text.
You do not have to give each link a unique ID. You can reuse IDs when it makes sense, for
example when linking to the same data multiple times. The linkInfo array will contain each ID
only once.
While this link enables user interaction, it does not change the appearance of the linked text. You
have to use other tags for that.
12/29/2016 1:43 PM
12 of 27
11 Lowercase,
Uppercase, and Smallcaps
These three tags are used to alter the capitalization of your text. The lowercase and uppercase
tags work as you would expect. allcaps is an alias for uppercase.
The smallcaps tag works like uppercase, but it also decreases the size of all characters that
weren't originally uppercase.
<lowercase>Alice and Bob watched TV.</lowercase>
<uppercase>Alice and Bob watched TV.</uppercase>

<smallcaps>Alice and Bob watched TV.</smallcaps>
Modifying capitalization.
12/29/2016 1:43 PM
13 of 27
12 Margin
You can adjust the horizontal margins of the text with the margin tag. If you only want to adjust
the left or right margin, you can use the margin-left or margin-right tags. You can use pixels,
font units, and percentages.
Our margins used to be very wide.
<margin=5em>But those days are long gone.
Adjusting margins.
12/29/2016 1:43 PM
14 of 27
13 Monospacing
You can override a font's character spacing and turn it into a monospace font with the mspace tag.
This will force all characters to claim the same horizontal space. You can use pixels or font units
to set the monospace character width.
The </mspace> tag clears all monospace overrides.

Any font can become<mspace=2.75em> monospace, if you really want it.
Treating a font as monospace.
12/29/2016 1:43 PM
15 of 27
14 Noparse
Sometimes, you want to show text that will be interpreted as a tag. You could disable rich tags to
deal with this. But if you also want to use tags in the same text, you can use the noparse tag to
create a scope that isn't parsed.
Use <noparse></noparse> for bold text.
Prevent parsing of some tags.
12/29/2016 1:43 PM
16 of 27
15 Non-breaking
Spaces
If you want words to stay together and not be separated by word wrapping, you can use the nobr
tag.
You don't want I M P O R T A N T things to be broken up.
The important parts stay together.
12/29/2016 1:43 PM
17 of 27
16 Page
Break
You can use the page tag to insert page breaks in your text. This cuts the text into separate
blocks. The text object has to be set to page overflow mode for this to work.
12/29/2016 1:43 PM
18 of 27
17 Horizontal
Position
The pos tag gives you direct control over the horizontal caret position. You can put it anywhere on
the same line, regardless where it started. You can use either pixels, font units, or percentages.
This tags is best used with left alignment.
at <pos=75%>75%
at <pos=25%>25%
at <pos=50%>50%
at 0%
Setting positions.
12/29/2016 1:43 PM
19 of 27
18 Font
Size
You can adjust the font size of your text at any time. You can specify the new size in either pixels,
font units, or as a percentage. Pixel adjustments can be either absolute or relative, like +1 and -1.
All relative sizes are based on the original font size, so they're not cumulative.
<size=100%>Echo <size=80%>Echo <size=60%>Echo <size=40%>Echo

<size=20%>Echo
Adjusting size.
12/29/2016 1:43 PM
20 of 27
19 Horizontal
Space
The space tag inserts a horizontal offset, as if you inserted multiple spaces. You can use pixels or
font units.
This tag interacts with word wrapping by sticking to the words it touches. If you want them to
word-wrap separarately, put space characters around this tag.
Give me some <space=5em> space.
Adding some space.
12/29/2016 1:43 PM
21 of 27
20 Sprite
You can use the sprite tag to insert images from a sprite atlas into your text. You can access
sprites by index <sprite index=1> or by name <sprite name="spriteName">. This inserts a sprite
from the default asset.
To use a different sprite asset, use <sprite="assetName" index=1> or
<sprite="assetName" name="spriteName">. Sprite assets must be located in a specific folder,
defined by the settings asset.
If you're using a sprite index from the default sprite asset, you can use the index shorthand
<sprite=1>.
By default, sprites are not affected by the Color (Vertex) setting of the text. Adding the tint=1
attribute to the tag will tint the sprites with this color. You can also use a specific color by adding
color=#FFFFFF.
Sprites! <sprite=0> More sprites! <sprite index=3> And even more! <sprite
name="Default Sprite Asset_4" color=#55FF55FF>
Inserting sprites from the default sprite asset.
12/29/2016 1:43 PM
22 of 27
21 Strikethrough
and Underline
You can add an additional line that runs along your text. Underline draws the line slightly below
the baseline. The vertical offset is defined by the font asset. Strikethrough places it slightly above
the baseline.
The <s>quick brown</s> fox jumps over the lazy dog.
Strikethrough and underline.
12/29/2016 1:43 PM
23 of 27
22 Style
Custom styles can be accessed via the style tag. You need to specify the style name for the
opening tag, but not for the closing tag. It just closes the last opened style.
<style="Title">Styles</style>
You can create your own.
Custom styles are handy.
12/29/2016 1:43 PM
24 of 27
23 Subscript
and Superscript
The sup and sub tags allow you to layout text as superscript or subscript. Their offset and size is
defined by the font asset. This is often used in scientific notations and numbering, like 1st and
2nd.
We have 1m3 of H2O.
Subscript and superscript.
12/29/2016 1:43 PM
25 of 27
24 Vertical
voffset
Offset
gives the baseline a vertical offset. You can use pixels or font units and it's always
relative to the original baseline. The closing tag resets back to the original baseline.
The line height is adjusted to accommodate the displaced text. If you don't want that, you can
manually adjust the line height.
Up <voffset=1em>up <voffset=2em>UP</voffset> and <voffset=0.5em>down</voffset> we go again.
Vertical offset.
12/29/2016 1:43 PM
26 of 27
25 Text
Width
You can adjust the horizontal size of text area with the width tag, using either pixels, font units, or
percentages. You cannot go beyond the original size of the text object, though.
The change takes effect on the current line, but only after the tag itself. You typically place it at
the start of a paragraph.
Width adjustments override each other, and the closing tag reverts to the original width.
I remember when we had lots of space for text.
<width=60%>But those days are long gone.
Adjusting text area width.
You're using ZenMate Free.
Buy ZenMate Premium for only 6.49 with turbo speed for HD quality streaming!
12/29/2016 1:43 PM
27 of 27
12/29/2016 1:43 PM

TextmeshPro Tags

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TextmeshPro Tags

Uploaded by

Copyright:

Available Formats

Rich Text, TextMesh Pro Documentation

Digital Native Studios

TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation

Color and opacity.

Bold and italic style.

Font and material selection.

lowercase, uppercase, smallcaps

Rich Text, TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation

<color="red">Red <color=#005500>Dark Green <#0000FF>Blue

Alpha from 100% to 0%.

Rich Text, TextMesh Pro Documentation

The <i>quick brown fox</i> jumps over the <b>lazy dog</b>.

Bold and italic.

Rich Text, TextMesh Pro Documentation

The closing tag reverts back to the font's normal spacing.

Rich Text, TextMesh Pro Documentation

Would you like <font="Impact SDF">a different font?</font> or just <font="NotoSans"

Mixing fonts and materials.

Rich Text, TextMesh Pro Documentation

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

Using indentation to make a list.

Rich Text, TextMesh Pro Documentation

<line-height=50%>Line height at 50%

<line-height=150%>Line height at 150%

Different line heights.

Rich Text, TextMesh Pro Documentation

The closing tag ends the indentation of lines.

Indent every new line, with one tag.

Rich Text, TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation

Uppercase, and Smallcaps

<uppercase>Alice and Bob watched TV.</uppercase>

Rich Text, TextMesh Pro Documentation

Our margins used to be very wide.

<margin=5em>But those days are long gone.

Rich Text, TextMesh Pro Documentation

The </mspace> tag clears all monospace overrides.

Treating a font as monospace.

Rich Text, TextMesh Pro Documentation

Use <noparse><b></noparse> for <b>bold</b> text.

Prevent parsing of some tags.

Rich Text, TextMesh Pro Documentation

You don't want <nobr>I M P O R T A N T</nobr> things to be broken up.

The important parts stay together.

Rich Text, TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation

<size=100%>Echo <size=80%>Echo <size=60%>Echo <size=40%>Echo

Rich Text, TextMesh Pro Documentation

Adding some space.

Rich Text, TextMesh Pro Documentation

Inserting sprites from the default sprite asset.

Rich Text, TextMesh Pro Documentation

The <s>quick brown</s> fox jumps over <u>the lazy dog</u>.

Strikethrough and underline.

Rich Text, TextMesh Pro Documentation

Custom styles are handy.

Rich Text, TextMesh Pro Documentation

We have 1m<sup>3</sup> of H<sub>2</sub>O.

Subscript and superscript.

Rich Text, TextMesh Pro Documentation

Rich Text, TextMesh Pro Documentation