Arabic text rendered incorrectly

[ZianeA]

Describe the bug Arabic text is displayed incorrectly: the letters are not joined. Here's an image that explains how arabic text is supposed to be rendered:

And here's how it looks like in Lottie:

https://user-images.githubusercontent.com/14791787/232570691-5880017b-52ae-47c2-a214-2e132cd177a8.mp4

Animation file: arabic.zip

This issue has been previously reported in #1755, and it was suppose to be resolved in #2001. Unfortunately, that doesn't seem to be the case.

I did investigate the issue. Adding OTHER_LETTER to the isModifier function seems to fix it:

public class TextLayer extends BaseLayer {
    ...
    private boolean isModifier(int codePoint) {
      return Character.getType(codePoint) == Character.FORMAT ||
          ...
          Character.getType(codePoint) == Character.OTHER_LETTER ||
          ...
          Character.getType(codePoint) == Character.SURROGATE;
    } 
} 

However, I'm not sure if this may break other elements as the category Lo contains 127,004 character. Furthermore, this solution alone won't solve the issue of RTL languages (there's already an open issue #1145 for it). I did find a potential solution for this:

public class TextLayer extends BaseLayer {
    ...
    private void drawFontTextLine(String text, DocumentData documentData, Canvas canvas, float tracking) {
        Bidi bidi = new Bidi(text, Bidi.DIRECTION_DEFAULT_LEFT_TO_RIGHT);
        List<String> charStringList = new ArrayList<>();
    
        for (int i = 0; i < text.length(); ) {
            String charString = codePointToString(text, i);
            charStringList.add(charString);
            i += charString.length();
        }
    
        if (bidi.isRightToLeft()) {
            Collections.reverse(charStringList);
        }
    
        for (String charString : charStringList) {
            drawCharacterFromFont(charString, documentData, canvas);
            float charWidth = fillPaint.measureText(charString);
            float tx = charWidth + tracking;
            canvas.translate(tx, 0);
        }
    }
}  

After applying all the changes above, the animation looks correct:

https://user-images.githubusercontent.com/14791787/232572407-8eab9fc2-ca0b-4ada-b423-794e50a180c7.mp4

What version of Lottie did you test this on? 6.0.0

What version of Android did you test this on? Android 11

[gpeal]

Would you be willing to put up a pull request for this? I'm not an expert in RTL or non-latin languages so it would be great if somebody with more familiarity could take a look.