UNPKG

foundation-sites

Version:

The most advanced responsive front-end framework in the world.

get.foundation/sites

foundation/foundation-sites

45 lines (29 loc) • 1.57 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
--- title: Right-to-Left Support description: Foundation can easily adapt its components to work with languages that read from right to left. video: 'TPz2Uzr4urE' --- ## 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: ```html <!-- 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` - **Farsi:** `fa` - **Hebrew:** `he`, `iw` - **Urdu:** `ur` - **Yiddish:** `yi`, `ji` View of a [full list of language codes](https://www.loc.gov/standards/iso639-2/php/code_list.php) 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](https://download.get.foundation/sites/download)), 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](sass.html#the-settings-file) (`settings.scss`) and change this variable in the Global section: ```scss $global-text-direction: rtl; ``` This will convert the framework's components to RTL format.