I want to translate my website into an RTL language. Using Weglot sounds efficient but my website has several LTR animations and it seems that there is no way to customize them with Weglot. Not only that, I want to customize the images for different languages.
I am considering duplicating the entire website, however, I have CMS content that I can’t duplicate, and I am also wondering if this will affect the SEO.
Anyone that can help?
I am not a developer nor a designer, but I understand code and design.
davorderokkidev
(Davor Egyed - RTL Webflow Dev (www.derokki.dev))
2
EDIT (Post-Localization Update) 25.03.2024:
Webflow has launched it’s own native Localization feature, which helps you manage Multilanguage websites:
To build your website in an RTL language like Hebrew, go to Settings → Localization, and set your primary locale. Webflow will now automatically set the correct HTML direction based on your chosen Locale!
Here’s an 18sec clip showing how it’s done:
In Terms of RTL-friendly Animations (both CSS and IX2), I’m working on a Solution
I’ve created a Free Course on RTL Webflow Development, if you wanna check it out:
And I highly recommend checking out our RTL CSS system called RTLflow 2.0:
Reach out anytime if you have questions! Email: davor@derokki.dev
Hey Houssem,
Webflow Animations are a bit tricky with Right-to-left languages. The best thing you can do currently is to duplicate sections with horizontal animations, and show one for LTR/RTL each. I’m working on a JS solution to automate flipping Webflow Animations on RTL.
In general, your website is fairly RTL-friendly, there should be no need to duplicate the entire project. You can test out if it’ll work in Arabic by adding the attribute “dir”=“rtl” to the Body. (Note: this is not a W3C compliant way to setup RTL, it’s just for visual representation)
Instead insert this code directly in your Webflow Project Settings “Head Tag” :
<script>
/* If you manage RTL (i.e. Arabic, Hebrew) translations via Linguana / 3rd Party Multilanguage Tool:
Use the script below to set custom CSS Styles on RTL. */
// in the first script line - set the language code on which CSS styles will be applied
// Arabic = "ar"; Hebrew = "he"; Persian = "fa
// You can check for ISO 639-1 language codes here: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
if(document.documentElement.lang === "ar"){
document.documentElement.setAttribute('dir', 'rtl');
document.head.insertAdjacentHTML("afterend",`
<style>
html {
direction: rtl !important;
}
</style> `);
}
</script>
Another note - if you’re looking to switch out Images based on language, try using Linguana.io. The Approach is the same.
