godot-docs/tutorials/gui/bbcode_in_richtextlabel.rst

.. _doc_bbcode_in_richtextlabel:

BBCode in RichTextLabel
=======================

Introduction
------------

:ref:`class_RichTextLabel` allows the display of complex text markup in a control.
It has a built-in API for generating the markup, but can also parse a BBCode.

Note that the BBCode tags can also be used, to some extent, in the
:ref:`XML source of the class reference <doc_updating_the_class_reference>`.

Setting up
----------

For a ``RichTextLabel`` to work properly, it must be set up. That means loading
the intended fonts in the relevant properties:

.. image:: img/rtl_setup.png

Reference
---------

+-------------------+--------------------------------------------+--------------------------------------------------------------+
| Command           | Tag                                        | Description                                                  |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **bold**          | ``[b]{text}[/b]``                          | Makes {text} bold.                                           |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **italics**       | ``[i]{text}[/i]``                          | Makes {text} italics.                                        |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **underline**     | ``[u]{text}[/u]``                          | Makes {text} underline.                                      |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **strikethrough** | ``[s]{text}[/s]``                          | Makes {text} strikethrough.                                  |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **code**          | ``[code]{text}[/code]``                    | Makes {text} monospace.                                      |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **center**        | ``[center]{text}[/center]``                | Makes {text} centered.                                       |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **right**         | ``[right]{text}[/right]``                  | Makes {text} right-aligned.                                  |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **fill**          | ``[fill]{text}[/fill]``                    | Makes {text} fill width.                                     |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **indent**        | ``[indent]{text}[/indent]``                | Increase indent level of {text}.                             |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **url**           | ``[url]{url}[/url]``                       | Show {url} as such.                                          |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **url (ref)**     | ``[url=<url>]{text}[/url]``                | Makes {text} reference <url>.                                |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **image**         | ``[img]{path}[/img]``                      | Insert image at resource {path}.                             |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **font**          | ``[font=<path>]{text}[/font]``             | Use custom font at <path> for {text}.                        |
+-------------------+--------------------------------------------+--------------------------------------------------------------+
| **color**         | ``[color=<code/name>]{text}[/color]``      | Change {text} color; use name or # format, such as #ff00ff.  |
+-------------------+--------------------------------------------+--------------------------------------------------------------+

Built-in color names
~~~~~~~~~~~~~~~~~~~~

List of valid color names for the [color=<name>] tag:

-  aqua
-  black
-  blue
-  fuchsia
-  gray
-  green
-  lime
-  maroon
-  navy
-  purple
-  red
-  silver
-  teal
-  white
-  yellow

Hexadecimal color codes
~~~~~~~~~~~~~~~~~~~~~~~

For opaque RGB colors, any valid 6-digit hexadecimal code is supported, e.g. ``[color=#ffffff]white[/color]``.

For transparent RGB colors, any 8-digit hexadecimal code can be used, e.g. ``[color=#88ffffff]translucent white[/color]``.
In this case, note that the alpha channel is the **first** component of the color code, not the last one.