Menu icon Foundation
RTL and LTR suport in same foundation website ?

Hello

I know from the docs there is a possibility to build a fully RTL foundation website. However, what I have to accomplish is to have the same website available in several languages, some of them are RTL.

A visitor should be able to click on a button or link to switch from one version to the other.

What's the best way to achieve this in Foundation please ? Implementing a minimal rtl.css file to override the necessary styles and load it conditionally ?

Thanks

right-to-leftrtllanguagelanguages

Hello

I know from the docs there is a possibility to build a fully RTL foundation website. However, what I have to accomplish is to have the same website available in several languages, some of them are RTL.

A visitor should be able to click on a button or link to switch from one version to the other.

What's the best way to achieve this in Foundation please ? Implementing a minimal rtl.css file to override the necessary styles and load it conditionally ?

Thanks


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran almost 6 years ago

The way RTL works in Foundation is by changing a setting in _settings.scss if you're using Sass, or the download customizer for static CSS.

To build sites that allow switching languages we recommend you use the Sass version. This allows you to switch direction with a simple variable, without having to override anything. Simply load the newly generated stylesheet for each language of the site.

http://cl.ly/image/412o1A2U1I25

Ghaida Zahran almost 6 years ago

The way RTL works in Foundation is by changing a setting in _settings.scss if you're using Sass, or the download customizer for static CSS.

To build sites that allow switching languages we recommend you use the Sass version. This allows you to switch direction with a simple variable, without having to override anything. Simply load the newly generated stylesheet for each language of the site.

http://cl.ly/image/412o1A2U1I25

Nick Teo over 5 years ago

I know this is resurrecting a thread from the dead after 6 months, but I'm trying to accomplish exactly the same thing, so I see no reason to create a new thread. Can someone explain in a little more detail how to accomplish what Ghaida is saying? How do I dynamically change it? Is this the same as just having two different css files that I switch between when I change languages to a right to left language? Any guidance would be incredibly helpful

Vladimir Filimon almost 4 years ago

For production sites you should use compiled/minified css files. So just prepare two versions of css file and include them conditionally. For development environment just override $text-direction: ltr, in _settings.scss.