BBCode-Inspired Text Formatting Markup
- 5 minutes to read
Multiple DevExpress controls support the Bulletin Board Code (BBCode) markup. You can use this markup to define hyperlinks and apply text formatting such as font family, size, style, and color.
This topic lists markup syntax rules, available tags, and supported controls and their related API.
Markup Syntax
Enclose text fragments within opening and closing markup tags as follows: [TAG]text[/TAG].
The following example applies the bold formatting attribute to a text range:
[B]Dev[/B]Express
You can apply multiple formatting attributes to the same text range:
[URL=https://www.devexpress.com][B]Dev[/B][COLOR=orange]Express[/COLOR][/URL]
Tip
Tag names are case-insensitive. You can use uppercase and lowercase letters in any combination.
Markup Tags
Basic Formatting: B | I | U | S
Basic formatting tags allow you to apply bold, italic, underlined, and strikethrough attributes to a text range:
[B]Dev[/B][U][I]Express[/I][/U]
Font Attributes: FONT | SIZE
Font attribute tags allow you to change typeface and size of the font used to display the target text range:
[SIZE=12]Dev[/SIZE][FONT=Times New Roman]Express[/FONT]
To change font and background colors, use COLOR and BACKCOLOR tags.
Color Formatting: BACKCOLOR | COLOR
BACKCOLOR and COLOR tags allow you to change the background and font colors of the target text range.
You can specify color as:
- A color name, such as
Orange. Supported color names match corresponding color constants declared in the TdxAlphaColors record. - A hexadecimal color value, such as
#E67E22.
[COLOR=#E67E22]Dev[/COLOR][BACKCOLOR=orange]Express[/BACKCOLOR]
Subscript and Superscript: SUB | SUP
Subscript and superscript markup tags display the target text range in a smaller font below or above the text baseline, respectively:
Subscript: H[SUB]2[/SUP]O; Superscript: 5[SUP]2[/SUP] = 25
Combination with FONT and SIZE Tags
You can define font typeface (FONT) and size (SIZE) outside and inside SUB and SUP markup tags:
[SIZE=14]
[FONT=Arial Black]Typeface and size defined outside [SUP]superscript text[/SUP][/FONT]
Typeface and size defined inside [SUP][FONT=Arial Black][SIZE=18]superscript text[/SIZE][/FONT][/SUP]
[/SIZE]
Nested SUB and SUP Tags
SUB and SUP markup tags do not support nesting. The resulting formatted text string can have only one subscript and one superscript level.
[SIZE=14]
Nested subscript: [SUB]level one, [SUB]level two, [/SUB][SUP]nested SUP[/SUP][/SUB]
Nested superscript: [SUP]level one, [SUP]level two, [/SUP][SUB]nested SUB[/SUB][/SUP]
[/SIZE]
Hyperlinks: URL
The URL tag adds a hyperlink to text.
Hyperlink behavior depends on the URL scheme:
- Links that start with
https://orhttp://are opened in the default browser. - Links that start with
mailto://are opened in the default mail client and create an empty e-mail for the specified address. - Links that start with
file://scheme are opened in the File Explorer (for example,file:///C:\ProgramFiles\).
[URL=https://www.devexpress.com]DevExpress[/URL]
[URL=mailto://mail@example.com]mail@example.com[/URL]
[URL=file:///C:\Program Files\]C:\Program Files\[/URL]
Hyperlink Behavior Customization
All supported controls implement a series of dedicated hyperlink-related events. You can handle these events to change the predefined hyperlink activation behavior.
Refer to the following procedural type descriptions for detailed information on individual scenarios and corresponding code examples:
- TdxHyperlinkClickEvent
- The procedural type for hyperlink click events in DevExpress controls and their UI elements.
- TdxHyperlinkMouseHoverEvent
- The procedural type for hyperlink mouse hover events in DevExpress controls and their UI elements.
- TdxMessageDialogHyperlinkClickDelegate
- The procedural type for a hyperlink activation handler in a message dialog.
Hyperlink Hints
Hyperlinks display hints with the target link URI. You can handle hint-related events to change hint content.
Refer to the following procedural type descriptions for detailed information on individual scenarios and corresponding code examples:
- TdxShowHyperlinkHintEvent
- The procedural type for hyperlink hint display events in DevExpress controls and their UI elements.
- TdxMessageDialogShowHyperlinkHintDelegate
- The procedural type for a hyperlink hint display handler in a message dialog.
Parse Control: NOPARSE
The NOPARSE tag allows you to ignore nested markup and display content as is:
[NOPARSE][B]Dev[/B]Express[/NOPARSE]
Markup Parse Errors
Parse routines interpret markup tag content as plain text if any of the following conditions are met:
- An expression within square brackets does not correspond to any supported markup tag.
- A start tag has no corresponding end tag and vice versa.
- A whitespace character appears between the tag name and
=for tags with parameters (likeCOLOR).
Supported DevExpress Controls
All DevExpress controls listed in this section support BBCode-inspired markup tags in labels and captions.
Editors
- TdxFormattedLabel | TdxDBFormattedLabel
A static label control with support for BBCode-inspired markup tags. Use the editor’s Caption property or the design time Formatted Text editor.
To customize hyperlink behavior in a formatted label editor, you can handle its Properties.OnHyperlinkClick, Properties.OnShowHyperlinkHint, Properties.OnHyperlinkMouseEnter, and Properties.OnHyperlinkMouseLeave events.
- Message Box Dialogs
Skinnable counterparts of standard system message dialog boxes. All message box creation methods accept a content string that can include all supported BBCode markup tags.
In addition, these methods accept special hyperlink click and hint display routines as optional
AHyperlinkClickanAShowHyperlinkHintProcparameters.
Layout Control
Layout item captions support all BBCode-inspired markup tags listed in this topic.
You can handle OnHyperlinkClick, OnShowHyperlinkHint, OnHyperlinkMouseEnter, and OnHyperlinkMouseLeave events available at layout item and layout control levels to customize hyperlink behavior.
Design-Time Editor
The Formatted Text editor allows you to edit labels and captions at design time in Markup and RTF (WYSIWYG) modes.
Display the Formatted Text Editor
To display the Formatted Text editor, click the ellipsis button next to the corresponding property in the Object Inspector. For example, if you need to edit a layout item caption, select the layout item, expand its CaptionOptions node in the Object Inspector, and click the ellipsis button to the right of the Text property.
Text Edit Operations
The Formatted Text editor displays the following commands that affect the current text selection:
- Bold | Italic | Underline | Strikeout | Superscript | Subscript
- Apply corresponding formatting attributes to the text selection.
- Font
- Invokes the standard Font dialog that allows you to change font settings.
- Font Color | Text Highlight Color
- Invoke the Color Editor dialog where you can select a custom or predefined color and apply it to the font or background.
- Hyperlink
Invokes the Insert Hyperlink dialog that allows you to define the target hyperlink URI for the current text selection used as a link anchor.
- No Parse
- Encloses the text selection between
[NOPARSE]and[/NOPARSE]markup tags.