Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arabic text rendered incorrectly #2279

Open
ZianeA opened this issue Apr 17, 2023 · 1 comment
Open

Arabic text rendered incorrectly #2279

ZianeA opened this issue Apr 17, 2023 · 1 comment

Comments

@ZianeA
Copy link

ZianeA commented Apr 17, 2023

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:

device-2023-04-17-191627.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:

device-2023-04-17-191243.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
Copy link
Collaborator

gpeal commented Jun 18, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants