How to make columns in a row behave correctly for RTL websites?

[yoramraz1 (Yoram Raz)]

BS"D

I have a row with 3 columns on the home page. As the site is written in Hebrew - a RTL language - I want column 1 to be on the right of the screen, not the left.

I tried making sure the Direction is set to RTL on all elements.
I tried using Flexbox.
I tried simply switching the contents of column 1 and 3, but that’s only good for PC displays. On mobile, it displays column 1 first.

Thanks for help

Yoram

---

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

[StuM]

Hi @yoramraz1

Switching the Row to Flex seems to work for me, so from LTR it’s 3,2,1

On mobile, change the Flex to Vertical and tick the box for ‘Reverse Layout’ and that shows column 3 at the top, with 2 and 1 following.

Hope that’s what you are looking for

[yoramraz1 (Yoram Raz)]

BS"D
Thanks
That sounds good.

[davorderokkidev (Davor Egyed - RTL Webflow Dev (www.derokki.dev))]

EDIT (Post-Localization Update) 25.03.2024:

In General, when you develop in RTL languages like Hebrew - you must set the document writing direction by applying the ‘dir’ attribute to the root HTML element.

In Webflow, you do it by going to Settings → Localization, and set your primary locale.

Here’s an 18sec clip showing how it’s done:

Build Webflow sites in Arabic, Hebrew, Farsi, Urdu, Yiddish #rtlflow #webflow #arabic #hebrew

Based on the set website direction (RTL) - Rows, Flexboxes and Grids automatically behave bidirectionally

If you wanna go into more depth, I’ve created a Free Course on RTL Webflow Development on our YouTube channel:

[jeson_zale]

@davorderokkidev

In General, when you develop in RTL languages like Hebrew - you must set the document writing direction by applying the ‘dir’ attribute to the root HTML element.

In the specific case of Webflow - you wanna add two separate Code Embeds on each page:

<style>
:root {
  direction: rtl;
}
</style>

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

Based on the set website direction (RTL) - Rows, Flexboxes and Grids automatically behave exactly the way you want them to.

The proper, structured & scalable way to RTL Webflow Development is by using RTLflow:

RTLflow | System for RTL Webflow Development by Derokki

This system helps you set the document direction automatically, by using one component called “Global RTL Element”.

Hope this helps!

Using the dir attribute in HTML to set the writing direction and applying CSS styles to control the layout is a common practice. It’s great to hear that there are tools and systems like RTLflow that offer a structured and scalable approach to RTL web development in platforms like Webflow. Components like the “Global RTL Element” can streamline the process and ensure consistent RTL behavior across your website.