Modifying Text Appearance Within the Text (Using RichText)

BuilderDolphin · January 16, 2022, 1:15am

Modifying Text Appearance Using RichText

Hello! In this tutorial, I will be showing you how to modify text style within text using RichText. Towards the end of this tutorial, I will also be showing methods of implementing this in scripts.

Although there is a tutorial on RichText on the developer hub, this tutorial goes more in-depth into how it can be implemented.

Examples

Text = "<stroke color="rgb(0,0,0)">Player</stroke> has joined the game."

Text = "You currently own 1 of the item "<stroke color="rgb(0,0,0)">Blue Block</stroke>""

Text = "While I was walking in the forest, I had spotted something glowing <font color="rgb(255,0,0)"><stroke color="rgb(0,0,0)">red</stroke></font> in the distance. Could it have been a <b><font color="rgb(255,0,0)" face="Antique"><stroke color="rgb(0,0,0)">Monster?</stroke></font></b>"

1.1 The Basics of RichText

In this section, I will be going over the very basics of using RichText. This includes enabling RichText, creating & modifying tags, and implementing "escape characters". This section is basically a simplified version of the

Developer Hub Tutorial.

1.2 Enabling RichText

Before we begin with styling text elements, you need to enable the RichText property first. The RichText property is only found in Instances with the property "Text", such as TextLabels, TextBoxes, and TextButtons. Once you have an Instance with this property, go ahead and enable it!

Upon being enabled, probably nothing happened to the text. This is because RichText requires tags to style text, which we will be going over next.

1.3 Markup Tags

Markup tags are pretty much alike to XML/HTML tags. Tags have a beginning and an end in text. The tag name depends on what you want to do to the text. Any text within the tag will be changed based off of the tag.

The format of a tag is:

<tagName> text </tagName>

A list of possible tags can be found on this page.

If you would like to have text be styled by multiple tags, you are able to nest them within other tags.

This is how tags are nested:

<tagName1><tagName2><tagName3> text </tagName3></tagName2></tagName1>

There is no limit or minimum to the amount of tags that can be nested within another.

Here is an example of tags and nested tags in use:

<b>Bold</b> | <i>Italic</i> | <i><b>Italic-Bold</b></i>

1.4 Tag Attributes

Just like XML/HTML, tags have attributes that can be added to modify its appearance. Attributes are added to tags from the beginning. All markup tag attribute values are in quotations (" "). Currently, the only tag that has working attributes is the font tag. Information on its attributes can be found here.

The format of adding an attribute to a tag is:

<tagName attributeName="value"> text </tagName>

Attributes are able to be separated with a space, allowing for multiple attributes to be added to a tag:

<tagName attributeName1="value" attributeName2="value"> text </tagName>

Here is an example of using attributes:

<font color="rgb(0,0,255)">Really Blue</font> | <font color="rgb(152,194,219)" size="20">Baby Blue</font> | <font color="rgb(9,137,207)" size="50" face="SciFi">Electric Blue</font>

1.5 "Escape Characters"

There are some characters that may be mistakenly picked up by the RichText format, such as the characters <, >, and ". To have these characters display normally in RichText, we need to use their "Escape" form. A list of escape forms can be found on this page.

Here is an example of implementing “Escape Characters”:

1 &gt; 0 | 0 &lt; 1 | &quot;Player&apos;s&quot; | This &amp; That

2.1 Script Implementation

In this section, I will go over ways to use scripts to easily modify RichText. This will involve using scripts to create markup tags, which can then be modified to get the target text style.

2.2 Tag Creation Function

First of all, we need to create a script to hold all of our code. I will be doing this in a ModuleScript to make the functions accessible to multiple scripts. I am going to be inserting my ModuleScript into ReplicatedStorage, allowing both client and server to access it.

Once this is created, open the ModuleScript.

To start off, let’s create a function named “createTag”, which has the parameters: tagName, text, and attributes. We can also define the tag start and end (string.format guide).

local module = {}

function module.createTag(tagName,text,attributes)
	local tagStart,tagEnd = string.format("<%s",tagName),string.format("</%s>",tagName)
end

return module

If you look closely, you can see that the tag start is not closed off with a “>”. This is because we still may need to add attributes, which is what I will be going over next.

2.3 Tag Attribute Creation

Now that we have the tag start and end, we will take a look at the tag start. As you probably know from last section, we need to add attributes to the tag start. Before attempting to add attributes to the start of the tag, we need to check if "attributes" even exists, since it is an optional parameter.

If "attributes" exists, then we need to loop through all of the attributes to concatenate to the tag start string. Attributes should be passed as a dictionary, with the format:

{attributeName = value}

After this, we are able to close off the tag start with “>”.

local module = {}

function module.createTag(tagName,text,attributes)
	local tagStart,tagEnd = string.format("<%s",tagName),string.format("</%s>",tagName)
	if attributes then
		for i,v in pairs(attributes) do
			local value = tostring(v)
			tagStart = tagStart..string.format(' %s="%s"',i,value)
		end
	end
	tagStart = tagStart..">"
end

return module

2.4 Finishing Up

All that we really need to do in our function now is fully concatenate our final string. Once this is done, we can return the final string.

local module = {}

function module.createTag(tagName,text,attributes)
	local tagStart,tagEnd = string.format("<%s",tagName),string.format("</%s>",tagName)
	if attributes then
		for i,v in pairs(attributes) do
			local value = tostring(v)
			tagStart = tagStart..string.format(' %s="%s"',i,value)
		end
	end
	tagStart = tagStart..">"
	local finalString = tagStart..text..tagEnd
	return finalString
end

return module

Our function is now complete! Next, we will be testing this function out on actual RichText.

2.5 Testing It Out

To test out our function, we need to create another script to call the function. I will be creating a LocalScript inside of a TextLabel with RichText enabled.

First of all, we need to require the module, which I can do by using require(). Once the ModuleScript is required, we can call the function. For my script, I will be making a blue text.

local richTextHandler = require(game.ReplicatedStorage:WaitForChild("RichTextHandler"))

local resultText = richTextHandler.createTag("font","Blue",{color = "rgb(0,170,255)"})
print(resultText)
script.Parent.Text = resultText

Output - Blue - Client - LocalScript:4

Overall, everything worked out well! One more thing though. If we want to nest tags, we need to have the text of the “outer” tag equal to the “inner” tag. This process can be repeated to nest more tags. I have modified my script to have the text be bold and italic as well.

local richTextHandler = require(game.ReplicatedStorage:WaitForChild("RichTextHandler"))

local resultText1 = richTextHandler.createTag("font","Blue",{color = "rgb(0,170,255)"})
local resultText2 = richTextHandler.createTag("b",resultText1)
local resultText3 = richTextHandler.createTag("i",resultText2)
print(resultText3)
script.Parent.Text = resultText3

Output - Blue - Client - LocalScript:6

Technically, this method of nesting could be made more efficient utilizing for loops, however, this section is mainly to get an idea of how to script with RichText.

Conclusion

We have now reached the end of the tutorial. Hopefully this tutorial was able to help you. If you have any questions/feedback regarding this tutorial, feel free to reply with them. Section 3 may be added soon, which will be going over more advanced methods of implementing RichText.

Did you find this tutorial useful?

Yes
Partially
No

0 voters