[Update Dec-02-2020]
[Update Sep-17-2020]
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.
Tags
Currently we support the following tags in rich text strings:
-
<b>
: bolds text -
<i>
: italicizes text -
<u>
: underlines text -
<s>
:strikes throughtext -
<font size="size" color="color" face="faceName">
: controls text size/color-
size
accepts an integer and is equivalent to the TextSize property of existing text objects -
color
accepts either a RGB triple or a hex color:color="rgb(128,255,0)"
color="#77FF00"
-
face
accepts the face name of all fonts available currently with PascalCase, e.g. SourceSans, SciFi
-
If a tag is not in the list of accepted tags, we will silently ignore it, to allow forwards-compatibility with additional tags.
Examples
Example 1
<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
Example 2
<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.
Known issues
We have been aware of the following issues and we will ship fixes accordingly during the beta period.
Pending shipping bug-fixes / features:
TextStroke does not appear when RichText is enabled.@nhutp123 XAlignment does not work as intended with multi-line wrapped textTextBounds does not update correctly on high-res screens@ChuckXZ TextFits property does not update correctly when Richtext is enabled.Font Switching (use multiple fonts in 1 string)<br/>
for line break@LexiDog5 When RichText is on and you aren’t focused into the TextBox, it won’t show the placeholder.<sc>
/<smallcaps>
tags for smallcaps support.<uc>
/<uppercase>
tags for uppercase support.TextScale supportOccasionally incorrect wrapping that breaks words instead of always breaks at spaces@Vorlias RichText does not respect blank lines correctlyTextLabel / TextButton / TextBox.Content (a[ReadOnly]
string that shows you what is being rendered. )
WIP:
- Improved underline presentation for blocks of text that have different sized fonts mixed together
- Text are blurry when using TextScaled with richtext.
Localization Support:
- 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?
QuantumGuiText
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.
TextBox Behavior*
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.
Future work
The following items are on our roadmap for this quarter and will gradually rollout in the near future.
- TextTruncate and TextScale support
- GetTextSize(RichTextString)
- 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!