Help with scaling text for different screensizes

Help and Feedback Art Design Support
#1

What I try to do

I am using a textlabel of which the text continuously gets longer untill the sentence is done. (it’s like someone is talking and the words get added after each other inside the textlabel)

The textlabel has this properties:
image

together with UITextSizeConstraint as the textlabel’s child.
image

Problem

NON-MOBILE:
image
image

MOBILE:
image
image

As you can see in the pictures, for non-mobile users, the textsize is correctly scaled (I want it to be 40), I can put nice long sentences inside the textlabel without the scale changing too much (ofcourse a very long sentence would make the textsize smaller to fit but thats not a problem)

For Mobile users however, the text also begins at the same size (40). And this is a problem for me, since I can’t put a normal sentence without scaling the text down a lot. A small downscale doesnt matter, but since the difference is so big, it will be bad for readability.

I do not want to change the MaxTextSize to 20, this will turn the problem around. If it’s 20, it would be good for Mobile users (since the scale is correct and won’t change too much), but for non-mobile users, the textsize 20 is too small and not good for readability.

I have tried to use UISizeConstraints and UIAspectRatioConstraints but this didn’t help fixing this problem. Maybe I am using them wrong?

Solution I am looking for

I want the textsize for mobile to start at a lower size, so when the sentence becomes longer, the scale won’t change much. While the textsize for non-mobile users starts with a higher size.

Does anyone know how to fix this problem?

1 Like
#2

I have the same problem, I usually avoid it by adding text boxes for each new line but that’s my own recommendation.

2 Likes
#3

I will try this out. I hope it will fix the problem.

Do you also use UITextSizeConstraint/MaxTextSize for each box?

#4

Sometimes, usually not always because for my specific uses it gives me a 50/50 chance of helping and not helping as Roblox’s text boxes are pretty wonky.

#5

Hi there,

It seems like its not only just me experiencing this issue. For medium to large sized text elements, I would just prefer using ScrollingFrames. But for a few lines of text, the process is a little more complex. What I try to do to keep the text nice and consistent is to disable TextScaled but enable TextWrapped.

I then use a script to set the text size based on the screen width:

local player = game.Players.LocalPlayer
local mouse = player:GetMouse()
local x = mouse.ViewSizeX --you can also do Y, but I prefer X
local divBy = 25 -- the larger this is, the smaller the text is. Beware of small screens because small text in those can be illegible.

for i, v in pairs(script.Parent:GetDescendants()) do
	
	if v:IsA("TextLabel") or v:IsA("TextButton") or v:IsA("TextBox") then
		
		v.TextSize = math.ceil(x / divBy)
		print(v.TextSize)
		
	end
	
end

However, in some cases, the text can leak out of the text element. So, for that I just enable TextTruncate. With this property, even though it does the job by shortening text and adding ellipsis at the end, it does not have a set margin. If you want, you can create a custom text truncate system. Now there is yet another is issue with this: you cannot see all of the text. What I would do for this is have the text label be a text button and then when the player clicks on it, the text element will enlarge and they can view the entire text.

Hope that helps!

8 Likes
#6

Wow, this works very nice! Thank you for giving me a way of doing this. I had to change the divBy value to 38 to make sure it works on all screensizes (smallest iphone4) without getting truncated. Thank you!

I also added an infinite loop to constantly check for the size to change the textsize when needed.

1 Like