Align text to both the left and right in a RichTextLabel

[Whebon]

Godot Version

4.7.stable

Question

I’m trying to display a list of labels and values in a single RichTextLabel, with the label left-aligned and the value right-aligned on the same line.

For example, I want it to look like this:

Health                         32
Gold                          150

I tried using the [right] BBCode tag for this:

Health [right]32[/right]
Gold [right]150[right]

However, the [right] tag appears to create a separate block, so each value is moved onto its own line instead of staying on the same line as the label.

Is there a way to achieve left/right alignment within a single RichTextLabel? If it isn’t supported, what’s the recommended approach for creating a two-column layout like this?

[wchc]

Try [fill] tag on the whole paragraph instead.

[Whebon]

Thanks, [fill] does what I was looking for single-word labels. However, it seems to stop working correctly when the left-hand text contains spaces. For example:

[fill]Health 32[/fill]
[fill]Action points 150[/fill]

Health 32 is aligned correctly, but Action points 150 isn’t because fill distributes the extra space between all words in the line. Is there a way to keep “Action points” together as the left column while still right-aligning the value?

[wchc]

Try [table] tag then, see here explained how it works (look for “table” in the page)

BBCode in RichTextLabel

[Whebon]

[table=2]
[cell]Health[/cell][cell][right]32[/right][/cell]
[/table]

The table doesn’t fill the width of the entire RichTextLabel. I would like the left cell to expand as much as possible.

[wchc]

I can’t make it work with BBCode either, I’m not sure it’s possible.

Why don’t you just use containers though? You can easily achieve the same, with much greater control.

Just make sure to allow these 2 Labels to Expand:

[Sami]

I figured out a way to achieve this with a single RichTextLabel.

Health 32[zwj]❤️
Action[color=transparent].[/color]points 150[zwj]✅

• RichTextLabel’s horizontal_alignment = Fill
• Spaces replaced with [color=transparent].[/color] (or other character that is equal width with the space in your font)
• Any icons that need to stick to text need [zwj] between them.