Right to left script

Site URL: http://talktoloop.org

Hello. I have built a website for the charity I work for, Talk To Loop. 

I have used Weglot to offer translation into French, Spanish and Bahasa (Indonesian). These all work fine.

But I also wanted translation into Arabic. Unfortunately, although Weglot's Arabic translation was fine, Squarespace doesn't support right to left scripts, so the formatting, punctuation, and meaning, went completely wrong.

The plan now i to create a duplicate of the site exclusively in Arabic... but I need to find some css solution to ensure that the duplicate (Arabic) site will correctly format right to left.

If anyone can advise that would amazing.

Thank you.

On 11/23/2021 at 11:00 PM, SimonRMiddleton said:

Site URL: http://talktoloop.org

Hello. I have built a website for the charity I work for, Talk To Loop. 

I have used Weglot to offer translation into French, Spanish and Bahasa (Indonesian). These all work fine.

But I also wanted translation into Arabic. Unfortunately, although Weglot's Arabic translation was fine, Squarespace doesn't support right to left scripts, so the formatting, punctuation, and meaning, went completely wrong.

The plan now i to create a duplicate of the site exclusively in Arabic... but I need to find some css solution to ensure that the duplicate (Arabic) site will correctly format right to left.

If anyone can advise that would amazing.

Thank you.

 

This css snippet can help with the text on the site

CSS direction property (w3schools.com)

Thank you I will try that

2 minutes ago, SimonRMiddleton said:

Thank you I will try that

 

But where should I put that snippet? It doesn't seem to make any difference when I drop it into Custom CSS

20 hours ago, SimonRMiddleton said:

But where should I put that snippet? It doesn't seem to make any difference when I drop it into Custom CSS

 

Try this new CSS

* {
  direction: rtl !important;
}

Thank you!

Hi Simon,

Did this CSS solution work? 

I want to create a website in Arabic as well.

Some help into how to do this would be appreciated.

If you can send a link to your website in Arabic.

Thanks

3 hours ago, hfeidi said:

 

Did this CSS solution work? 

I want to create a website in Arabic as well.

Some help into how to do this would be appreciated.

Hi Simon,

Weglot Support here, I'm glad to help you out.

First of all, we usually advise our users to ensure that their theme supports the Right to Left direction.

In order to make the Arabic version of your website, translated by Weglot, displayed in Right to Left (RTL), you should be able to do so by pasting the custom CSS code below into the Custom CSS section of your Weglot Dashboard > https://dashboard.weglot.com/settings/language-switcher

html[lang="ar"] body {
       direction: RTL!important;
       text-align: right!important;
}
html[lang="ar"] .left {
      text-align: right!important;
}

Please note that the code above should work for most of the elements on your website, except custom original CSS code that are not related to the classes added to the code above.

I'm pleased to send you below our documentation regarding how does Weglot support the Right to Left direction
> Does Weglot support Right To Left (RTL) languages?

Don't hesitate to contact us directly at support@weglot.com if you need any further information.

Have a great day,
Cheers,
 

Thanks for your support above.

Is there an example website done in Arabic using Weglot?

if  so, please share the link. Thanks

Also which themes support RTL?

On 5/11/2022 at 3:48 PM, hfeidi said:

Thanks for your support above.

Is there an example website done in Arabic using Weglot?

if  so, please share the link. Thanks

 

Hey there,

Apologies for the late reply. Here are two websites translating their website into Arabic using Weglot:
1. https://mena.feelunique.com/

2. https://newbalance.com.sa/

And as for compatibility, all themes can be translated into Arabic with Weglot. Please don't hesitate to reach out to us at support@weglot.com if you need further assistance. 

On 12/1/2021 at 7:03 PM, tuanphan said:

Try this new CSS

* {
  direction: rtl !important;
}

 

Is there a way for me to use this, but only for the weglot translated parts?

On 3/29/2024 at 7:52 PM, Bohemianbela said:

Is there a way for me to use this, but only for the weglot translated parts?

 

Try this code, if it doesn't work, please share site url

[class*="language"] * {
  direction: rtl !important;
}