BBCode in RichTextLabel¶
Introduction¶
Label nodes are great for displaying basic text, but they have limitations. If you want to change the color of the text, or its alignment, you can only do that to the entire label. You can't make a part of the text have another color, or have a part of the text centered. To get around these limitations you would use a RichTextLabel.
RichTextLabel allows for complex formatting of text using a markup syntax or the built-in API. It uses BBCodes for the markup syntax, a system of tags that designate formatting rules for a part of the text. You may be familiar with them if you ever used forums (also known as bulletin boards, hence the "BB" in "BBCode").
Note that the BBCode tags can also be used, to some extent, in the XML source of the class reference. For more information, see Class reference primer.
Using BBCode¶
By default RichTextLabel functions exactly the same as the normal label. It has the property_text property, which you can edit to have uniformly formatted text. To be able to use BBCodes and rich text formatting you need to turn on the BBCode mode by setting bbcode_enabled. After that you can edit the text property using available tags. Both properties are located in the "Bb Code" section of the Inspector.

For example, BBCode [color=blue]blue[/color]
would render the word "blue" with
a blue color.

Most BBCodes consist of 3 parts: the opening tag, the content and the closing tag. The
opening tag delimits the start of the formatted part, and can also carry some
configuration options. Some opening tags, like the color
one shown above, also require
a value to work. The closing tag delimits the end of the formatted part. In some cases
both the closing tag and the content can be omitted.
[tag]content[/tag]
[tag=value]content[/tag]
[tag options]content[/tag]
[tag][/tag]
[tag]
Note
In the Inspector you may notice that after writing in the "BBCode Text" property the regular "Text" property now has the same text but without BBCodes. Take care not to edit the regular "Text" property! You will lose the BBCode markup if you do. All changes to the text must be done using the "BBCode Text".
Reference¶
Tag |
Example |
b
Makes
{text} use the bold (or bold italics) font of RichTextLabel . |
|
i
Makes
{text} use the italics (or bold italics) font of RichTextLabel . |
|
u
Makes
{text} underlined. |
|
s
Makes
{text} strikethrough. |
|
code
Makes
{text} use the mono font of RichTextLabel . |
|
p
Adds new paragraph with
{text} . Supports configuration options,
see Paragraph options. |
[p]{text}[/p] [p {options}]{text}[/p] |
center
Makes
{text} horizontally centered.Same as
[p align=center] . |
|
left
Makes
{text} horizontally right-aligned.Same as
[p align=left] . |
|
right
Makes
{text} horizontally right-aligned.Same as
[p align=right] . |
|
fill
Makes
{text} fill the the full width of RichTextLabel .Same as
[p align=fill] . |
|
indent
Indents
{text} once. |
|
url
Creates a hyperlink (underlined and clickable text). Can contain optional
{text} or display {link} as is.Must be handled with the "meta_clicked" signal to have an effect, see Handling [url] tag clicks.
|
[url]{link}[/url] [url={link}]{text}[/url] |
img
Inserts an image from the
{path} (can be any valid image resource).If
{width} is provided, the image will try to fit that width maintaining
the aspect ratio.If both
{width} and {height} are provided, the image will be scaled
to that size.If
{valign} configuration is provided, the image will try to align to the
surrounding text, see Image vertical alignment.Supports configuration options, see Image options.
|
[img]{path}[/img] [img={width}]{path}[/img] [img={width}x{height}]{path}[/img] [img={valign}]{path}[/img] [img {options}]{path}[/img] |
font
Makes
{text} use a font resource from the {path} .Supports configuration options, see Font options.
|
[font={path}]{text}[/font] [font {options}]{text}[/font] |
font_size
Use custom font size for
{text} . |
|
opentype_features
Enables custom OpenType font features for
{text} . Features must be provided as
a comma-separated {list} . |
[opentype_features={list}] {text} [/opentype_features] |
color
Changes the color of
{text} . Color must be provided by a common name (see
Named colors) or using the HEX format (e.g.
#ff00ff , see Hexadecimal color codes). |
|
bgcolor
Draws the color behind
{text} . Accepts same values as the color tag. |
|
fgcolor
Draws the color in front of
{text} . Accepts same values as the color tag. |
|
outline_size
Use custom font outline size for
{text} . |
[outline_size={size}] {text} [/outline_size] |
outline_color
Use custom outline color for
{text} . Accepts same values as the color tag. |
[outline_color={code/name}] {text} [/outline_color] |
table
Creates a table with the
{number} of columns. Use the cell tag to define
table cells. |
|
cell
Adds a cell with
{text} to the table.If
{ratio} is provided, the cell will try to expand to that value proportionally
to other cells and their ratio values.Supports configuration options, see Cell options.
|
[cell]{text}[/cell] [cell={ratio}]{text}[/cell] [cell {options}]{text}[/cell] |
ul
Adds an unordered list. List
{items} must be provided by putting one item per
line of text. |
|
ol
Adds an ordered (numbered) list of the given
{type} (see Ordered list types).
List {items} must be provided by putting one item per line of text. |
|
lb, rb
Adds
[ and ] respectively. Allows escaping BBCode markup. |
[lb]b[rb]text[lb]/b[rb] will display as [b]text[/b] . |
Several Unicode control character can be added using their own tags.
|
[lrm] , [rlm] , [lre] , [rle] , [lro] , [rlo] ,
[pdf] , [alm] , [lri] , [rli] , [fsi] , [pdi] ,
[zwj] , [zwnj] , [wj] |
Note
Tags for bold ([b]
), italics ([i]
), and monospaced ([code]
)
formatting only work if the appropriate custom fonts are set up for
the RichTextLabel
node first.
There are no BBCode tags to control vertical centering of text yet.
Options can be skipped for all tags.
Paragraph options¶
align
Values
left
,center
,right
,fill
Default
left
Text horizontal alignment.
bidi_override, st
Values
default
,uri
,file
,email
,list
,none
,custom
Default
default
Structured text override.
direction, dir
Values
ltr
,rtl
,auto
Default
Inherit
Base BiDi direction.
language, lang
Values
ISO language codes. See Locale codes
Default
Inherit
Locale override.
Handling [url]
tag clicks¶
By default, [url]
tags do nothing when clicked. This is to allow flexible use
of [url]
tags rather than limiting them to opening URLs in a web browser.
To handle clicked [url]
tags, connect the RichTextLabel
node's
meta_clicked signal to a script function.
For example, the following method can be connected to meta_clicked
to open
clicked URLs using the user's default web browser:
# This assumes RichTextLabel's `meta_clicked` signal was connected to
# the function below using the signal connection dialog.
func _richtextlabel_on_meta_clicked(meta):
# `meta` is not guaranteed to be a String, so convert it to a String
# to avoid script errors at run-time.
OS.shell_open(str(meta))
For more advanced use cases, it's also possible to store JSON in an [url]
tag's option and parse it in the function that handles the meta_clicked
signal.
For example:
[url={"example": "value"}]JSON[/url]
Image options¶
color
Values
Color name or color in HEX format
Default
Inherit
Color tint of the image (modulation).
height
Values
Number in pixels
Default
Inherit
Target height of the image.
width
Values
Number in pixels
Default
Inherit
Target width of the image.
region
Values
x,y,width,height in pixels
Default
Inherit
Region rect of the image.
Image vertical alignment¶
When a vertical alignment value is provided with the [img]
tag the image
will try to align itself against the surrounding text. Alignment is performed
using a vertical point of the image and a vertical point of the text. There are
3 possible points on the image (top
, center
, and bottom
) and 4
possible points on the text (top
, center
, baseline
, and bottom
),
which can be used in any combination.
To specify both points, use their full or short names as a value of the image tag:
[img=top,bottom]
[img=center,center]
You can also specify just one value (top
, center
, or bottom
) to make
use of a corresponding preset (top-top
, center-center
, and bottom-bottom
respectively).
Short names for the values are t
(top
), c
(center
), l
(baseline
),
and b
(bottom
).
Font options¶
name, n
Values
A valid Font resource path.
Default
Inherit
Font resource path.
size, s
Values
Number in pixels.
Default
Inherit
Custom font size.
Named colors¶
For tags that allow specifying a color by name you can use names of the constants from
the built-in Color class. Named classes can be specified in a number of
styles using different casings: DARK_RED
, DarkRed
, and darkred
will give
the same exact result.
Hexadecimal color codes¶
For opaque RGB colors, any valid 6-digit hexadecimal code is supported, e.g.
[color=#ffffff]white[/color]
. Shorthand RGB color codes such as #6f2
(equivalent to #66ff22
) are also supported.
For transparent RGB colors, any RGBA 8-digit hexadecimal code can be used,
e.g. [color=#ffffff88]translucent white[/color]
. Note that the alpha channel
is the last component of the color code, not the first one. Short RGBA
color codes such as #6f28
(equivalent to #66ff2288
) are supported as well.
Cell options¶
expand
Values
Integer number
Default
1
Cell expansion ration, which cell will try to expand to proportionally to other cells and their expansion ratios.
border
Values
Color name or color in HEX format
Default
Inherit
Cell border color.
bg
Values
Color name or color in HEX format
Default
Inherit
Cell background color. For alternating odd/even row backgrounds you can use
bg=odd_color,even_color
.
Ordered list types¶
Ordered lists can be used to automatically mark items with numbers or letters in ascending order. This tag supports the following type options:
1
- Numbers, using language specific numbering system if possible.a
,A
- Lower and upper case Latin letters.i
,I
- Lower and upper case Roman numerals.
Animation effects¶
BBCode can also be used to create different text animation effects. Five customizable effects are provided out of the box, and you can easily create your own.
Wave¶

Wave makes the text go up and down. Its tag format is [wave amp=50 freq=2][/wave]
.
amp
controls how high and low the effect goes, and freq
controls how fast the
text goes up and down.
Tornado¶

Tornao makes the text move around in a circle. Its tag format is
[tornado radius=5 freq=2][/tornado]
.
radius
is the radius of the circle that controls the offset, freq
is how
fast the text moves in a circle.
Shake¶

Shake makes the text shake. Its tag format is [shake rate=5 level=10][/shake]
.
rate
controls how fast the text shakes, level
controls how far the text is
offset from the origin.
Fade¶

Fade creates a fade effect over the text that is not animated. Its tag format is
[fade start=4 length=14][/fade]
.
start
controls the starting position of the falloff relative to where the fade
command is inserted, length
controls over how many characters should the fade
out take place.
Rainbow¶

Rainbow gives the text a rainbow color that changes over time. Its tag format is
[rainbow freq=0.2 sat=10 val=20][/rainbow]
.
freq
is the number of full rainbow cycles per second, sat
is the saturation
of the rainbow, val
is the value of the rainbow.