# RTL

Learn how to enable support for right-to-left text in theme across our layout, components, and utilities.

To enable RTL, please go through following steps

#### Required changes

These are strict requirements for enabling RTL in theme. So you must carry out all steps one by one.

1. Set `dir="rtl"` on the `<html>` element. See the example:
   `<html dir="rtl">`
2. Add an appropriate `lang` attribute, like `lang="ar"`, on the `<html>` element. See the example:
   `<html lang="ar" dir="rtl">`
3. Replace `tiny-slider.js` version with `tiny-slider-rtl.js` in HTML files wherever applicable. See the example:

       <script src="assets/vendor/tiny-slider/tiny-slider-rtl.js"></script>

4. Set enableRTL `true` in `gulpfile.js` See the example:
   `var enableRTL = true;`

After finishing all of these steps, new `style-rtl.css` will be generated in `assets/css` folder. You'll need to replace this new RTL version of CSS with LTR (`style.css`). Here's the example of linking compiled CSS with RTL enabled:

    <!-- Theme CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/style-rtl.css">

#### RTL Customization

We have created RTL CSS using gulp-rtlcss package - a Gulp plugin, that uses RTLCSS to transform Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)

Using RTLCSS value directives, you can make a variable output a different value for RTL.

Please note that SASS/SCSS will omit comments placed inside the declaration value from the output CSS. To preserve RTLCSS value directives, Use SASS interpolation syntax passing your comment as string. See examples below:

For example, to decrease the weight for `$font-weight-bold` throughout the codebase, you may use the `/*rtl: {value}*/` syntax:

    $font-weight-bold:            700 #{"/* rtl:600*/"};

Which would ouput to the following for our default CSS and RTL CSS:

    /* style.css ouput */
    .fw-bold {
      font-weight: 700 /* rtl:600 */;
    }

    /* style.rtl.css ouput */
    .fw-bold {
      font-weight: 600;
    }

To keep same values in default CSS (style.css) and RTL CSS (style-rtl.css). Use `/*rtl:ignore*/`

    .example{
    	float: left #{"/* rtl:ignore */"};
    }

To add CSS only in RTL css, use`/*rtl:raw*/` It will be complied only in RTL CSS (style-rtl.css)

    /* rtl:raw:
    .example{
    	float: left;
    }
    */

#### Alternative font stack

If you want to use different font family for LTR and RTL, you need to use one of the following methods

##### Insert Directive

For example, if you want to use `"Helvetica Neue"` font family in LTR and `"Helvetica Neue Arabic"` for RTL then you need to use below code in SCSS.

    $font-family-base:            Helvetica Neue #{"/* rtl:insert:Arabic */"};

##### RTL Directive

For example, if you want to use `'Rubik', sans-serif` font family in LTR and `'Amiri', serif` for RTL then you need to use below code in SCSS.

    $font-family-base:            'Rubik', sans-serif #{"/* rtl:'Amiri', serif*/"};

#### Additional changes

1. To change progress bar direction or any AOS animation direction from LTR to RTL, please change `data-aos="slide-right"` to `data-aos="slide-left"` in your HTML code similarly.
2. To flip any image, SVG shape or any element, use `.rtl-flip` class. It will flip the element only in RTL.

#### Additional resources

- RTLCSS
- RTL Styling 101
- gulp-rtlcss
- Bootstrap RTL Introduction page