Foundation
Jump to Nav

# Right-to-Left Support

Foundation can easily adapt its components to work with languages that read from right to left.

## HTML

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">

### Language Code

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`

View of a full list of language codes on the website of the Library of Congress.

## CSS Download

If you use a CSS version of Foundation (the ones you can find on the download page), you'll need to create a custom download that includes RTL CSS instead of LTR. Just select "Right-to-left" under the Text Direction section of the customizer.

## Sass Configuration

If you're using the Sass version of Foundation, open your project's settings file (`settings.scss`) and change this variable in the Global section:

    $global-text-direction: rtl;

This will convert the framework's components to RTL format.