RichText [TextScaled Support Added]

[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
    Screen Shot 2020-07-14 at 4.57.38 PM

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>

Screen Shot 2020-07-15 at 4.19.17 PM

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 through text
  • <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
Screen Shot 2020-07-15 at 4.26.19 PM

Example 2

<font color="#abcdef"><u> <i>italic text</i> underline text</u></font>

Sample Result 2
Screen Shot 2020-07-16 at 12.37.49 PM
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:

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!

Community resources

786 Likes

This is truly gaming changing! I was really hoping for this to become a thing and finally, it is here! Thank you very much.

86 Likes

This is going to be huge, This adds a new element to text itself. Thanks to the devs for putting in the work, Whats next to text?

31 Likes

This is an excellent update, been waiting for it for years! Thank you :slightly_smiling_face:

22 Likes

FINALLY! I found this randomly on the Release Notes but now it’s out! Thank you!

I like the use of html, maybe next we can use it for our place description!

Kinda sad how the 3 best updates of this year are in beta :frowning: (wait UICorner is LIVE?!?!?!)

And how is this a month later…?

23 Likes

I’ve been waiting for this for weeks now ever since the release notes! I guess it’s time for text to become bold in certain parts of a text that will become important to many games, but a month later and it’s open to the public, strange…

I tested this out with some of my text, I must say the results are nice:

Image:

Thank you.

28 Likes

I can’t wait to add this to my game and see how much player’s like it! Thank you.

13 Likes

Finally! No longer having to make multiple TextLabels just to make some words bold, and some a different color! :grinning: This was a much needed feature, and I can see it being used well.

17 Likes

I hope this is followed by custom fonts, but it is nice to see some work done on this part of studio! This will be very helpful in the future.

14 Likes

Can’t wait for this to be enabled! Something like this has required quite a bit of programming to get working correctly. What is the current expected release date?

15 Likes

AAAAAAAAAAAAAAAAAA

This is simply amazing! Thank you so much! Now we can finally have bold and italics in roblox chat!

14 Likes

YEAH BOYS!!!

Amazing addition can’t wait to use this!

11 Likes

Would’ve been great if we could disable a specific object’s ability to parse tags through some property rather than using characters as escapes - other than that it’s a long awaited feature, finally.

Edit: realized you can

9 Likes

Oh no, XML. This will not be very fun. So many people will get things wrong :sweat:

A magical markup format that is parsed and handled completely by Roblox is really, really bad. It’s like HTML all over again, and you know how messy that can be.

Please add helper functions for understanding markup more easily, like conversion of text <-> AST, stripping of tags, escaping, etc. otherwise developers will get this wrong and you’ll have an injection nightmare.

21 Likes

Maybe I didn’t read the thread properly and missed this, but if I didn’t miss it, could potentially an extra property be attached if RichText is true so that I can see a raw string without rich text tags or am I just going to have to be expected to remove them every time I want to parse a string without tags?

The feature is great and I’m really excited to just use a single TextLabel instead of stitching things together with UIListLayouts and whatnot, but I would find it an utter pain to have to constantly use balanced captures and remove tags before parsing strings if I enable rich text for certain inputs and if I need to work with a raw, unformatted string for any reason.

27 Likes

This is pretty cool, however i feel like there should be more attention shifted to having actual good fonts. All fonts on Roblox feel wayyyy over used because of how little there are. At the moment, i’m using custom text on image labels instead of fonts, because of how plain and overused they look. This of course, means i can’t Localize my game.

I also don’t really see the use of this feature…

This is nice, but please release new fonts next.

22 Likes

I’m about to blow up, blast off, and YAHOO at the same time.

10 Likes

Y’all are just doing it this year. Keep it up.

9 Likes

Oh my god, it’s finally here! Thank you very much y’all. I can be happy now.

11 Likes

The feature I have been waiting for a very long time, love it! Will it have a text clickable and then call a function?

7 Likes