Getting started

Right-to-Left (RTL)

This article provides detailed instructions on enabling and using RTL support in the Finder 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. Finder facilitates RTL support with a few simple steps:

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">
```
Include language attribute: Add an appropriate language attribute, like lang="ar", to the <html> element. This helps with SEO and screen reader accessibility.
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">
```
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

Finder 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, Finder provides a robust set of npm scripts to facilitate this process.

Compiling RTL CSS

Finder 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"

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px