Rich Text Markup Formatting of Question Text

Updated on July 27th, 2024
7 Minute to read

Print
Share
Dark

Light

This document provides guidelines for using rich text markup to format question text in OPUS. Rich text can incorporate multiple font styles and sizes and is supported for the UI system

Rich Text Overview

Rich text allows for various styling of text within the OPUS interface. Text can be bolded, italicized, colored, resized, and more using markup tags similar to HTML.

Markup Format

Tag Usage: Enclose text in matching tags to apply styles.

Example:

We are <b>not</b> amused.

Opening and Closing Tags: The opening tag denotes the start of the styled section, and the closing tag (prefixed with /) denotes the end.

Example: <b>bold</b>

Nested Elements

Multiple Styles: Apply multiple styles by nesting tags.

Example:

 We are <b><i>definitely not</i></b> amused

Tag Parameters

Parameters: Some tags require parameters to specify details like color or size.

Example:

We are <color=green>green</color> with envy

Supported Tags

The following list describes all the styling tags supported by Unity.

Tag	Description	Example	Notes
b	Renders the text in boldface.	`We are <b>not</b> amused.`
i	Renders the text in italics.	`We are <i>usually</i> not amused.`
size	Sets the size of the text according to the parameter value, given in pixels.	`We are <size=50>largely</size> unaffected.`	Although this tag is available for Debug.Log, you will find that the line spacing in the window bar and Console looks strange if the size is set too large.
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 (transparency) values for the color. For example, cyan at full opacity would be specified by `color=#00ffffff`... You can specify hexadecimal values in uppercase or lowercase; `#FF0000` is equivalent to `#ff0000`.	`We are <color=#ff0000ff>colorfully</color> amused`	Another option is to use the name of the color. This is easier to understand but naturally, the range of colors is limited and full opacity is always assumed. `<color=cyan>some text</color>` The available color names are given in the table below.
material	This is only useful for text meshes and renders a section of text with a material specified by the parameter. The value is an index into the text mesh's array of materials as shown by the inspector.	`We are <material=2>texturally</material> amused`
quad	This is only useful for text meshes and renders an image inline with the text. It takes parameters that specify the material to use for the image, the image height in pixels, and a further four that denote a rectangular area of the image to display. Unlike the other tags, quad does not surround a piece of text and so there is no ending tag - the slash character is placed at the end of the initial tag to indicate that it is "self-closing".	`<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>`	This selects the material at position in the renderer's material array and sets the height of the image to 20 pixels. The rectangular area of image starts at given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the texture.

Supported Colors

The following table lists colors for which you can use a name instead of a hexadecimal tag in the <color> rich text tag.

Color name	Hex value	Swatch
aqua (same as cyan)	`#00ffffff`
black	`#000000ff`
blue	`#0000ffff`
brown	`#a52a2aff`
cyan (same as aqua)	`#00ffffff`
darkblue	`#0000a0ff`
fuchsia (same as magenta)	`#ff00ffff`
green	`#008000ff`
grey	`#808080ff`
lightblue	`#add8e6ff`
lime	`#00ff00ff`
magenta (same as fuchsia)	`#ff00ffff`
maroon	`#800000ff`
navy	`#000080ff`
olive	`#808000ff`
orange	`#ffa500ff`
purple	`#800080ff`
red	`#ff0000ff`
silver	`#c0c0c0ff`
teal	`#008080ff`
white	`#ffffffff`
yellow	`#ffff00ff`