We need to be able to offset text

Feature Requests Engine Features
,
#1

As a Roblox developer, creating and scripting good UIs is often made much longer and harder by the fact that we can’t offset our text properly.

Currently there are three text alignment options (for the X axis): left, center and right.

However, these options are limited on their own - left and right both are at the exact edge of the element. This means the background part of elements don’t have any padding, ruining the look.

To solve this currently, the text needs to be in a separate object and sized to {1,-paddingX},{,1,0} and positioned to {0,paddingX},{0,0} to get decent padding whilst retaining a good looking background.

This means not only does it use up time that could be used elsewhere, it also makes the job longer and more tedious for the programmer too.

Screenshot_693Screenshot_692
The corresponding items are vertically opposite

To make left-oriented buttons, two objects must be created instead of the expected one.

Imagine this as a scripter:

local ShopButton = Gui:WaitForChild("Shop")
local ShopButtonLabel = ShopButton:WaitForChild("Text")
local InventoryButton = Gui:WaitForChild("Inventory")
local InventoryButtonLabel = InventoryButton:WaitForChild("Text")
local SpectateButton = Gui:WaitForChild("Spectate")
local SpectateButtonLabel = SpectateButton:WaitForChild("Text")
local SettingsButton = Gui:WaitForChild("Settings")
local SettingsButtonLabel = SettingsButton:WaitForChild("Text")

where it could be:

local ShopButton = Gui:WaitForChild("Shop")
local InventoryButton = Gui:WaitForChild("Inventory")
local SpectateButton = Gui:WaitForChild("Spectate")
local ShopButton = Gui:WaitForChild("Shop")

A better option in my opinion is, instead of creating a whole new frame, resizing, positioning, styling, and doing the same to all its new children, you could just set the offset of the text.

35 Likes
API to insert Keyboard hints and mobile buttons into strings
#2

I still think we need this, but for text padding I like to be lazy and just add spaces in front/behind the text to create padding without adding GUI elements.

15 Likes
#3

Wow, I actually haven’t thought of that before…

It’s a decent hacky solution until padding comes lol

4 Likes
#4

That doesn’t help in the case of textboxes

#5

.Focused?

#6

Whenever you add spaces tho and you transfer UI to another game (i.e. from developing version to the final one), the spaces always disappear for me. Same happens when you group UI and Click Save as Model. The spacing never transfers over when you add the model in another game so it’s kinda annoying.

1 Like
#7

also + .Changed and some logic to stop people from deleting them :wink:

local CurrentText = ""
TextBox.Changed:Connect(function()
    if ImTooLazyToWriteLogic then
        TextBox.Text = "   " ..CurrentText
    end
end)
2 Likes
#8

You can also use this structure. UIPadding affects the padding around the parent element.

image

http://wiki.roblox.com/index.php?title=API:Class/UIPadding

14 Likes
#9

That doesn’t really solve the issue, though. I’m fine with doing a little math to figure it out, I just want to be using 1 object, not 2 or 3.

#10

To be honest I think a better solution is a rich text box for all of these controls.

#11

What do you mean exactly?

And also including labels and buttons.

#12

Rich textboxes are just Textboxes with a ton of controls whether thats multi coloring or text formatting.

1 Like
#13

Why have I never thought of using spaces before?
Thanks for saving time in the future.

1 Like
#14

It would be nice to have a UITextPadding UI constraint. I ran into this issue today, but with vertical spacing instead of horizontal. I want to enable TextScaled on my textbox so it scales properly with higher-resolution displays, but TextScaled stretches the text to the very top and bottom of the textbox, which looks awful. I had to implement the solution described in the OP (creating a child textbox in a frame).

Creating a sub-element not only makes accessing inner elements more annoying, but also splits up the logic for one object into multiple (e.g. once textbox is selected, I have to change the border/background colors of a completely different frame to signify it’s selected.

3 Likes
#15

I’ve been planning to change it so UIPadding components will affect the positioning of the text. We’re not sure what the impact of the change would be - it’s possible developers are relying on the current behavior.

1 Like
#16

I may not want all child UI elements to have padding – just the text. Open to better ways that UITextPadding, but Ideally I want to avoid workarounds like a Text=“” button and a size=(1,0,1,0) label containing the text just to control child UI element / text padding separately.

#17

I almost exclusively use ImageButtons when I need to make a button for this reason - it’s just a more natural way to think about a UI for me. I think of the button as a container and the text inside of it as a child object, because in some cases I might want to put something other than text, such as an icon, or an icon followed by text.

I can’t think of a reason why you’d want to have text padding separate from normal padding. I do think having padding on text in general is useful though, especially once I ship the AutomaticSize API.

2 Likes
#18

We have TextButtons though, so developers may naturally trend towards the approach I described earlier instead of this. If the officially supported way to do this is to have text as a child object, it would be nice if we guided developers to do this. For instance, deprecating Text/ImageButton but providing a generic button class where images/text are added as children.

2 Likes
#19

This is what we’d eventually like to move towards, having components that you attach. It would have many other benefits, like removing the need for class changer plugins, at least when working with UI.

3 Likes
#20

One thing I come across quite frequently when making my UIs (I do it fully in Studio so I need to be flexible in how I make them.) is that I need the TextXAlignment to be left but if it is the base of a button, it looks weird and the text is just over on the side, touching the side or coming close to it at least.

The Server 1 is set to the left and you can see how it looks odd and is almost too close to the edge.
Screenshot_96

My solution to that would be to add TextXAlignmentOffset and TextYAlignmentOffset, the way I would propose it works is that you can set the TextXAlignment to left, and then alter TextXAlignmentOffset and have the ability to alter its position in pixels some.

(PS. This feature would be useful also because if you want something to be left but not too far left, instead of having to make the background a frame and then having the text be a label, you just use TextXAlignmentOffset and TextYAlignmentOffset)

2 Likes