SDG Blog

"Remember to put a witty tagline here!" – 2022 edition.

Advanced Signage – Rich Text

With the 3.20.6.0 update on July 10, 2020, we upgraded the text meshes to use TextMesh Pro. They look nicer and offer better performance, and apply to the vanilla flags, placards, and signs. Additionally, they come with a handful of new features for sign enthusiasts to enjoy.

RGBA colors

From left to right: all predefined colors, alpha from 100% to 0%, and color and alpha combined.

Relevant tags: <color>, <alpha>

The simplest way to change color is to use a predefined color name, with <color="colorName">. The predefined colors are case-sensitive: black, blue, green, orange, purple, red, white, yellow. For other colors, a hexadecimal number should be specified in the form of <color="#FFFFFF">.

Opacity can be changed with <alpha=#FF>, and is also based on hexadecimal values.

To use both with a single tag, <color="#FFFFFFFF"> can be used, with the last two digits being reserved for the alpha value. This reduces the amount of characters used up on formatting, as signs and such have a character limit.

Visual distinction

Relevant tags: <b>, <i>, <s>, <u>, <style>, <mark>

Text can be emphasized (bolded) with <b>, italicized with <i>, struck-through (strikethrough) with <s>, and underlined with <u>.

The <style=styleName> tag can be used to efficiently set text to a predefined visual format. Predefined styles are case-sensitive: Title, H1, H2, H3, C1, C2, C3, Quote, Link. Style tags persist between lines and aren’t consistently overwritten by other styles, so it’s often necessary to close them off with </style>.

Text can be marked over (highlighted), with the <mark=FFFFFFFF> tag, with the last two digits being reserved for the alpha value of the mark. As an example, <mark=#FF00FF88>Some Text</mark>.

Capitalization and typeface anatomy

Left: demonstration of lowercase, uppercase, and smallcaps. Right: demonstration of subscript and superscript.

Relevant tags: lowercase, uppercase, allcaps, smallcaps, sub, sup

The capitalization of text can be altered via one of three tags. However, due to the character limit, it is often more efficient to manually assign capitalization rather than use a tag.

lowercase and uppercase are rather self-explanatory, with allcaps being an alias for uppercase.

The third unique option is smallcaps, which makes everything capitalized but reduces the size of text that was not already capitalized beforehand.

Line and paragraph typography

Relevant tags: align, line-height, line-indent, pos, indent, width, margin, margin-left, margin-right

Default text alignment can be overridden by the <align> tag. All four basic types of horizontal alignment are valid: left, center, right, justified.

The <line-height> tag can be used to manually adjust the line height (how much space is between the current and following line)—with values being in pixels (px), ems (em), or percentages (%). Lines can be closer together, or farther apart.

The <line-indent> tag specifies an indentation for the start of each new line—with values being in pixels (px), ems (em), or percentages (%). It does not affect word-wrapped lines.

<pos> allows for the adjusting of the horizontal position—with values being in pixels (px), ems (em), or percentages (%). It can be put anywhere on a line, and will only affect the text that comes after it. It does not persist across lines, and is best used with a left alignment for an easier reference point.

The <indent> tag functions the same as the <pos> tag, but persists across multiple lines (including word-wrapped lines)—with values being in pixels (px), ems (em), or percentages (%).

The horizontal width of the text area can be adjusted with the <width> tag—with values being in pixels (px), ems (em), or percentages (%). The size is adjusted from the right side alignment, going inwards. The horizontal width cannot be larger than the original size of the text object.

Adjust horizontal margins of the text with the <margin> tag—with values being in pixels (px), ems (em), or percentages (%). The tag adjusts from both sides of the text object. To only adjust from the left or the right, you can use the <margin-left> or <margin-right> tags.

Spacing

From left to right: usage of monospacing, demonstration of character spacing and horizontal space, and usage of non-breaking spaces.

Relevant tags: space, cspace, mspace, nobr

Insert a specifiable amount of horizontal space via <space=value>, using pixels (px) or ems (em) as unit values.

Use <cspace> to adjust the character spacing, using pixels (px) or ems (em) as unit values. Positive values push characters farther apart, and negative values bring them closer together.

Override the default character spacing to be a monospace font with the <mspace> tag, using pixels (px) or ems (em) as unit values.

Prevent words from getting separated by word-wrapping by using the <nobr> tag to forcefully insert non-breaking spaces.

Other tags

Relevant tag: noparse

Disable rich text with <noparse> in order to display text that would otherwise be interpreted as a tag.

Both <page> and <link> are currently supported as tags, but have no functionality when it comes to vanilla assets. Page breaks will not occur, and it is not possible for players to create a clickable link.

Some common tags—such as font, size, and voffset—are outright disabled and cannot be used. Such tags are disabled due to their abusability.

Categories