RichText [TextScaled Support Added]

Typewriter effect is on our road map, so we offer a method that is easier to do (and performant, works properly with text filter, etc.)

3 Likes

HELL YEAH! I was making an HTML web engine for fun and this will help a lot! Also for other purposes, of course. Last night, I integrated this into my autocorrect system, to highlight mistakes in a chat message.

Please add the <br/> tag to create a new line as soon as possible, or just make /n work in RichText. Break tag would be more fitting though. :stuck_out_tongue:

2 Likes

We will provide the ability to change the font when the new fonts are fully launched, and will then provide the line break.

6 Likes

Is this feature live in game servers or not yet?
And i recommend getting inspired from this open source engineā€™s rich text implementation and features!

But Hmtl does not work like that. It is always --change b to anything hmtl

So it will have to stick to the old way unless it is a built in feature

Not sure what HMTL is, I know how HTML works as Iā€™ve been using it since 2007.
Iā€™m also not sure what you mean by the following

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