Issue with RTL (Right-to-Left) Text Rendering in Lottie
11ogic opened this issue · 0 comments
11ogic commented
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
- 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
}
]
}
- 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.