What is RichText?
Rich text uses simple markup tags to style individual words or phrases within a single string of text. Initially, we will provide font size, color, bold, italics, underline and strikethrough.
We plan on adding additional style options in future updates.
How do I use it?
First of all, enable rich text beta feature in studio.
Enable the Beta Feature
To enable the beta feature:
- Go to File - Beta Features in studio
- Check the box before RichText Beta
- Restart studio
To use RichText, simply type in the string in the Text property or directly into the text object. Add tags to the part(s) of string that you want have special formatting. The format includes an opening and closing tag to mark the phrase you want to format:
<Tag> formatted text </Tag>
Next, either check the RichText checkbox or set it through lua script:
textLabel.RichText = true
You can enable/disable the RichText checkbox to toggle between the full string including tags, and the rich text formatted string. This can be useful to help find any mistakes you may have made with the tags.
Currently we support the following tags in rich text strings:
<b>: bolds text
<i>: italicizes text
<u>: underlines text
<font size="size" color="color">: controls text size/color
sizeaccepts an integer and is equivalent to the TextSize property of existing text objects
coloraccepts either a RGB triple or a hex color:
If a tag is not in the list of accepted tags, we will silently ignore it, to allow forwards-compatibility with additional tags.
<b>bold text</b> <i>italic text</i> <u>underline text</u> <s>strikethrough text</s> <font color= "rgb(240, 40, 10)">red text</font> <font size="32">bigger text</font>
Sample Result 1
<font color="#abcdef"><u> <i>italic text</i> underline text</u></font>
Sample Result 2
Nested tags are supported, as long as tags are closed in the reversed order they get opened.
We have been aware of the following issues and we will ship fixes accordingly during the beta period.
Pending shipping fixes:
TextStroke does not appear when RichText is enabled. @nhutp123 XAlignment does not work as intended with multi-line wrapped text
- TextBounds does not update correctly on high-res screens
- Occasionally incorrect wrapping that breaks words instead of always breaks at spaces
- Improved underline presentation for blocks of text that have different sized fonts mixed together
- @LexiDog5 When RichText is on and you aren’t focused into the TextBox, it won’t show the placeholder.
- @ChuckXZ TextFits property does not update correctly when Richtext is enabled.
- When RichText v1 is released, the tags will be removed before being sent for automatic translation, so the formatting won’t appear in other languages (unless you apply the tags to the localized strings)
Please report any additional issues that you find as a reply to this post and we will add them to the list.
Is there anything else I should know about?
Bundled with Rich Text is a new feature called QuantumGuiText, which reduces the number of layout operations required to display text. If devs witness any issues with text objects where RichText isn’t enabled, report either in this post or with a bug report that specifies QuantumGuiText instead.
The behavior of a textbox that has RichText enabled is as demonstrated below:
When the textbox gets focused, user will be editing and interacting with the original xml string.
When the focus is lost, it will automatically parse and render string as RichText.
I want to type a <> without it being parsed and ignored as tags, what should I do?
There are escape forms of characters that can be used instead when rich text is enabled.
The following items are on our roadmap for this quarter and will gradually rollout in the near future.
- TextTruncate and TextScale support
- Font Switching (use multiple fonts in 1 string)
- TextStroke Color Switching
- Better TextStroke and Configurable TextStroke Width
Additional formatting styles not listed here are likely to ship later this year.
Please let us know what you think when you test the beta version!