RTL not working

[robert-barahona]

NumberFlow version

0.5.1

Framework version

18.3.1

Describe the bug and the steps to reproduce it

Hi, I'm using NumberFlow to render the big value, as you can see in the screenshot, the currency symbol is in the wrong position, since the Arabic language is RTL, the symbol should be on the left, like the other values I am displaying in my app without NumberFlow (Left values on the screenshot)

I tried with dir="rtl" in the NumberFlow component but didn't work

Minimal reproduction (greatly appreciated)

No response

[barvian]

Hi, thanks for filing. This seems pretty complex, unfortunately. Intl.NumberFormat.formatToParts(), the API that powers NumberFlow, returns RTL entities like &rtl; instead of ordering the parts as they'd appear in RTL. I can't use these entities in the markup directly because they don't work when each part is inline-block, which is required for the animation. I could use the entities to rearrange the parts manually, aka reimplement the browser's RTL algorithm, but that gets pretty crazy when e.g. negative numbers are involved. I'm also not sure where to even start with something like that, so I noted this as a limitation on the docs for now and I'm open to suggestions if anybody has some 👋