How can I make Arabic text display right to left on a bilingual website?

[PlanteriorShop]

Hello, We wanted to make our website bilingual so we used an add on to translate our website from English to Arabic but the Arabic appears from left to right it's supposed to be right to left. We tried a code but it made both languages from right to left. We need help where the Arabic ONLY is right to left.

[magecomp]

Hello @PlanteriorShop 

To make the Arabic text on your website right to left, you can use the following CSS code:

.rtl {
  direction: rtl;
}

This code will set the direction of all text with the class .rtl to right to left. You can then add this class to the div element that contains the Arabic text.

For example, if the Arabic text is in the following div element:

<div class="arabic-text">This is some Arabic text.</div>

You would then add the following CSS code to your website:

.arabic-text {
  direction: rtl;
}

This would make the Arabic text in the div element right to left.

If you are using a translation add-on, you may need to add the .rtl class to the div element manually. The add-on may not automatically add this class to the div element if the text is in Arabic.

Once you have added the .rtl class to the div element, the Arabic text should appear right to left.

[Transcy]

Hello @PlanteriorShop ,

Here's a general guide you can follow:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file or theme.css file

Add this following code at the bottom of page

.arabic-text {
    direction: rtl;
    unicode-bidi: embed;
}

Save and preview 

Hope this can help.

Transcy

[PlanteriorShop]

Hello @Transcy 

I cannot find base.css what does that mean?