Introducing OpenTypeFeatures

Updates Announcements
#1

Hi Creators,

We are excited to announce that the OpenTypeFeatures is now available for creators!

What is OpenTypeFeatures?

An OpenTypeFeature (hereafter referred to as the “feature”) allows glyphs to be rendered in different styles based on user selection (as long as the font supports the specified feature). For example, a single font can provide two styles for the letter ‘a’ or ‘g’ (as shown in the picture below).

1600×900 45 KB

What features are currently supported?

We currently support zero, which makes the 0 glyph slashed, and ss03, which replaces sets of default character glyphs with stylistic set 03 (a “glyph” is the visual representation of a character in a specific font). Please note that not all fonts support these features. The Builder Sans font fully supports these two features.

784×340 57.4 KB

This is only the first step; we plan to support more features in the future.

How can I get started?

There are two approaches in Studio to enable certain OpenType features based on your preferences:

  1. Through the property OpenTypeFeatures in the properties’ panel

The property takes a string in a format (we’ll talk about the format soon). The property can also be scriptable.

  1. Through the RichText tags features - toggle on RichText first, and add some features in the tag

<font features="[your feature string]">SomeTextWithFeatures</font><font>OtherTextDoesn’tHaveFeature</font>

The features added to the tag only applies to the sub-string surrounded by the tags.

The format

Both the property and the rich text tag should follow a correct format. However, there are many alternative formats for setting the features:

  1. A feature (say if an OpenType feature is called feat ) can be turned on by adding one of these strings:
    feat "feat"
    feat 1 "feat" 1 feat=1 "feat"=1
    feat on "feat" on feat=on "feat"=on
    +feat +"feat"

Note that double quotes can be replaced with single quotes.

  1. A feature can be turned off by adding one of these strings:
    feat 0 "feat" 0 feat=0 "feat"=0
    feat off "feat" off feat=off "feat"=off
    -feat -"feat"

  2. All features should be split by commas (,). For example, if I want to turn on the feature zero but turn off the feature ss03, I can set the property or the tag any of the following:
    a. zero, -ss03
    b. "zero"=1, "ss03"=0
    c. 'zero' on, ss03 off
    d. And so on…

  3. Please be careful about using nested quotes in scripts or in the RichText tag.
    a. Use a forward slash such as: text.OpenTypeFeatures = "\"zero\"=off"
    b. Use double quotes and single quotes such as: <font features="'zero'=off">1024</font>
    c. Use without quotes around the feature such as: text.OpenTypeFeatures = "zero off"

Error handling

There is a read-only property OpenTypeFeaturesError that will only show up when there is any error in parsing or applying the OpenTypeFeatures you set.

888×96 13.1 KB

We look forward to receiving your feedback and welcome any concerns or suggestions you may have. Your input is valuable to us and will help us improve!

For further insights into OpenType font features, you may refer to the following two links:

  1. OpenType font features guide in CSS
  2. Registered features by Microsoft
294 Likes
#2

This topic was automatically opened after 10 minutes.

#3

This is a really sick update! Will a documented wiki release for this anytime soon? I’m really hyped for this! :star: I also can’t wait for more OpenType features :happy4:

44 Likes
#4

Thank you for including examples for formatting - it makes us easier for us to implement!!

37 Likes
#5

Very nice addition, will help in UI designs!

27 Likes
#6

This is a really cool feature; I did not expect Roblox to add something like this,.

This is something I actually like for once.

25 Likes
#7

I like that they also want to give more work to the Roblox fonts, they already lacked several things like this, thanks!

22 Likes
#8

Too many great updates to keep up with lately! xD

19 Likes
#9

Very interesting update; going to make adding these cool characters to existing text much easier.

Reiterating the first reply, are there any docs you guys have planned for this?

Also, my only slight concern would be that it’s a little weird to have formatting errors as an entire property of the TextLabel/Box. How about it’s changed to red output in the console instead (as is the case right now when you enter an invalid property into a field in the Properties tab)?

Edit: Actually, this could make it hard to detect formatting errors. Maybe leave as is; just a thought :smile:

16 Likes
#10

Good update! Would be great if there was an improved text editor in the properties window for long strings. Currently its very difficult to edit a long string with any rich text in the properties window so I end up writing it in a script or something then copy pasting it into the property

21 Likes
#11

Second this.

Also, doing Shift + Enter should create a newline, and unicode characters should render correctly when entered in manually via the Text property. We shouldn’t need to use a script for this.

23 Likes
#12

fyi, you can write enters and special characters into smth like notepad or any textwindow, copy and paste them into the text property and they will appear without need for scripts

16 Likes
#13

This is definitely a cool extension to the otf format, given its just been sitting there, i wonder why other headers haven’t been supported yet, but zero and ss03 alone is cool!

ok now…

custom fonts

24 Likes
#14

I’m gonna have to do more research on this since I don’t understand anything at all. Two fonts in one? Also, as said above, implement custom fonts. Not combined ones.

16 Likes
#15

interesting feature, waiting on documentation :slight_smile:

11 Likes
#17

This is a really nice qol thing for now instead of boring plain 0’s we can now put a strike through them, allowing for more variety and possible one step closer to something like being able to upload our own fonts (though that idea may be a little silly I guess)

11 Likes
#18

you dont need a script for this I believe you can already do \n to make new lines, however I can see the need for shift + enter as it makes things a lot neater

10 Likes
#19

custom fonts can already be achieved by image abuse, there’s a hacky way for this typa thing (however I can understand the need for this to be a base roblox thing), if you’re interested, heres what im talking about!

12 Likes
#20

Using spritesheets have a few technical issues that aren’t immediately obvious.

The most notable is that both ttf and otf have lots of data dedicated to rendering text at small sizes, because png isn’t a vector format unlike most font formats, it starts to look really blurry the smaller it gets.

How do you handle UTF-8, thats a lot of characters you’d have to account for, even if you just do the first 127 bytes of ASCII, that’s still a lot of regional characters that are missing.

As well as that, Roblox is pretty trigger happy with spritesheets if you’re not careful.

12 Likes
#21

This is great, will absolutely help with UI designing.

6 Likes