Right-to-Left Support

Right-to-left text direction support in Foundation allows you to easily switch text direction for all components.

Setup

Foundation was built to support right-to-left text direction out of the box, but you'll need to make a couple of adjustments to your markup and Sass to get everything up and running.

Markup Changes for Right-to-Left Languages

You'll need to make a few changes to your markup to get the Javascript components working nice and smooth. In thehtml tag, you'll need to add adir attribute with a value ofrtl. Here's what yourhtml tag should look like:

HTML

<!-- This example is for a right-to-left Arabic layout --><htmlclass="no-js"lang="ar"dir="rtl">

Change the Language Too

You'll need to change yourlang attribute value to match your language. Here's a handy list of common right-to-left languages and their html codes:

• Arabic: ar
• Chinese: zh
• Farsi: fa
• Hebrew: he, iw
• Japanese: ja
• Urdu: ur
• Yiddish: yi, ji

A Single Sass Adjustment

We made it really easy to switch the entire Foundation grid to right-to-left by changing the$text-direction Sass variable. Here's what the variable should look like:

Sass

$text-direction: rtl;

By changing this single variable, the entire grid and all the Foundation components will be switched to right-to-left orientation.