LTR & RTL Layout Support

Herozi supports both Right-to-Left (RTL) and Left-to-Right (LTR) text directions. RTL is important for languages like Arabic and Hebrew, while LTR is the default for languages such as English and Spanish.

To enable RTL, change the direction attribute in the root HTML tag and configure the layout-default.js file.

LTR (Left-to-Right) and RTL (Right-to-Left) are attributes that define the text direction on a webpage, ensuring proper content alignment based on the language's reading order.

const DEFAULT_VALUES = {
    [ATTRIBUTES.DIRECTION_MODE]: 'ltr'  // Change 'ltr' to 'rtl' for RTL mode
};

When you switch to RTL mode, Herozi automatically loads the RTL-specific CSS files to adjust the layout:

<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css">
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css">


<link href="assets/css/bootstrap-rtl.min.css" id="bootstrap-style" rel="stylesheet" type="text/css">
<link href="assets/css/app-rtl.min.css" id="app-style" rel="stylesheet" type="text/css">

Left-to-Right (LTR) Layout:

In LTR mode, content flows from left to right. Use the dir="ltr" attribute in the HTML tag to enable this direction:

Right-to-Left (RTL) Layout:

In RTL mode, content flows from right to left. This is used for languages like Arabic, Hebrew, and Persian. Enable this by setting dir="rtl" in the HTML tag: