Problem With Languages

Design help Custom code
1

Hi Everyone, I have built a main site in english, used WEGLOT to translate it to hebrew. but since hebrew is RTL and english is LTR It dosen’t work well together.
I have tried to use the custom CSS head code for the hebrew version only, but it seems like it cannot identify the class name element. Also, I cannot style it via the custom code section at Project Settings.

So my problems are

  1. RTL / LTR switching.
  2. styling translated website only

Any solution for this probblem?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey, did you get any answer for your question?

3

UPDATE 25.03.2024: I recommend using the new native Webflow Localization feature, instead of Weglot:

In case anyone is wondering regarding Weglot:

Option 1: Add this Code to the Weglot CSS:

<script>
document.documentElement.setAttribute('dir', 'rtl');
</script>

Option 2: Add this in Webflow Settings → Footer Code:

<script>
/* If you manage Hebrew translations via Weglot / 3rd Party Tool:
Use the script below to set custom CSS Styles on Hebrew
*/

if(navigator.language == "he"){
document.documentElement.setAttribute('dir', 'rtl');
document.head.insertAdjacentHTML("afterend",`
<style>
   		
      
</style> `)
}

</script>

This is the base - however developing with both English and Arabic in mind takes more than just flipping the direction. The scripts I’ve shown are a part of RTLflow, which is our system for structured & scalable RTL Webflow Development at Enterprise-Level:

Hope this helps!