Hi saijav,
I did some digging and found some interesting things. So far, to my understanding, this is actually a browser issue. The browser has no idea how to properly format and arrange the word/letter order since modern browsers are too damned smart and are autodetecting the language direction. In my testing, this also appears to be specific with Urdu and doesn’t affect other RTL languages.
Even weirder, this language appears to have a bug with line-wrapping – which is the thing that is actually causing the “jumble”. The font treats each line (not line break, just a wrap) as if it were its own sentence. You can see it in action as you increase and decrease your browser window.
Can you please confirm, perhaps with a screenshot, how the Urdu is supposed to look for the first question so I can use it as the baseline comparison?
How to fix.
Unfortunately, my attempts to create an “elegant” solution for you have failed. This is a super weird issue that appears to be Urdu-specific that I’ve never come across before.
OPTION 1: Featured image.
This option will 100% work for you. If you create an image and put the Urdu in that image, you can then set this image as the Featured Image for the question. Since it’s an image, it will always be perfectly formatted no matter what browser your visitors are viewing in, and regardless on what they have their language set to. Only downside is that it is tedious to have to create an image for each question.
OPTION 2: Table-caption
Another option is to wrap the Urdu in a span. We can then target that span with CSS and give it the display: table-caption; property. This will basically “stack” each word on top of each other, meaning one word per line. Definitely not the most elegant solution, but it will at least force the same order for everyone.
Other than that, I’m out of ideas. I think this is just literally a browser bug that we have to wait to be fixed. Even Google is broken with this.
Here is a video demonstrating the exact same problem with Google Translate: https://youtu.be/OuCnTxOIwS4
I’m marking this as solved for now as A) Using the featured image will solve this for you, and B) The underlying issue is language/browser-specific and not something that I can change on my end.
However, please feel free to continue to respond here if you have any further insights/questions or if anyone else reading this can chip in with some ideas.
