DriveWorks Solo 15: How To: Correctly Format Text [send feedback...]

Text Formatting

DriveWorks supports the use of formatting tags in the following areas:

  • The Text property of a label control.
  • The Tooltip Text property of all controls.

To achieve the above example, prior to DriveWorks 10, multiple label controls would have to be placed next to each other. Each would have to be formatted individually using a mixture of existing control properties.

This can now be done in a single Label control.

The supported tags used for formatting label text are as follows:

  • b - defines text that is to be bold.
  • i - defines text that is to be italic.
  • u - defines text that is to be underlined.
  • color - defines text that is to be a specific color (requires the name or hexadecimal value of a color to be specified).

Label Formatting Syntax

Start Tag

To apply formatting the supported tag must be placed within the quotes of the text to display, at the point the formatting is to start and within square [] brackets.

  • Bold tag - [b]
  • Italic tag - [i]
  • Underline tag - [u]

End Tag

An End Tag is only required if the formatting is to end before the end of the text to display. If no End Tag is specified all text from the point at which the Start Tag is placed will be formatted.

An End Tag begins with the forward slash /, followed by the tag all within square brackets [].

  • Bold end tag - [/b]
  • Italic end tag - [/i]
  • Underline end tag - [/u]

Color Start Tag and Color End Tag

The color tag syntax is essentially the same as the above examples, the only difference being the Start Tag only will contain the color to apply to the formatted text, as below.

Start Tag [color green] - End Tag [/color]

Transparency

Transparency is supported for the [color] format tag.

This can be specified by setting an additional two hex characters before the hex color code, for example:

For the tag [color #22000000] - the “22” will apply an almost transparent black color to the text.

There is also support for setting a hex color using the shortened hex code, which is the three character version so #FFFFFF will be #FFF.

The three character version also supports transparency through the addition of one extra character before the color code, for example:

[color #22000000] is equivalent to [color #2000]

Unfortunately not all web browsers support transparency. IE7 and IE8 will not support transparency as they require certain CSS properties to be set that would affect text wrapping in the Label. In order to still provide text wrapping the decision was made to not support IE7 and IE8. If a transparency is added into the color tag when in one of these browsers the transparency part will be ignored and the color will be applied as normal.

Examples

Text Property ValueResultNotes
"I am some text"I am some textNo Formatting applied, the displayed text will use the formatting applied in the Font and Text Color properties.
"I am [b]some text[/b]"I am some textBold start and end tags around the words "some text" applies bold formatting.
"I am [i]some text[/i]"I am some textItalic start and end tags around the words "some text" applies italic formatting.
"I am [u]some text[/u]"I am some textUnderline start and end tags around the words "some text" applies underline formatting.
"I am [color red]some text[/color]"I am some textColor start and end tags around the words "some text" applies color (red) formatting.
"I am [color #FF0000]some text[/color]"I am some textColor start and end tags around the words "some text" applies color (#FF00000 - red) formatting.
"[b] I am some text."I am some text.Bold start tag only (no end tag) applies bold formatting.
"I am [b]some text."I am some text.Bold start tag only (no end tag) applies bold formatting after the words "I am".
"I [i]am a [b]longer piece of text."I am a longer piece of text.

Italic start tag only (no end tag) applies italic formatting after the word "I".

Bold start tag only (no end tag) applies bold formatting after the words "I am a".

"I [i]am a [b]longer[/i] piece of text."I am a longerpiece of text.

Italic start and end tags around the words "am a longer" applies italic formatting.

Bold start tag only (no end tag) applies bold formatting after the words "I am a".

"[u]I am a [u]longer piece[/u] of text."I am a longer piece of text.

Underline start and end tags around the words "I am a longer piece" applies italic formatting.

Underline start tag only (no end tag) applies underline formatting after the words "I am a".

This applies underline formatting to the entire string.

Escaping Tags

There may be times where the tags used to format text are actually required to be displayed as text. In these circumstances escaping tags are used.

For example you may require the text “Enter [b] for bold” to be displayed. In this case you need to escape the “[“ character in order for it to be interpreted as a square bracket and not as part of a tag.

It is important to note that the end square bracket “]” is not an escape character and therefore does not need to be escaped in order to display it as text and not as part of the tag.

Whenever two opening square brackets “[[“ are together before a tag these can interpreted as a single opening square bracket as the first one will escape (ignore) the next one.

Text Property ValueResultNotes
"[b]Hello World"Hello WorldNo escape tags applied, the displayed text will use the bold formatting.
"[[b]] Hello World"[b]] Hello WorldThe first square bracket [ escapes the bold start tag. The entire string after the escape tag will be shown without any formatting.
"[[[b]]] Hello World"[ ]] Hello World

The first two square brackets [[ are interpreted as a single square bracket as the first one escapes the next.

The Third square bracket is the bold start tag which flags that bold formatting is to be applied from this point.

The Fourth square bracket ] is still part of the bold start tag, and so this is ignored for the string to be displayed.

The remaining square brackets are formatted bold and displayed in the string.

"[[[[b]]]] Hello World"[[b]]]] Hello World
"[[b] Hello World"[b] Hello World
"[b]] Hello World"] Hello World
"[[[b]Hello World[/b]]"[ Hello World]
"[[[[b]] Hello World"[[b]] Hello World

Text Wrapping Support

The default behavior of the Label is to allow text to wrap and in particular to have the ability to wrap text mid word.

For example:

Fig 1. Text wrapping in all browsers except Opera.

Fig 2. Text wrapping in Opera – with formatting.

Fig 3. Text wrapping in Opera – no formatting.

Table of Contents