Right-to-left Text Support

Hi @lliliililililillliii , did you try reporting this issue in the bug reports section in the devForum? If not, could you please initiate one in the section and see if the team can help resolve it? If so, could you please share the devForum link so I may be able to share it with my co-workers. Thank you.

3 Likes

Hello @OutlookG I posted about it on Massive issue regarding non English languages on Roblox but it didn’t post in the bug report so if you can to forward In #bug-reports? thank you

1 Like

For some reason I’m not able to open a bug report topic

2 Likes

I feel like adding a new rich text tag (<rtl>content</rtl>) would be better for this purpose. It seems like there are numerous issues with RTL displaying correctly in chat, this would be a solution.

3 Likes

Hi @2jammers , thanks for your feedback! We are also thinking of adding this right now.

3 Likes

Hey @CharlieGordonnn , I wanted to bring your attention to an important matter regarding non-English languages on Roblox. I encourage you to read and familiarize yourself with the details I shared on the Roblox Developer Forum in this thread: Link to see

3 Likes

Hi @Myoffice129 , I have internally forwarded your post to the related team and they will work on investigating the issue. Thanks for your patience!

4 Likes

use @Bug-Support

2 Likes

Hi everybody, our phase 2 is announced just now, please check this article around new updates and please leave your feedback there!

4 Likes

Apologies for posting this here, but the phase 2 thread is currently locked.

I’m still really confused about using RTL with RichText. I saw this,

but I don’t understand.

Here’s my English text, followed by how it should appear:

Your friend Bob <font color="#73d3ff">joined</font>

image

Here is my Arabic text, followed by how it should appear:

صديقك Bob <font color="#73d3ff">انضم</font>

image

… I think, anyway — I don’t know Arabic, but this is how it appears in my Windows Notepad with Right-to-Left Reading Order enabled:

image

(raw text: صديقك Bob انضم)

And here’s the bidirectional Arabic RichText segment in the same Notepad (what a mess this is to read lol):

However, here’s the problem I’m having, in a 2x2 square:

The bidirectional text in the RightToLeft row only renders correctly without RichText. Am I using RichText wrong here? Adding a dir="rtl" or dir="ltr" tag doesn’t work for me either.

You can interact with the “punnett square” UI’s using this .rbxm file. (8.7 KB)
Just paste it into StarterGui.

I would really appreciate an answer on this. Thanks in advance!

2 Likes

Hi @GFink , thanks for drafting the detailed report. If I’m understanding it correctly, the rich text is not working as expected here for bidirectional text.
I have tried copy-pasting the example you shared, and yeah I have reproduced the same result as you listed above.
However when I tried crafting it like this:
image
Source text: <font color="#73d3ff">انضم</font> <font dir="rtl">صديقك Bob</font>

I was able to get an expected result. The breakdown is:

  1. Since the rich text tags always layout from left to right (which means, ABC123 will always layout ABC to the left, and 123 to the right, no matter how text in tags are re-arranged according to its language). So the Arabic word for “Joined” should go first.
    <font color="#73d3ff">انضم</font>
  2. For the second tag, we should type صديقك first and then Bob. If we type Bob first and then صديقك , the text appears to be same but internally, the first character of the string is different. (The reason why it appears the same with the other is: if you type صديقك first and then Bob, the paragraph is regarded as RTL, so صديقك shows up on the right first and then Bob is on the left. If you type Bob first and then صديقك, the paragraph is regarded as LTR, where Bob goes on the left and then صديقك.) What I’m trying to tell here is that please note that the typing order matters, even though the text may look the same. So you could try re-typing (or re-copying-pasting) and see if it’s still a problem. I also added a tag to force it to RTL just to make it more clear and also it’s a better control over the spaces between. It seems the tag is not necessary for making it RTL, if you type Arabic first then the tag is detected as RTL.

I know this may be very confusing, so please let us know if any point above does not make sense. Hope it works out as expected on your end!

4 Likes

Thanks a ton for responding so soon! I hope this example can answer other readers’ questions as well.

This confused me for a bit until I read your source text closer. When I read “tags layout from left to right” I think of the text used for the tags themselves like stroke, smallcaps, font color="#FF0000" and so on, rather than the text that those tags are encapsulating.

image

It wouldn’t make much sense to say the tags themselves always go from left-to-right because of course they do, they need to use the standardized English formatting to work :upside_down_face:

I am assuming that because the text انضم (‘joined’) is a single word, this is the reason its font tag doesn’t need a dir="rtl" attribute (the word itself always renders right to left). That makes sense, but in a scripting context it would make more sense to include that dir="rtl" attribute in all of the RichText tags modifying RTL text, since often the developer doesn’t know if the text contains one or more words.

The second tag is confusing to me because if the TextLabel’s TextDirection property is already set to RightToLeft, shouldn’t it not matter what order the uncolored text (unmodified by a RichText tag) is in? Roblox should be rendering it right-to-left because of that property, but I suppose RichText makes that property not matter. Or perhaps its the presence of any RichText tags within the string?

Testing does reveal that it’s not necessary in this case, but it does seem to have the minor side effect of removing the space between the Arabic “joined” and the name “Bob”.

Before: <font color="#73d3ff">انضم</font> <font dir="rtl">صديقك Bob</font>

image

