Introduction to RTLflow
Understand the core principles of RTL Webflow Development.
Watch this 12-minute video, or read the transcript below.
Clone the RTLflow Styleguide here:
If you want to create Arabic or Hebrew Multilanguage websites using Webflow - you've come to the right place.
14 months ago, I got my first big Freelance opportunity from the Gulf region.
My task was to develop a large website for a client based in the United Arab Emirates. They would provide the Figma Design, and I would bring it to life in Webflow. It'd also require a Multilanguage setup, using English and Arabic.
However, one big problem came up - while English is written left to right (=LTR), Arabic reads the opposite way - right to left (=RTL). So that meant besides translating, I'd also have to flip the HTML document direction.
Try this: Visit any website, go into the Developer console, click on the HTML tag, and add an attribute called dir="rtl". This will flip the page direction to RTL.
I guarantee you that texts will align wrong. The Layout will break. Certain elements might not even work or be visible anymore.
Matter of fact is - very few websites are RTL-friendly. And mine definitely wasn't.
At that point, my website had 50 unique pages. There was no way I would overwrite my CSS mistakes by hard-coding hundreds of lines. So my last resort was to duplicate the entire Webflow project.
We would basically have two separate instances: one English project, and one Arabic project. This allowed me to fully customize the Arabic version, without affecting the English build.
Now don’t get me wrong. This approach worked and the project became a major success.
However, it also came with numerous disadvantages:
- I spent a week fixing the Arabic version using “ar” combo classes. It took another week to rebuild custom components like Sliders from Scratch.
- This messed up the code structure quite a bit. It made the project less scalable, and harder to maintain over time, despite using Finsweet Client-First (which, in case you don’t know, is the industry standard CSS framework for organizing Webflow websites)
- We had to spend another two weeks manually translating and adding the Arabic copy back into Webflow - instead of simple machine translating with a 3rd Party Multilanguage Tool (or Webflow Localization). I also had to personally replace texts on website parts the translators couldn’t access (f.e. Navbar links).
- We also lost the benefits of SEO automation - for example having to manually index on Google or set up the Language Switch
- Post-launch, I would always have to make changes once for each language, resulting in double work.
The Result: We spent WEEKS in extra work on development, translation & deployment. AND the project became less scalable. All because the website wasn't RTL-friendly.
Even if I had Webflow Localization back then - at the time of this video being recorded, you need an Enterprise Plan to visually add in Custom CSS. This means the same problem applies - if you wanna save those costs, the website must be 100% RTL-friendly ←
At the time, I didn't have a system to develop RTL-friendly / bidirectional websites in Webflow.
But now I do.
I spent the last 9 months creating a powerful Webflow framework so you can avoid all the pains I had to go through.
With this system, I save everyone involved weeks of effort. It helps me develop Webflow projects in record time for some of the largest organizations in the Gulf region.
I’m giving this system away for free.
These allow us to build fully functional, RTL-friendly websites - and deploy any RTL Multilanguage setup strategy with little effort.
You’ll have two pages:
a) The "Style Guide" page - This is the same standard page that comes with Client-First. This is where you set up Typography, Colors, etc. as per usual
b) The "RTLflow Elements" page - This page lists all new RTLflow components, classes, and attribute solutions. It also lets you define your starting direction (LTR or RTL)
To start building in LTR first (f.e. English) - keep this page as it is
To start building in RTL first (f.e. Arabic) - add the Global LTR Element component below the Global RTL Element.
You can set up & test RTL in a W3C-compliant way using a single global component: Global RTL Element.
Some Elements Div Blocks, Flexbox, and Grids are bidirectional. But many others aren’t.
With RTLflow, you get CSS Classes that help you:
- Set bidirectional text alignment
- Set bidirectional margins & paddings that are compatible with Client-First Spacing Classes
- Mirror Icons based on dir
- Set custom direction on any element
- Set bidirectional Positioning (slider navigation)
- Show/hide elements based on dir (form at bottom)
- +many more
- Run Right-to-left Webflow Slider
- Switch Nav Menu Opening Side based on direction
RTLflow also comes with set of custom code solutions to make certain elements RTL-friendly, including (located in Global Styles → rtlflow-global-elements)
- Webflow Slider
- Nav Links, Dropdowns, Tabs
- Tab Link
- Lightbox Close
- Lists (ul,ol,li)
- quotes & captions
It doesn’t matter how many or which languages you use. RTLflow is the perfect starting point for any RTL Webflow project:
- Arabic only
- Hebrew only
- Any other combination of LTR and RTL languages!
You can find our RTLflow Showcase projects here:
In the future, you can expect more In-Depth YouTube tutorials, expanded Documentation, and a deeper Look into Webflow Localization.
I am giving all this content away for free. My only ask is that you share RTLflow with one friend of yours, who could benefit fromit. This way you can help me spread the word, and we can work together on this mission to establish Webflow and revolutionize Web Development in the Middle East.
Thank you for reading this post. You can get started by cloning the official RTLflow Styleguide below. Cheers!