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

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

Open
11ogic opened this issue Jul 4, 2024 · 0 comments
Open

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

11ogic opened this issue Jul 4, 2024 · 0 comments

Comments

@11ogic
Copy link

11ogic commented Jul 4, 2024

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.

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

No branches or pull requests

1 participant