Arabic text rendered incorrectly #2279
Description
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