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

PlanteriorShop
Visitor
2 0 0

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.

Replies 3 (3)

magecomp
Shopify Partner
264 20 32

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.

Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website

Transcy
Shopify Partner
285 19 84

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

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
PlanteriorShop
Visitor
2 0 0

Hello @Transcy 

I cannot find base.css what does that mean?