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