TextLabel > "TextScaledPercentage" AND/OR TextLabel > "TextPadding" - Padding text is more difficult than it needs to be

As a Roblox developer, when designing UIs with responsive text size, I currently have to create excess “Frame” objects that are simply used as a container to get the text size I desire.

Currently, when you turn on the TextScaled property, it fills the text right to the edge of the TextBox/TextLabel. Usually this doesn’t look very pretty and you want a bit of padding. You can get around this with 2 different methods, both of which require you to use another UI element (typically a Frame) as a container for the text. I don’t actually need this frame for anything though, but I have to use it to get the desired padding.

The current methods of adding text padding are as follows:

A) Parent the TextBox/TextLabel to the Frame and set the size of the text object to something smaller than the Frame

B) Parent the TextBox/TextLabel to the Frame. Add a UIPadding and also parent it to the frame to give the text object the desired amount of padding.

I have 2 feature requests that could simplify this process and not require an additional Frame object that I do not otherwise need.

  1. Add a new property that is hidden if TextScaled is false, but becomes visible if true, possibly called “TextScaledPercentage”. This property would allow you to set a percentage value between 0 and 1, allow you to choose how much the text gets scaled. As an example, if you chose 0.5 (50%), and the max text size that could fit was 50, then the text size would be 25 instead.

  2. Add a new “TextPadding” property directly to TextBox/TextLabel that works the same way as UIPadding, but instead allows you to set padding for the text within a TextBox/TextLabel.

2 Likes

I’m intending to make UIPadding affect the text in a TextLabel but we’ll have to make the change carefully to make sure it doesn’t break games.

I also want to look into alternatives to sizing text like making a version of TextSize relative to the height of the TextLabel for example.

I don’t like TextScaled for a couple of reasons, and want to eventually make it unnecessary and then deprecate it:

  • It’s ten times slower than TextScaled = false text in terms of updating when the text label changes in any way.
  • It doesn’t look right when the text label is changing size - it jitters around a lot.
  • It encourages UI where none of the text sizes match up, which looks awful.
11 Likes

Has this ever been followed up on? I still have to resort to OP’s method for designing my UI.

1 Like