How do I add a border (or outline) to the text in a RichTextLabel?

Question

Hi!

Text of any color should have a black border in order to make it readable, think any meme image with white text.

I found this https://godotengine.org/qa/12474/render-labels-whitout-mixing-the-colors-with-the-background but it's not super useful as I can't find anything for shadows even.

I tried label.add_color_override("font_color_shadow", Color(1, 1, 1)) but it had no effect whatsoever. I wouldn't expect it to be perfect because a shadow isn't the same as a border.

How is this achieved in Godot for a RichTextLabel and Label?

Answer 1

For a Label you can create a custom theme and alter the font_color_shadow property.

The effect looks like this:

To create a custom theme, scroll down to "Theme" in the label's inspector. Click to add a new theme. A new panel will open at the bottom of the screen. Click "Edit theme.." > "Create Empty Template". A new panel will open in the inspector. From here you can set the theme settings for all the elements that use themes.

I notice, however, that the theme settings for RichTextLabel don't include this property. This might be related to why you were unable to set it via code.

If you don't find a satisfying method for adding this border in Godot, you can always use a font that has this border built in by design. For example, here are some fonts with outlines built in.

Comments

Thanks for the reply!

Sadly the RichTextLabel use case is in some cases more important than moving this to a Label. I would actually prefer it the most if there was a "meme-ify" switch that adds a hard border instead of a shadow... But more stuff for me to try out tomorrow, thanks :)