Add RTL text support

[ArthurVimond]

Hi!
I'm currently working on adding RTL text support, and I have a few questions:

1- Should we detect the direction for each TextLayer input and draw them independently or just getting the device current language setting and apply the same direction for all texts?

2- Regarding the text justification, drawing RTL texts with Justification.LEFT_ALIGN should start from the right (not from the left), right? Also, should we refactor the Justification enums as START_ALIGN, CENTER, END_ALIGN (like layout margin / padding system)?

Thanks.

[gpeal]

@ArthurVimond Awesome!
1- What information would you use to detect the direction on a layer by layer basis?
2- That sounds like a good idea! I'm not super familiar with the inner workings with other text systems but that does seem to be parallel to Android's APIs which is good.

[ArthurVimond]

@gpeal
1- For each layer (and maybe even for each line of a TextLayer), I was thinking about iterating on each character by using Character.getDirectionality(char ch) to determine the direction, and if all characters have the same RTL direction, the line will be RTL, otherwise, it will fallback to LTR.
By watching this video, After Effects' text direction detection is even more powerful as it's also done on words of different directionality.
2- I will then refactor the TextAlign left / right enums to start / end.

[gpeal]

@ArthurVimond Sounds good :) Rebase on master as I did some work in TextLayer for unicode support today.

[kartik1225]

@ArthurVimond Awesome!
1- What information would you use to detect the direction on a layer by layer basis?
2- That sounds like a good idea! I'm not super familiar with the inner workings with other text systems but that does seem to be parallel to Android's APIs which is good.

import java.text.Bidi;

Bidi bidi = new Bidi( title, Bidi.DIRECTION_DEFAULT_LEFT_TO_RIGHT );

if( bidi.isLeftToRight() ) {
   // it's LTR
} else {
   // it's RTL
}

This detects perfectly weather the text is RTL or LTR, So based on that we just need to put the right direction accordingly.
Found from stackoverflow.

[hfeky]

For anyone looking for a solution to do that for Lottie with Compose, I flipped the lottie composition by scaling the animation to the other direction like that.

fun Modifier.autoMirror(): Modifier = composed {
    if (LocalLayoutDirection.current == LayoutDirection.Rtl) {
        this.scale(scaleX = -1f, scaleY = 1f)
    } else {
        this
    }
}

and

val composition = rememberLottieComposition(LottieCompositionSpec.RawRes(...))
LottieAnimation(
    composition = bikeComposition.value,
    modifier = Modifier.autoMirror()
)