After: <font color="#73d3ff">انضم</font> صديقك Bob

image

It doesn’t appear I added or removed any spaces,

image

so it’s curious as to why the ‘after’ print has no gap between those words.

Anyway, I have been trying to figure out the logic behind how to use RichText with bidirectional text for a few hours now and honestly I still do not understand. I’ve gotten it working for my use case by trial and error though, and your post did help with that. It would be nice if there was a tutorial post or video walking through maybe 10 different examples and edge cases though.

3 Likes

Thank you very much for continuing to maintain this thread and answer questions. Are there plans to make better RTL support for RichText and TextChatService? It’s not 100% necessary for my use case but I am curious to see since GUI’s now officially support it with the TextDirection property.

  1. RTL RichText looks fine when it’s on a single line, other than the fact it’s still aligned to the left in TextChatService’s TextLabels.

    I included the English translation so you can tell what the message says:

    image

  2. However, when RichText spans multiple lines,

    image

    you can see the reader has to start reading from the bottom of each message, like this:

    image

    (and the text is still aligned to the left)

    Source text:

    <b><font dir="rtl">השרת</font> <font dir="rtl">את</font> <font dir="rtl"><font color="#ff5555">עזב</font></font> <font face="Ubuntu" weight="heavy" color="#01a2ff">cool guy (@GFink)</font> <font dir="rtl">חברך</font></b>

  3. I changed the text alignment and did some work on the RichText string to make it appear as I want on multiple lines (just for testing). I assume this is what it should look like:

    image

    Source text:

    <b><font face="Ubuntu" weight="heavy" color="#01a2ff">cool guy</font> <font dir="rtl">חברך</font><br/><font dir="rtl">השרת</font> <font dir="rtl">את</font> <font dir="rtl"><font color="#ff5555">עזב</font></font> <font face="Ubuntu" weight="heavy" color="#01a2ff">(@GFink)</font></b>

    You aren’t typically supposed to mess with CoreGui, but I did for the sake of the above screenshot. In Studio, you can navigate to the TextLabel and change the TextXAlignment property:

  4. Without RichText, the text seems to concur with my above idea:

    image

    Source text:

    חברך cool guy (@GFink) עזב את השרת

  5. Notepad with Right-to-Left Reading Order enabled also agrees:

TextChatService reproduction steps:

  1. Ensure TextChatService.ChatVersion is set to TextChatService

  2. Set TextChatService.ChatWindowConfiguration.TextSize = 42

  3. Run this in the command bar on the client from a running Solo session:

local text = "חברך cool guy (@GFink) עזב את השרת" -- change this as you wish
game.TextChatService.TextChannels.RBXSystem:DisplaySystemMessage(text)

Here’s what it would look like if RTL/bidirectional text worked perfectly for RichText and TextChatService:

I’m not going to try and make my RTL text work for multi-line strings, but I’m sure it could be done with TextService::GetTextSize.

Excited to see what new updates will come!

2 Likes

Any plans on this releasing to regular chatting? RTL is especially buggy on it and would be easier to read etc

Thanks for ur continued support!:saluting_face:

2 Likes

Thanks for your detailed feedback. We will definitely work on making better RTL support and adding support to other languages too.
We actually had to introduce a new flag to make the legacy chat window to properly display RTL text. The example you have sent is the new chat service, the way it works is: no matter what the paragraph is, it renders like this from left to right
[Name Tag] : [Text]
or multiple lines:
[Name Tag] : [Text2 Text1]
[Text5 Text4 Text3]

The reason it currently works like this is because we haven’t fully support RTL for UI layout. We have future plans to flip layout to display from right to left if a user chooses an RTL language in their settings. At that time I believe our chat will properly render from right to left like this:

[Text2 Text1] :[Name Tag]
      [Text5 Text4 Text3]

So I guess for your case, what we really need is a way to control the direction of the rich text tags which we currently do not support. :smiling_face_with_tear:

2 Likes

By regular chatting, did you mean the legacy chat service or the new chat service? Could you please provide a screenshot? Thank you!

2 Likes

The problem with RichText tags seems to be that they are considered LTR text by the text direction interpreter. I wonder if that interpreter could instead use a sanitized version of the text which doesn’t have the RichText tags? They seem to mess up the process of determining text direction.

1 Like

sorry if im late but, i learned a bit of html lol!

1 Like

@GFink , thanks for your input, I will talk with our language specialist about this issue. It seems html does support changing a <div> to layout from right to left.

1 Like

Hello,

Thank you very much for bringing these RTL text styling issues within text labels to our attention. Your detailed report and thorough testing are invaluable to us, and we truly appreciate the effort you’ve put into documenting this matter.

We’ve successfully reproduced the bugs based on the scenarios you outlined, which confirms the need for a closer examination and action on our part. I’ll be collaborating directly with our engineering team to delve into these issues and work towards implementing a fix. Your findings have been instrumental in highlighting these challenges, and we’re committed to improving the platform’s handling of RTL text for all developers.

While I’m unable to provide a specific timeline for a solution at this moment, please rest assured that addressing this is a priority for us. We understand the importance of this issue and its impact on creating inclusive and accessible games and experiences on Roblox.

Thank you once again for your contribution and patience. We’ll keep the community updated on our progress.

Best regards,