MIZ

Github

MIZ v1.20.1

v1.20.1

Browse docs

RTL

RTL (Right-to-Left) Support in MIZ #

RTL support in MIZ is designed to simplify coding for developers whose languages are written from right to left. This feature enables developers to easily design and implement websites and applications that require right-to-left language support.

How to Use RTL in MIZ #

Using RTL in MIZ is very simple and involves a few steps. First, users can specify the text direction during the installation process. When installing the MIZ framework, there's an option to choose the text direction, allowing you to select between Right-to-Left (RTL) and Left-to-Right (LTR).

However, For users working with frameworks like React, Laravel, and others, there is no direct option to change the site’s direction with a simple selection. Instead, users need to manually configure the direction across the entire site. To switch between right-to-left (RTL) or left-to-right (LTR) text direction, you can use the following code in the <html> tag:

                
HTML

                <html lang="fa" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>miz</title>
        <link rel="stylesheet" href="./assets/css/miz.min.css">
        <link rel="stylesheet" href="./assets/css/style.min.css">
        <link rel="stylesheet" href="./assets/css/style.css">
        <link rel="icon" type="image/x-icon" href="./assets/media/images/logo.png">
    </head>
    <body>
    </body>
</html>

For example, if you want to display a section of the site in RTL, you can apply this code to the relevant element. Similarly, to switch back to LTR, simply change the dir attribute to "ltr".

                
HTML

                <html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>miz</title>
        <link rel="stylesheet" href="./assets/css/miz.min.css">
        <link rel="stylesheet" href="./assets/css/style.min.css">
        <link rel="stylesheet" href="./assets/css/style.css">
        <link rel="icon" type="image/x-icon" href="./assets/media/images/logo.png">
    </head>
    <body>
    </body>
</html>

After installation, you can also change the text direction in your projects at any time by going to the project’s settings file and updating the text direction value. Additionally, MIZ supports various libraries and tools specifically designed to better handle RTL text, including features like automatic text direction adjustment, margin and padding settings for RTL content, and compatibility with different browsers.

With these steps and tools, you can easily create a website or application with full RTL language support.

For changing the direction of a specific element, whether in a framework or for users who have used an installer, simply add the rtl or ltr class to the desired element. This allows you to precisely control the text direction for individual elements based on your project’s needs.

                
SCSS

                .rtl {
    direction:rtl;
}
.ltr {
    direction: ltr;
}

Benefits #

  1. Ease of Coding: Developers can easily implement right-to-left languages in their projects.
  2. Support for Multiple Languages: This feature makes MIZ an excellent tool for developing websites and applications that require right-to-left language support.
  3. By utilizing RTL support in MIZ, developers can create a user-friendly and appropriate experience for right-to-left language users.

On this page