Highlighting substrings within a single TextBlock(RTL)

GoJS
1

Hi,

I found this topic which is similar to my problem:

But the solution here doesn’t handle RTL languages. So, can you please do it for RTL languages or give me a hint to change it.

Thank you.

2

Unfortunately because we do not have access to how the browser is rendering the RTL text (the Unicode Bidirectional Algorithm) we can’t easily adapt this sample for you. It is not easy from the JS string to determine where glyphs start and end as they are printed on the screen.

3

Is it impossible to adapt it ? because my project it’s really depending on this feature, actually this is the only thing left to finish my project. If there is anyone you know can help me in this i will really be appreciated. Because the problem here is in this part :

      //??? doesn't work for "start" and "end" in RTL languages
            var indent = 0;
            if (tb.textAlign === "center") indent = (metrics.maxLineWidth - metrics.arrSize[li]) / 2;
            else if (tb.textAlign === "right" || tb.textAlign === "end") indent = (metrics.maxLineWidth - metrics.arrSize[li]);
            lite.position = new go.Point(x + indent, y);
            pan.insertAt(0, lite);
            x += strwidth;

And here when i tried to adapt your code in CodePen:
https://codepen.io/anon/pen/NJKbMd?editors=1010

It works but in the wrong direction.

So, if we know how it’s work for the LTR i think we can adapt it to RTL languages (e.g Arabic) not easily but we can, right?

Also, is there another way to coloring or highlighting substrings within a single TextBlock(RTL).

Thank you.

4

The problem is that Aaa Bbb Ccc is displayed as Ccc Bbb Aaa in RTL, but I cannot programmatically find out where Aaa begins (In LTR at 0%, in RTL somewhere near 70%), so I cannot position the highlight correctly. How the browser (correctly) draws it does not exist in the JavaScript, so there’s nothing good to test against.

I will try to think of a clever way to solve this problem tonight, but it might not have a good solution.

5

Would it be sufficient for your particular case if each TextBlock only displayed text that goes in one direction? That is, can you assume there’s no mixed-direction text?

6

Yes the text in RTL language (Arabic)
It’s like this:
هَلْ سَبَقَ لَكَ أَنْ أَرَدْتُ تَشْكِيلُ نَصَّ أَوْ جُمْلَةٍ
{1} فقرة

7

I’m sorry for bothering you, but is there any update regarding this issue.

8

As far as I know, nothing has changed – not the library nor our understanding of the issue. Your example text has mixed direction characters, so what Simon said above still applies.

9

Thank you for replying
I think you said is mixed direction characters because the number 1 so if i make it in one direction for example:
هَلْ سَبَقَ لَكَ أَنْ أَرَدْتُ تَشْكِيلُ
is there any changes ?. If there is not it’s ok and thank you for your help and replying.

10

It is possible, like this: https://codepen.io/simonsarris/pen/LaGgJb

It might work very well in simple cases. But I cannot guarantee that will work in all cases.

11

Thank you so much for your help.