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.
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.
If you check out my Styleguide RTLflow which I created specifically for RTL Webflow Development - you’ll see how I implemented the Show/Hide functionality based on direction: RTLflow | System for RTL Webflow Development by Derokki
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.
