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.)
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.
We will provide the ability to change the font when the new fonts are fully launched, and will then provide the line break.
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.
Wait is this live in-game now?
Yes it is, it literally says live in the title of this thread.
Hi, thanks for the suggestion. We have the <br/>
implemented and will be release around next week. Thanks for your patience~
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
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.
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!
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,"&")
elseif str:sub(i,i) == "<" then
table.insert(chars,"<")
elseif str:sub(i,i) == ">" then
table.insert(chars,">")
elseif str:sub(i,i) == "\"" then
table.insert(chars,""")
elseif str:sub(i,i) == "'" then
table.insert(chars,"'")
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)