airbnb/lottie-web

Issue with RTL (Right-to-Left) Text Rendering in Lottie

11ogic opened this issue · 0 comments

Description

I am experiencing issues with rendering RTL (right-to-left) text in Lottie animations. The Arabic text does not align correctly and does not display in the expected order.

Steps to Reproduce

  1. Use the following Lottie JSON file with Arabic text:
{
  "v": "5.7.6",
  "fr": 30,
  "ip": 0,
  "op": 60,
  "w": 500,
  "h": 500,
  "nm": "Arabic Text Example",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ty": 5,
      "nm": "Arabic Text",
      "ip": 0,
      "op": 60,
      "st": 0,
      "bm": 0,
      "sr": 1,
      "ks": {},
      "t": {
        "d": {
          "k": [
            {
              "s": {
                "sz": [300, 100],
                "ps": [-150, -50],
                "s": 36,
                "f": "Arial",  // Using a system font that supports Arabic
                "fc": [0, 0, 0],
                "j": 2,  // Justification: 0-Left, 1-Center, 2-Right
                "tr": 0,
                "lh": 43.2,
                "ls": 0,
                "t": "مرحبا بكم",  // Correct Arabic text
                "ca": 0,
                "a": []
              },
              "t": 0
            }
          ]
        },
        "p": {},
        "m": {
          "g": 1,
          "a": []
        }
      },
      "ao": 0
    }
  ]
}
  1. Load the animation in a web page with the following script:
const lottieContainer = document.getElementById('lottie');
    const animation = lottie.loadAnimation({
      container: lottieContainer,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'lottie-file.json'
    });

  animation.addEventListener('DOMLoaded', () => {
      const textLayer = animation.renderer.elements.find(element => element.data.nm === 'Arabic Text');
      if (textLayer) {
        textLayer.textProperty.currentData.t = 'مرحبا بكم';
        textLayer.textProperty.currentData.j = 2;  // Setting right alignment
        animation.renderer.updateText();
      }
    });

Expected Behavior

The Arabic text should display correctly from right to left, with proper alignment and character order.

Actual Behavior

The text does not align correctly, and characters do not display in the expected RTL order.