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 argunments 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 | <closeallblock> | creates a block for the above closeall tag to operate in, e.g. <b><closeallblock><i>Blabla</closeall></closeallblock></b> prevents the <b> tag from being closed |
| 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 |
| 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. |
| nobr | <nobr>Text</nobr> | Prevents the contents of the tag from being broken across lines. Useful for bounded text. |
| 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 |
| 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.
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 |