This article or section is a Stub. You can help the Resonite Wiki by expanding it.
Resonite supports a variety of text formatting tags. These tags can be added to text within various Components to provide additional formatting options.
Formatting
The text formatting system for styling text is inspired by HTML but isn't intended to be strictly compatible with standard HTML. The basic idea is that a section of text can be enclosed inside a pair of matching tags. For example, the <b> tag applies bold style: Are we <b>not</b> men? This would result in: Are we not men?
As the example shows, the tags are just pieces of text inside the angle brackets < and >.
Place the opening tag at the beginning of the section. The text inside the tag denotes its name (which in the example is just b). Place another tag at the end of the section. This is the closing tag. It has the same name as the opening tag, but the name is prefixed with a slash / character. Every opening tag must have a corresponding closing tag. If you don't close an opening tag, it's okay: the style continues to the end of the text.
The tags are not displayed to the user directly but are interpreted as instructions for styling the text they enclose.
Parameters
Some tags have a simple all-or-nothing effect on the text but others might allow for variations. For example, the color tag needs to know which color to apply. Information like this is added to tags by the use of parameters. For example: We are <color=green>Devo</color>..
Note that the ending tag doesn't include the parameter value.
Tag parameters cannot include extra characters. For example, this: We are <color =green>Devo</color>. does not work because of the space before the = character.
Quirks
- Unlike HTML, tags don't necesarily have to fully encapsulate one another, so writing
<b>bold text<i>bold italic text</b>italic text</i>is totally fine.
- All tags can have trailing spacebars meaning that writing a tag such as
<b >Bold Text</b>is totally fine.
- For parameters, instead of writing an equal sign it's possible to use a space bar so writing
<color red>Red Text</color>is totally fine.
- Tags that don't accept parameters can still have the parameter separator (=) and still parse so writing
<b=>Bold Text</b>is totally fine.
Tag List
| Tag | Example | Description |
|---|---|---|
| align | <align=left>Text</align> | Sets text alignment. Valid arguments are left, right, center and justify. |
| allcaps | <allcaps>Text</allcaps> | Renders lowercase characters as small uppercase characters. Same as the smallcaps tag. |
| alpha | <alpha=#80>Text</alpha> | Renders text with a specific transparency level (#FF is fully opaque, and #00 is fully transparent). Because of a bug alpha can accept color names like this <alpha=red>Text</alpha>. |
| b | <b>Text</b> | Shows text in boldface. |
| br | <br> | Inserts a line break into the text. |
| closeall | </closeall> | Closes all format specifiers that came before this tag. |
| closeallblock | <b><closeallblock><i>Text</closeall></closeallblock></b> | Creates a block for the above </closeall> tag to operate in. As shown in the example, prevents the <b> tag from being closed until explicitly closed with </b>. |
| color | <color=#FF0000>Text</color> | Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format: #rrggbbaa where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (optional) values for the color. For example, cyan at full opacity would be specified by color=#00ffffff. You can specify hexadecimal values in short form; #FF0000 is equivalent to #F00. You may also use the names of colors, such as red, green, blue and so on. A list of all valid colors can be found in the Color Names section. |
| font | <font="Font Name">Font (by name)</font> OR <font=1>Font (by index)</font> | Renders the text with a specific font, specified either by index or by name. This requires the usage of a FontCollection component. |
| glyph | <glyph name="test"> | Renders a Sprite. Same as the sprite tag. Sprites insert an image into text, they ignore colors. This requires both FontChain & DynamicSpriteFont Components. Sprites in Resonite use a SpriteURL which is a direct link to the image and the Sprite Name. To prevent content from breaking in case your link breaks. It's recommended to use images you Know will not expire, like saving the image to your inventory where you can keep it safe. Example of using a sprite would be <sprite name=baguette> -- You can customize their position & separation using DynamicSpriteFont. This can be changed per sprite. |
| gradient | <gradient=#F00,#00F>Text</gradient> | The gradient tag does not do anything, but it exists in the code and parses correctly when written in game. Presumably it would have created a horizontal gradient over the text, using the specified color values. |
| i | <i>Text</i> | Shows text in italics. |
| line-height | <line-height=200%>Line Height</line-height> | Changes the line height of the text by the specified percentage (200% means the line height will be twice as large). |
| lowercase | <lowercase>Text</lowercase> | Forces all characters to be lowercase |
| mark | <mark=#ffff00aa></mark> | Used to highlight text in an RGBA hex color. Hex codes can be written in short form, if the alpha values are omitted the default value will be 25% alpha. |
| nobr | <nobr>Text</nobr> | Prevents automatic line breaks from being inserted. This can be useful if you want words to stay together and not be separated by word wrapping. |
| noparse | <noparse>Text</noparse> OR <noparse=4>Text | Prevents the contents of the tag from being parsed as rich text. Alternatively instead of a closing tag a number can be specified inside of the opening tag which will prevent the N next characters from being parsed. |
| s | <s>Text</s> | Shows text with a line through it, also known as strikethough. |
| size | <size=16>Text</size> OR <size=80%>Text</size> | Sets the size of the text. It's recommended to use the relative version of this tag, as the absolute units can be vastly different when applied in physical ui (TextRenderer component) and UIX canvases (Text component). |
| smallcaps | <smallcaps>Text</smallcaps> | Same as the allcaps tag. |
| sprite | <sprite name="test"> | Same as the glyph tag. |
| sub | <sub>Text</sub> | Displays the text in subscript |
| sup | <sup>Text</sup> | Displays the text in superscript |
| u | <u>Text</u> | Shows text with a line beneath it, also known as underline. |
| uppercase | <uppercase>Text</uppercase> | Forces all characters to be uppercase. |
Color Names
The color tag (and alpha tag) can accept colors by name, the list of allowed color names and their values is as follows:
| Name | Value | Color |
|---|---|---|
| clear | rgba(0,0,0,0) | |
| white | rgb(1,1,1) | |
| gray | rgb(0.5,0.5,0.5) | |
| black | rgb(0,0,0) | |
| red | rgb(1,0,0) | |
| green | rgb(0,1,0) | |
| blue | rgb(0,0,1) | |
| yellow | rgb(1,1,0) | |
| cyan | rgb(0,1,1) | |
| magenta | rgb(1,0,1) | |
| orange | rgb(1,0.5,0) | |
| purple | rgb(0.5,0,1) | |
| lime | rgb(0.75,1,0) | |
| pink | rgb(1,0,0.5) | |
| brown | rgb(0.25,0,0) |
Additionally it is possible to use the Branding colors. These colors can also be found in the PlatformColorPalette component.
A list of all possible values using this method is listed here:
| Name | Hex Code | Color |
|---|---|---|
| neutrals.dark | #11151d | |
| neutrals.mid | #2b2f35 | |
| neutrals.light | #4a4a4d | |
| hero.yellow | #f8f770 | |
| hero.green | #59eb5c | |
| hero.red | #ff7676 | |
| hero.purple | #ba64f2 | |
| hero.cyan | #61d1fa | |
| hero.orange | #e69e50 | |
| sub.yellow | #484a2c | |
| sub.green | #24512c | |
| sub.red | #5d323a | |
| sub.purple | #492f64 | |
| sub.cyan | #284c5d | |
| sub.orange | #48392a | |
| dark.yellow | #2b2e26 | |
| dark.green | #192d24 | |
| dark.red | #1a1318 | |
| dark.purple | #241e35 | |
| dark.cyan | #1a2a36 | |
| dark.orange | #292423 |
Format Strings
Format strings are a string of characters you can use in certain components and protoflux nodes to format values (like float or DateTime) as strings in different ways. The syntax for the format strings is from the .NET formatString component. The output is also determined by your locale/language, which means the output of the formatting could be different locally for each user, depending on their language setting.
Consider provide explicit locale if you do not like that behavior: decimal point and digit group separator may change per it!
Components
Protoflux Nodes
Format Strings Syntax
Standard Numeric Format Strings
| Specifier | Name | Description | Example Input | Example Output |
|---|---|---|---|---|
| "C" or "c" | Currency | Result: A currency value.
Supported by: All numeric types. Precision specifier: Number of decimal digits. |
|
$20.50 |
|
$20.501 | |||
| "D" or "d" | Decimal | Result: Integer digits with optional negative sign.
Supported by: Integral types only. Precision specifier: Minimum number of digits. Default precision specifier: Minimum number of digits required |
|
1234 |
|
-001234 | |||
| "E" or "e" | Exponential (scientific) | Result: Exponential notation.
Supported by: All numeric types. Precision specifier: Number of decimal digits. Default precision specifier: 6. |
|
1.052033E+003 |
|
-1.05e+003 | |||
| "F" or "f" | Fixed-point | Result: Integral and decimal digits with optional negative sign.
Supported by: All numeric types. Precision specifier: Number of decimal digits. Default precision specifier: Defined by NumberFormatInfo.NumberDecimalDigits. Usually 2. |
|
1234.57 |
|
1234.0 | |||
| "G" or "g" | General | Result: The more compact of either fixed-point or scientific notation.
Supported by: All numeric types. Precision specifier: Number of significant digits. Default precision specifier: Depends on numeric type. |
|
0.01 |
|
2e+02 | |||
| "N" or "n" | number | The numeric ("N") format specifier converts a number to a string of the form "-d,ddd,ddd.ddd…", where "-" indicates a negative number symbol if required, "d" indicates a digit (0-9), "," indicates a group separator, and "." indicates a decimal point symbol.
Supported by: All numeric types. Precision specifier: Desired number of decimal places. Default precision specifier: Defined by NumberFormatInfo.NumberDecimalDigits. Usually 2. |
|
12,345.00 |
|
4,567.2 | |||
| "P" or "p" | Percent | Result: Number multiplied by 100 and displayed with a percent symbol.
Supported by: All numeric types. Precision specifier: Desired number of decimal places. |
|
45.10% |
|
98% | |||
|
22.2% | |||
| "R" or "r" | Round-trip | The round-trip ("R") format specifier attempts to ensure that a numeric value that is converted to a string is parsed back into the same numeric value. This format is supported only for the float and double types in Resonite. It is recommended to use the "G" specifier instead. |
|
2345.001 |
|
123456789.123 | |||
| "X" or "x" | Hexadecimal | Result: A hexadecimal string.
Supported by: Integral types only. Precision specifier: Number of digits in the result string. Capitalization of the 'x' affects the capitalization of non-digit hex characters. |
|
7b |
|
7B | |||
|
001F |
Custom Numeric Format Strings
These format strings give you a way to customize how a value is formatted as a string, instead of the preset standard ones from the previous table.
| Specifier | Name | Description | Example Input | Example Output |
|---|---|---|---|---|
| "0" | Zero placeholder | Replaces the zero with the corresponding digit if one is present; otherwise, zero appears in the result string. |
|
1234 |
|
01234.1 | |||
| "#" | Digit placeholder | Replaces the "#" symbol with the corresponding digit if one is present; otherwise, no digit appears in the result string.
Note that no digit appears in the result string if the corresponding digit in the input string is a non-significant 0. For example, 0003 with format |
|
1235 |
|
.37 | |||
| "." | Decimal point | Determines the location of the decimal separator in the result string. | Shown in other examples |