Getting started

# Right-to-Left (RTL)

This article provides detailed instructions on enabling and using RTL support in the Cartzilla template, as well as steps to customize and compile RTL-specific styles.

## Enable / use RTL

Right-to-Left (RTL) support is essential for languages that flow from right to left, such as Arabic, Hebrew, and Persian. Cartzilla facilitates RTL support with a few simple steps:

1. Set the HTML direction: Add `dir="rtl"` to the `<html>` element to set the text direction to right-to-left.

       <html dir="rtl" lang="ar">

2. Include language attribute: Add an appropriate language attribute, like `lang="ar"`, to the `<html>` element. This helps with SEO and screen reader accessibility.
3. Include RTL stylesheet: To apply RTL styles, include an RTL version of the CSS instead of default `theme.min.css`. Ensure to preload styles for better performance.

       <link rel="preload" href="assets/css/theme.rtl.min.css" as="style">
       <link rel="stylesheet" href="assets/css/theme.rtl.min.css">

4. Modify `dir` in manifest.json: Change the `dir` property from "ltr" to "rtl" in the `manifest.json` file to ensure metadata is consistent with the text direction of the site.

### Using RTL-specific utility classes

Cartzilla includes utility classes to manage the layout and appearance in an RTL context:

- Flipping objects: Use the `.rtl-flip` class to horizontally flip elements.

      <img src="..." class="rtl-flip" alt="...">

- Visibility classes: Control the display properties with RTL-specific classes.

      <!-- Hide element in RTL -->
      <div class="d-none-rtl">...</div>

      <!-- Hide element in LTR, but show in RTL -->
      <div class="d-none d-block-rtl">...</div>

## Customize / compile RTL CSS

For those who need to customize or generate their own RTL stylesheets from SCSS, Cartzilla provides a robust set of npm scripts to facilitate this process.

### Compiling RTL CSS

Cartzilla includes several npm scripts that help compile and minify RTL-specific CSS:

- styles-rtl: Compiles, processes, and minifies RTL CSS.

      "styles-rtl": "npm-run-all -s styles:compile styles:rtl styles:minify-rtl"

- styles:rtl: Generates RTL stylesheet and associated `.map` file.

      "styles:rtl": "node build/styles.js rtl"

- styles:minify-rtl: Minifies the RTL CSS and generates associated `.map` file.

      "styles:minify-rtl": "node build/styles.js minify-rtl"

### Modifying build scripts

To integrate RTL styles into your development and build process, modify the `dev` and `build` scripts inside `package.json` file to include RTL compilation:

- dev:

      "dev": "npm-run-all --silent -p styles-rtl scripts icon-font vendor && npm run watch --silent"

- build:

      "build": "npm-run-all --silent -p styles-rtl scripts icon-font vendor && npm run validate --silent && npm run dist --silent"

Top