Foundation can easily adapt its components to work with languages that read from right to left.
<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">
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.
View of a full list of language codes on the website of the Library of Congress.
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.
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:
This will convert the framework’s components to RTL format.