RichText [TextScaled Support Added]

I found a bug;
Once you turn on the RichText property it won’t automatically scale the text if you turn TextScaled on.
Tho I understand this could actually be really hard to fix, it would be really useful if this could get fixed.

I added a small part to it which makes it compatible with & < > " ’ these symbols; the current script:

local anim_time = .5 -- how long it takes for each letter's animation to complete
local text_size = 50 -- how large the finishing text size is
local per_letter = 20 -- how many letters to animate per second

local chars: {[number]:string} = {}

local startForm: string = '<font size="%s" color="%s">'
local endForm: string = '</font>'
local colForm: string = 'rgb(%s,%s,%s)'

local style = Enum.EasingStyle.Back
local label = script.Parent:WaitForChild('TextLabel')

local TweenService = game:GetService('TweenService')
local RunService = game:GetService('RunService')
local ReplicatedStorage = game:GetService('ReplicatedStorage')

local start: number = os.clock()

function getColor(alpha): string -- converts an alpha float into a RichText RGB color tag
	local color: number = math.floor(math.clamp(1 - alpha,0,1) * 255)
	return colForm:format(color,color,color)
end

RunService.RenderStepped:Connect(function()
	local concat: {[number]:string} = {}
	local now: number = os.clock()
	
	for i: number, char: string in pairs(chars) do
		
		local linear_alpha: number = now - (i / per_letter) - start -- a linear interpolation which describes the animation completion for each letter
		if linear_alpha < 0 then continue end -- temporarily discard letters if their animation hasn't started yet
		
		local alpha: number = TweenService:GetValue(linear_alpha / anim_time, style, Enum.EasingDirection.Out) -- convert the linear interpolation into the type specified in the "style" variable
		
		-- here we add all our strings to a table for later combination
		table.insert(concat, startForm:format(math.floor(alpha * text_size),getColor(alpha)))
		table.insert(concat, char)
		table.insert(concat, endForm)
		
	end
	
	label.Text = table.concat(concat) -- i'm using table.concat here because https://devforum.roblox.com/t/475583
end)

function read(str: string, atime: number?, textsize: number?, pletter: number?, styl: EnumItem?)
	chars = {}
	start = os.clock()
	
	anim_time = atime or anim_time -- this is kinda ugly because luau doesnt have variable defaults yet (to my knowledge)
	text_size = textsize or text_size
	per_letter = pletter or per_letter
	style = styl or style
	
	for i: number = 1, #str do
		
		if str:sub(i,i) == "&" then -- Credit: KJry_s :)
			table.insert(chars,"&amp;")
		elseif str:sub(i,i) == "<" then
			table.insert(chars,"&lt;")
		elseif str:sub(i,i) == ">" then
			table.insert(chars,"&gt;")
		elseif str:sub(i,i) == "\"" then
			table.insert(chars,"&quot;")
		elseif str:sub(i,i) == "'" then
			table.insert(chars,"&apos;")
		else
			table.insert(chars, str:sub(i,i)) -- add all the letters to a table to loop through while animating
		end
		
	end
end

ReplicatedStorage.Read.Event:Connect(read)

if not game:IsLoaded() then
	game.Loaded:Wait() -- let the loading screen finish before playing animation 
end
wait(2)

-- Example usage: 
read('This is compatible with: & > < \' " ')
-- All other arguments are optional.

-- Note: this currently doesn't work with other rich text in the input (lol)
1 Like

This bug has already been reported several times.

Will we ever see this feature rollover to the Roblox Chat? Or does it use it by default now? I was about to make a module that I want to use colored text in the StarterGui:SetCore("ChatMakeSystemMessage") and remembered RichText was now live.

Any updates on when we’ll be getting <br>?

I noticed you said you guys have it implemented but it’s not released yet.

I’m working on a thing for syntax highlighting.
I have a TextBox that the user can type in and a TextLabel on top which mimics the TextBox except it adds color using RichText. The only problem is RichText likes to shorten multiple new lines into a single new line, so it throws everything off sync.

Other people seem to be running into a similar situation

It would be great if we could have <br> support, or support for multiple new lines in RichText :heart:

TLDR: Yet another request for <br>

Another solution I tried was using a special character with 0 width

local noWidthChar = "​"

--- bla bla bla
TextLabel.Text = TextLabel.Text:gsub('\n','\n'..noWidthChar)

For some reason Roblox changes the 0 width character to some sort of obstructed character
no idea why

EDIT:
I don’t know why Roblox doesn’t like the no width character directly, but you can produce something very similar with this:

TextLabel.Text = TextLabel.Text:gsub('\n','\n'..utf8.nfcnormalize(""))

It’s not a perfect no-width character, but it’s very close. It’s an invisible character with a width of 4 pixels.
I think it’s supposed to be the same character, because all I did was format the character into utf8 to then format it back, but I don’t know enough about this to say for sure. Either way, with a little offset, I can make a haxy custom <br> functionality!

I’m just going to use this for the time being until an official <br> is released.

3 Likes

Are there limitations to RichText? Is it supposed to just stop working?
2020-10-25_04-41-25
I don’t know if this is a bug or a known limitation but RichText seems to break after a certain number of tags.

If it is a limitation, it’s not very well documented.
There’s nothing about such a limitation anywhere in the api wiki, article, or this post.

3 Likes

So does anybody have a solution to TextScaled not working? I understand it has already been reported but I’ve read through the forum and I don’t see a way to fix this while we wait. I want to use this in a notification system and it’s crucial that the text scales.

What about to set text’s size by its frame’s absolute Y size?

Hi, @CboatDev.

Yes, I’ve found a way around it. In order to have things scaling, add a UIScale and set the scale based on a screen resolution. For instance, use 1920x1080 to be your UI’s target resolution and change the UIScale’s Scale property in order to have everything scaling properly depending on screen sizes. In fact, this solution is far beyond being RichText-only. It expands to multiple GuiObjects.

Best regards,
Octonions

1 Like

Thanks for your help. I’m just going to hold off on using rich text until they figure this out. Why can’t they just disable TextScaled when you use font size tags?

I believe ROBLOX has to do more than that to make it fit for everyone’s use.

No text scaling is a dealbreaker for me. Any plans to add this?

Thanks for your patience! We are actively working on this and the timeline expectation would take around 2 weeks more.

2 Likes

We have internal size limitation on the text property on textobject. We are looking into bumping that one for better richtext support.

3 Likes

Perhaps a feature such as a property named “Displayed text” under both textboxes and textlabels would fix the prevention of using richtext on input. it would greatly improve the feature usage on more than just bland non user generated texts.

this properly would basically be a read-only of the .Text property just without any html if richtext is enabled.

Until this is implemented (if ever) user generated content can be filtered from html with a simple line:

local NonHTML_Text = text:gsub("%b<>", "")

sadly this would take stuff like <hi I'm voided> in account so feel free to modify it to specific cases only

1 Like

Indeed, @VoidedBlades.
I vouch for that as well.
I have been using something similar. Although your method seems faster and cleaner, I am going to post what I have been using as well.

local displayedText = string.gsub(text, "<.->", "")

Not sure if it works for all cases, but it has been working for me.

Best regards,
Octonions

1 Like

Thanks for your suggestions~ We actually have this feature implemented. We will release it sometime later.

1 Like

Is the <img> tag on the roadlist? I haven’t got any response to my last question.

4 Likes

I’m having the same problem did you found a fix?

Can we get RichText support for bubble chat? I’m developing a rich text system and this would help tons.

2 Likes