Rich text problems while using a type writing effect

Im trying to use Rich text in my dialouge system but I ran into a problem the text displays as “<i.> hi </i.>”
instead of hi until the word and the tags get fully written (if you dont understand watch the gif)

problem:

Try one of these.

  1. If you want each letter to be formatted the moment it is created then create separate text labels for each letter. This might be more ideal if you want to animate the text in other ways.
  2. Read about graphemes. Roblox has an article on this which is perfect. UI Animations | Roblox Creator Documentation

I like the graphemes solution. Looks very clean–and very easy! All you do is set the text to the input then slowly make each grapheme visible.

local TweenService = game:GetService("TweenService")

local UI = script.Parent
local Label = UI.Label

local CHARACTERS_PER_SECOND = 10 
 
local function RenderText(Text)
	local Counter = 0
	
	Label.Text = Text
	Label.MaxVisibleGraphemes = 0
	
	for _, _ in utf8.graphemes(Text) do
		Counter += 1
		Label.MaxVisibleGraphemes = Counter
		wait(1 / CHARACTERS_PER_SECOND)
	end
end

RenderText([[<font size="20"><u>this</u></font> is <b>super epic</b> just like <font color="rgb(255,50,25)"> nyan cat!</font> <i>i think im going to go eat some waffles now :3</i>]])
2 Likes

Is there a video explaining Graphemes?, I’m not the type of guy to learn through reading I learn through watching videos and people explaining it.

Also I’m not sure how to detect what character im on since im showing them not actually changing the text one by one