Text

Introduction

Text objects have a Text property which controls the displayed text. By default this value is set to "Hello".

Changing Text

The Text property can be changed in the multi-line edit window.

Text will wrap according to the Text object's Width.

The enter key can be used to add new lines to text.

Text Wrapping

Text instances can optionally wrap their text based on width units. By default Text instances use a Width Units of Relative to Children which means the text does not wrap.

This Width Units results in the Text automatically resizing itself in response to its Text variable, resulting in no wrapping.

Any other Width Unit can be used to make the text wrap. For example, setting Width Units to Absolute and changing Width results in wrapping.

For a deeper dive into Width Units, see the Width Units page.

Using BBCode for Inline Styling

Gum text supports inline styling using BBCode-like syntax. To add inline styling, surround text with variable assignment tags as shown in the following screenshot:

The following table shows the available variables that can be used for inline styling:

Note that changing Font and FontSize results in new Fonts created in the Font Cache.

BBCode can span multiple lines, whether the newlines happen due to line wrapping or through the addition of newlines in the text.

Multiple tags can overlap each other allowing you to combine tags for a single piece of text. For example, the following sets text to both bold and orange:

This is [Color=Orange][IsBold=true]bold and orange[/Color][/IsBold] text.

Styles can contain other styles as many levels deep as necessary.

This [Color=Orange]is orange, [IsBold=true]bold[/IsBold], and [IsItalic=true]italic[/IsItalic][/Color] text.    

BBCode Color and Alpha

Color values can be specified using named colors or individual Red, Green, and Blue values.

Color values can be specified using any of the standard XNA color values, as listed here: https://docs.monogame.net/api/Microsoft.Xna.Framework.Color.html

If you need precise color values, then you should use the individual Red, Green, and Blue values.

Keep in mind that if a color value is not specified, then the default for that Text instance is used.

For example, a Text's Red may have Red, Green, Blue values of 255, 0, 0 as shown in the following image:

If its Green value is set in BBCode, the green value from BBCode overrides the Green variable value, but the Red and Blue values from its variables persist. BBCode values are applied after all variables.

Similarly, if a Color tag is used, then the BBCode color specified overrides all color variable values. This includes Red, Green, Blue, and Alpha. The following image is a yellow text with an Alpha value of 15, resulting in text that is almost completely transparent:

By specifying a Color value in BBCode, the Alpha value is also overwritten, as shown in the following image:

To preserve alpha, the individual Red, Green, and Blue values must be specified.