Skip to content

Add option to scale images in RichTextLabel relative to font size#112617

Open
Meorge wants to merge 1 commit intogodotengine:masterfrom
Meorge:feat/richtextlabel-img-em
Open

Add option to scale images in RichTextLabel relative to font size#112617
Meorge wants to merge 1 commit intogodotengine:masterfrom
Meorge:feat/richtextlabel-img-em

Conversation

@Meorge
Copy link
Contributor

@Meorge Meorge commented Nov 10, 2025

Closes godotengine/godot-proposals#13609.

This PR allows img tags in RichTextLabels to specify height and width with the em suffix, which makes the values a percentage of the surrounding text's font size.

For example, the following text:

Do you have any [img height=1em]coin.png[/img] coins?
...I said, [font_size=50]DO YOU HAVE ANY [img height=1em]coin.png[/img] COINS??[/font_size]

Displays like this:
CleanShot 2025-11-10 at 10 07 05@2x

@Meorge Meorge changed the title Basic prototype working for "em" units, as percentage of current font size Add option to scale images in RichTextLabel relative to font size Nov 10, 2025
@AThousandShips AThousandShips added this to the 4.x milestone Nov 10, 2025
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from 43c28e8 to 4f9ed1a Compare November 10, 2025 22:21
@Calinou
Copy link
Member

Calinou commented Nov 11, 2025

with the em suffix

I'm curious if we should go with rem (root em) instead. Last time I checked, many people considered em in CSS to be a design flaw, which is why most people use rem in CSS nowadays. There are still a few legitimate reasons to use em in CSS in 2025, but rem is more suited in most cases.

That said, maybe it's not a relevant distinction here.

@Meorge Meorge marked this pull request as ready for review November 11, 2025 01:34
@Meorge Meorge requested review from a team as code owners November 11, 2025 01:34
@Meorge
Copy link
Contributor Author

Meorge commented Nov 11, 2025

If I'm understanding rem correctly, it sounds like it wouldn't respect [font_size] BBCode blocks. That is to say, if you had the text

I said, [font_size=50]DO YOU HAVE ANY [img height=100rem]coin.png[/img] COINS??[/font_size]

and the theme/default font size for this RichTextLabel is 16px, then the coin.png sprite would be 16px tall, even though it's in a block of text that's 50px tall.

I suppose we could include both rem and em; the latter would respect [font_size] whereas the former wouldn't. I don't know how many use cases there would be for that, though.

@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from 9b68a8b to 18054ba Compare November 12, 2025 05:30
@Meorge
Copy link
Contributor Author

Meorge commented Nov 12, 2025

The 1em measurement is equal to 100% of the surrounding font size, rather than 100em.

This required changing the width and height values from ints to floats, so now for free the pixel sizes and percentages also support float values!

@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch 2 times, most recently from a5707c6 to b56beeb Compare November 14, 2025 21:03
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch 4 times, most recently from c623eb0 to a157217 Compare December 2, 2025 20:44
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from a157217 to 2e4a0c7 Compare December 5, 2025 17:46
Meorge added a commit to Meorge/godot that referenced this pull request Feb 7, 2026
Use base font size

Added docs and compatibility methods

Fix compatibility methods maybe for real this time????

Please?

Make width/height use floats instead of ints, and then make 1em be the height of surrounding text

Fix documentation for floats instead of ints

Update compatibility

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

Add compatibility breakages file

# Conflicts:
#	misc/extension_api_validation/4.5-stable_4.6-stable/godotengineGH-112617.txt
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from 2e4a0c7 to 323b12e Compare February 7, 2026 17:01
@Repiteo Repiteo requested a review from a team as a code owner February 17, 2026 20:10
Meorge added a commit to Meorge/godot that referenced this pull request Feb 26, 2026
Use base font size

Added docs and compatibility methods

Fix compatibility methods maybe for real this time????

Please?

Make width/height use floats instead of ints, and then make 1em be the height of surrounding text

Fix documentation for floats instead of ints

Update compatibility

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

Add compatibility breakages file

# Conflicts:
#	misc/extension_api_validation/4.5-stable_4.6-stable/godotengineGH-112617.txt

# Conflicts:
#	scene/gui/rich_text_label.cpp
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from 323b12e to 56d5a26 Compare February 26, 2026 04:46
Use base font size

Added docs and compatibility methods

Fix compatibility methods maybe for real this time????

Please?

Make width/height use floats instead of ints, and then make 1em be the height of surrounding text

Fix documentation for floats instead of ints

Update compatibility

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

# Conflicts:
#	misc/extension_api_validation/4.5-stable.expected

Add compatibility breakages file

# Conflicts:
#	misc/extension_api_validation/4.5-stable_4.6-stable/godotengineGH-112617.txt

# Conflicts:
#	scene/gui/rich_text_label.cpp

# Conflicts:
#	scene/gui/rich_text_label.cpp
@Meorge Meorge force-pushed the feat/richtextlabel-img-em branch from 56d5a26 to b1806e0 Compare March 2, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow images in RichTextLabel to be sized relative to font size

4 participants