Right-to-Left Support

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


Foundation 4 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 SCSS to get everything up and running.

Markup Changes for Right-to-Left Layouts

You'll need to make a few changes to your markup to get the javascript components working nice and smooth. In the html tag, you'll need to add a dir attribute with a value of rtl. Here's what your html tag should look like:

<!-- This example is for a right-to-left Arabic layout -->
<html class="no-js" lang="ar" dir="rtl">
Change the Language Too

You'll need to change your lang 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 SCSS Adjustment

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

$text-direction: rtl;

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

Using CSS

If you downloaded a static version of Foundation using the customizer to get a right-to-left support, your download should be ready to use without any of the steps mentioned above.

Download Right-to-Left Foundation 4 »

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video