RichText [TextScaled Support Added]

As in like

<b></b>
<i></i>
<body></body>
<p1></p1>

Edit: Had to put it in a code block or else it would dissappear

This isn’t HTML, this is Roblox’s own markup based on XML. <b></b> makes stuff bold in HTML and in Roblox’s markup. body and whatever p1 is meant to be don’t exist in Roblox’s markup unless otherwise said in the docs or OP.

Great update. Is it planned to add an <img> tag? Would be nice to have one instead of mixing imagelabels.

5 Likes

Wait is this live in-game now?

Yes it is, it literally says live in the title of this thread.

1 Like

Hi, thanks for the suggestion. We have the <br/> implemented and will be release around next week. Thanks for your patience~

5 Likes

Using decimals breaks the text
example:

<font color = "rgb(255,0,0)">Red</font>

results:
“Red” colored in red

example2:

<font color = "rgb(254.5,0,0)">Red</font>

results:
the exact same thing i wrote in textlabel

1 Like

I’ve also encountered this issue, in the meantime you could use this neat little function I made a while ago;

local function richTextColor3(col) -- returns "rgb(r,g,b)" or in this case: "rgb(255,0,0)" for red
    local r, g, b = tostring(math.floor(col.r * 255)), tostring(math.floor(col.g * 255)), tostring(math.floor(col.b * 255))
    return "\"rgb(" .. r .. "," .. g .. "," .. b .. ")\""
end

TextLabel.Text = "<font color=" .. richTextColor3(Color3.new(1, 0, 0)) .. ">Red</font>"

If you’re not a programmer, then I don’t know…

yeah I fixed it a while ago.
I just thought it’d be good if I reported it incase they can do something about it.

2 Likes

Hey, really cool feature. I have been wondering for quite some time though, will it be possible to create custom tags or features to use in Rich-Text? Things like custom rainbow tags or text animations could be a really cool thing to use. It’d give a ton of space for new UI designs in my opinion, and would definitely make UIs and other UI objects look more colorful. Overall, super excited to use this! :smile:

For this feature to be useful towards my development, here’s currently two things I’m waiting for:

  • TextScaled support. (I’m not entirely sure why this wasn’t added onto RichText, but oh well.)
  • Typography support. Creating an attractive typographic interface is extremely difficult to do with TextLabels, and it would be very appreciated if more control was added to TextLabels.

Here’s an example something I’m working on:

For the purposes of clarity, I have circled the text I want to talk about. See how it seems off? That’s because this is my attempt at trying to create auto hyphenation for words that are cut off and placed onto the next line. Not just an attempt at hyphenation, but also at indentation at the beginning.

There should definitely be an option for both of those features to improve the user experience of others. Because on notepad, I’d rather like to type like this:

Not only is this island known for its breathetaking scenery, but it is popularly known for its regulary hosted art museums, where rich Robloxians come to either admire or buy. Founded from our great ancestors (right along with builderman), this mystical island holds the upmost expensive and anceint medias to existence – known as, “artifacts.” These artifacts were stored away during the early days of Roblox in the year, 2006; when only the surface was being scratched. These rarities were created by the great architecures and/or painters of the era. (Where their whereabouts have re- mained to be unknown for much of history.)

instead of typing like this:

Not only is this isla-
nd known for its brea-
thetaking scenery,
but it is popularly
known for its regulary
hosted art museums,
where rich Robloxians
come to either admire
or buy. Founded from
our great ancestors
(right along with buil-
derman), this mystical
island holds the upm-
ost expensive and a-
nceint medias to exi-
stence – known as,
“artifacts.” These art-
ifacts were stored a-
way during the early
days of Roblox in the
year, 2006; when only
the surface was being
scratched. These ra-
rities were created by
the great architecur-
es and/or painters of
the era. (Where their
whereabouts have re-
mained to be unknow-
n for much of history.)

Ignoring the gramatical and spelling mistakes, it would look way more visually appealing than to what I have right now. Seeing my paragraph look very uneven disorients me.

Having RichText support on top of this would make make this feature have so much more use. Right now, I don’t have too much use for it.

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