Rich text Typewriter

[baconcoolboysun (Boi)]

yes i do saw this and readed it

Typewriter Effect: New property MaxVisibleGraphemes (Live)

We have wanted to support developers with a better way to add a “typewriter” style effect to your text. The most common method used today, is to update the string by adding 1 additional character repeatedly, which can cause some issues. Besides enabling a cool effect, there are additional benefits with using the new solution: More performant and intuitive method to add a typewriter effect to an entire string Remove visual issues with text wrapping, as the text string no longer changes in siz…

but i dont really understand
so i need help on making rich text using typewriter without it printing out the rich text tags

[McThor2]

What have you tried so far? Do you have some code already?

[baconcoolboysun (Boi)]

well i did manage to make a swear word inside a message change color and typewriter for it
but the rich text tag is the problem
and yea i did give me a min

[baconcoolboysun (Boi)]

local text = 'testttt <font color="#FFA500">color change</font>. testt'

local function removeTags(str)
	str = str:gsub("<br%s*/>", "\n")
	return (str:gsub("<[^<>]->", ""))
end

local displayText = removeTags(text)
		for i = 1,#displayText do
			Chat.Text.Text = ">"..string.sub(displayText ,1,i)
task.wait()
end

this does remove the tags but it also remove color
without the remove tags it just print out “color change”

[McThor2]

Okay so the idea is to not edit the Text property of the TextLabel (or other text gui element) but rather this new property MaxVisibleGraphemes.

You set the Text property to the full text you want to be displayed at the end (including rich text tags) and then increment MaxVisibleGraphemes until all of the text is visible.

local Label = script.Parent

local TIME_PER_CHARACTER = 1
local TEXT = "t <font color='#FFA500'>color</font>. l☺"

local function removeTags(str)
	-- replace line break tags (otherwise grapheme loop will miss those linebreak characters)
	str = str:gsub("<br%s*/>", "\n")
	return (str:gsub("<[^<>]->", ""))
end

Label.Text = TEXT

-- This is only to compute the length of the total visible characters
local displayText = removeTags(TEXT)

-- utf8.len is used rather than #displayText as some utf8 characters are composed of multiple bytes. 
-- e.g. 
-- >>> print(#"£") 
-- >>> 2
-- >>> print(utf8.len("£"))
-- >>> 1
for index = 0, utf8.len(displayText) do 

	script.Parent.MaxVisibleGraphemes = index
	
	wait(TIME_PER_CHARACTER)
end

Edit:
Using utf8.len is not actually quite right and you should use utf8.graphemes instead.

This practically means replacing utf8.len with a function like this:

local function countGraphemes(str)
	local count = 0
	for _ in utf8.graphemes(str) do
		count += 1
	end
	return count
end

[Clinomanix]

I used this and it works just fine for me.

local label = game:GetService("Players").LocalPlayer.PlayerGui:WaitForChild("ScreenGui").Frame.TextLabel
label.MaxVisibleGraphemes = 0
local text = "testttt <font color=\"#FFA500\">color change</font>. testt"
local length = string.len(text)

for i = 1,length,1 do
	label.Text = text
	label.MaxVisibleGraphemes = i
	task.wait(.02)
end

Edit: Added video

[baconcoolboysun (Boi)]

Sorry for late reply but both of you did work so tysm.