Text Markup

Adding text to Dreams? We have a bunch of specialised terms you can use to modify the text in specific ways, or give you access to extra icons.

Icons / Emojis#

To add icons in text gadgets, just type the name of the icon between < and > symbols. A full list of these icons and their names can be found here on indreams.

To add emojis, you can use the emoji shortcodes. These are words contained between two : symbols. You can find a list of emoji shortcodes here(opens in new tab), but note that not all of these are available! Some aren't in our emoji set, and others may be restricted for moderation purposes.

A video showcasing the new font markup options.

Style Tags#

There are a number of tags in Dreams which can be placed around or before text for specific colours and line break styles.

These ones alter the colour of a given bit of text:

  • <clue> makes the text colour pink.
  • <term> makes the text colour yellow.
  • <pink> makes the text colour pink (yes, another pink, a slightly different one, don't ask why).

To use the above, put the tag before the piece of text you want to change colour, and add a closing tag where you want the colour to go back to normal. A closing tag is the same thing, but with a / symbol after the opening bracket.

For example:

  • This text is normal. <pink> This text is pink </pink> and then this text is back to normal again.

These two give you slightly different styles of linebreak:

  • <nl> - gives you a new line without space between the lines.
  • <br> - gives you a new line with space, like a normal Enter keypress would.

To use the above, simply put them where you want them in the text. There's no need for a closing tag.

  • Use a new line tag <nl> like this.

Custom Colours#

In Create TLC Part #5, we introduced custom font colours. This lets you use HTML codes or hexadecimal values to define the colour or even the opacity of your text.

This is a similar markup format where you add tags into your text. Note that it currently only works within text gadgets, and not in the wider Dreamiverse (e.g. creation titles, descriptions, comments, etc). There are three formats you can use for this.

Firstly, by using quotation marks around a colour name, you can choose one of a number of predefined colours based on that name. These are the accepted HTML Colour Names which you can find a list of here(opens in new tab).

  • <colour="DarkRed"> This text will show up in dark red </colour> and this text will be the default colour.

Secondly, you can define a colour with a # symbol followed by a hexadecimal colour value. Many online tools (example 1(opens in new tab), example 2(opens in new tab)) will give you these values directly. The thing to remember is that each two characters represents a separate colour channel: the first two are the amount of red, the second two are the amount of green, and the final two are the amount of blue. These are hexadecimal values, so instead of 0-9, the value ranges from 0-F, where after you hit 9, the value switches to A, then B, and so on up until a maximum value of F. So a value of 00 means none of that colour is mixed in, while a value of ff means that a full amount of that colour is mixed in.

  • <colour=#00ff00>This text will show up in bright green </colour> and this text will be the default colour.

Finally, using the same format mentioned in the previous point, you can optionally add two extra digits on the end which control the alpha of the colour, which is to do with how transparent it is. If this is 00 your text will be fully invisible, if it's ff then your colour will be fully opaque. Values in between will have varying levels of opacity.

  • <colour=#00ffff60> This text will show up in cyan, and be slightly transparent </colour> while this text will be the default colour.

Note that in all of the above examples, you can substitute the word "colour" for the US spelling "color" if you prefer.

Custom Sizes#

Also in Create TLC Part #5, we introduced font sizing, allowing you to change the size of specific parts of text within a single string. Again, it only currently works within text gadgets, not the wider Dreamiverse.

  • This text is normal sized, while <size=60> this text is big </size> and also <size=10> this text is small </size>.

Using the size=number notation, you can specify a size for all the text between the start and end tags. The number value must be a whole number between 1 and 512. Anything above 512 will be limited to 512. The default size value is 32, so you can make a bit of text up to 32x smaller if you go all the way down to 1, or up to 16x bigger if you go all the way up to 512.

The Dreams User Guide is a work-in-progress. Keep an eye out for updates as we add more learning resources and articles over time.