When creating an Arabic website, after setting the page language to Arabic, text, flex, and grid components show Arabic text correctly, but the position is inverted. i.e., what’s on the left in the UI appears on the right in the browser view
Could you share the project with us via Elements Cloud so we can take a look and find out what’s going on!
Sure. Please guide me how to do that.
You can learn more about setting up a free Elements Cloud account here:
btw. I do wonder if it’s a browser setting, do you have any other browsers on your machine you could test in?
All browsers display the website pages correctly i.e. RTL. The UI displays the Arabic content inverted i.e. COntaners, Flex, & Grid components display correct RTL text but items justifaction is LTR (the right columns on the left and vise versa for grid and flex).
Can you share your project so we can take a look at it?
Project shared via Elements Cloud
Great, you’ll need to send us the link (or post it here)…
There you go. Happy hunting 
elementsapp://downloadDocument/4eyrytCKnwdx
ah-ha! I think I’ve solved it… add the following code to the HTML tag in your Site Template: dir="ltr"
Here’s a quick video showig exactly how to do it.
Hope that solves it for you 
Once you guys have the site body props setup, that would be awesone to add as well. Similiar to the background color we discussed before
Thank you for the fantastic response time.
It’s the other way around. As I mentioned, the browser view correctly displays objects from right to left. However, in Elements, I have to place the components from left to right for the browser to display them correctly. If I reallocate the items in Elements and set them as they should be displayed in the browser, they will be inverted in the browser.
Bold text is the Title and should be displayed first
Example in English:
Title: Test text
The equvelent in Arabic (correct placement)
عنوان: نص تجريبي
To display it correctly in the browser, I have to do this:
نص تجريبي: عنوان
I’m still not 100% sure how you need the site to look, this thread has been very confusing, sorry 
I have a feeling this won’t work correctly as the Elements Editor isn’t set to your language (it’s in English). When you preview the exported site in the Browser the language is set to Arabic and the browser makes the layout changes automatically.
Does the site ever look how you want it to in the Elements Editor?
Yes.
Ill try to explain in a video and send you a link.
Please check the video.
Thank you very much for your support
Thanks for the video, that helps tremendously. It’s late here now, but I’ll dive into this tomorrow (Thursday) with @bon and we’ll work out a solution for you!
I’ve taken another look at this and I still think the way to go is to use the dir="ltr" in the template, then design the site in Elements how you want it to look. Then when you preview it in the browser it will appear exactly the same.
Here’s more details on it…
Let me know if that works for you?
Great. Thank you
I hope you can find a solution for Accordians as well.
Have a nice day.
@mmohdher Hold on before making any design changes… We’re just seeing if we can add native “rtl” support in the Editor!
Well do.
