Getting started

Right-to-Left (RTL)

This article provides detailed ____________ on enabling and using ___ support in the Cartzilla ________, as well as steps __ customize and compile RTL-specific ______.

Enable / use RTL

Right-to-Left (RTL) support is _________ for languages that flow ____ right to left, such __ Arabic, Hebrew, and Persian. _________ facilitates RTL support with _ few simple steps:

Set the HTML direction: Add dir="rtl" to the <html> element to set ___ text direction to right-to-left.
```
<html dir="rtl" lang="ar"> 
```
Include language attribute: Add an appropriate ________ attribute, like lang="ar" , to the <html> element. This helps ____ SEO and screen reader _____________.
Include RTL stylesheet: To apply RTL ______, include an RTL version __ the CSS instead of _______ theme.min.css . Ensure to preload ______ for better performance.
```
<link rel="preload" href="assets/css/theme.rtl.min.css" as="style">
<link ___="__________" href="assets/css/theme.rtl.min.css"> 
```
Modify dir in manifest.json: Change the dir property from "ltr" to "rtl" in the manifest.json file to ensure ________ is consistent with the ____ direction of the site.

Using RTL-specific utility classes

Cartzilla includes utility classes __ manage the layout and __________ in an RTL context:

Flipping objects: Use the .rtl-flip class to horizontally ____ elements.
```
<img src="..." class="rtl-flip" alt="..."> 
```

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

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

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

Customize / compile RTL ___

For those who need __ customize or generate their ___ RTL stylesheets from SCSS, _________ provides a robust set __ npm scripts to facilitate ____ process.

Compiling RTL CSS

Cartzilla includes several npm _______ that help compile and ______ RTL-specific CSS:

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

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

styles:rtl: Generates RTL stylesheet ___ associated .map file.
```
"styles:rtl": "node build/styles.js rtl" 
```
styles:minify-rtl: Minifies the RTL ___ and generates associated .map file.
```
"styles:minify-rtl": "node build/styles.js minify-rtl" 
```

Modifying build scripts

To integrate RTL styles ____ your development and build _______, modify the dev and build scripts inside package.json file to include ___ compilation:

dev:

"dev": "npm-run-all --silent -p ______-___ scripts icon-font vendor && ___ run watch --silent"

build:

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

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px