W3CoreUI

Right to Left (RTL)

This guide explains how to generate RTL (Right-to-Left) CSS files using Gulp, alongside LTR (Left-to-Right) CSS files. The Gulp tasks in your setup handle both conversions efficiently, ensuring that your styles are ready for multi-language support, particularly for RTL languages like Arabic or Hebrew. For more information, visit the Gulp RTLCSS page.

1.- Gulp Tasks Breakdown

You have two main tasks in your Gulp configuration:

LTR CSS Compilation (compileSCSS_LTR)
- Compiles your SCSS files into LTR CSS.
- Applies autoprefixing to ensure browser compatibility.
- Generates sourcemaps for debugging.
RTL CSS Compilation (compileSCSS_RTL)
- Converts the LTR CSS into RTL using gulp-rtlcss.
- Renames the output files with -rtl suffix to distinguish them.
- Generates sourcemaps for debugging.

Both tasks are run in parallel with:

const compileSCSS = parallel(compileSCSS_LTR, compileSCSS_RTL);

2.- HTML Integration

To apply the generated RTL styles in your HTML, link to the RTL CSS files like so:

<!-- Start - Style CSS -->
<link class="main-plugins" href="assets/css/plugins-rtl.css" rel="stylesheet"> 
<link class="main-css" href="assets/css/style-rtl.css" rel="stylesheet">
<!-- End - Style CSS -->

3.- Run the Tasks

To compile both LTR and RTL CSS files, simply run the following Gulp command:

gulp