MIZ

Github

1.0.0-alpha

1.0.0-alpha

Light

Dark

System

Browse docs

RTL

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

The MIZ framework provides built-in support for right-to-left (RTL) languages such as Persian and Arabic. This makes it easy for developers to build multilingual interfaces and responsive layouts that adapt naturally to different text directions.

How to Use RTL in Laravel Projects #

To enable RTL in a Laravel project using MIZ, you can define the text direction globally in your main Blade layout file (e.g., layouts/app.blade.php or layouts/document.blade.php). Simply add the dir attribute to your <html> tag or apply the rtl class to the <body> tag as shown below: 

        

            
Blade (app.blade.php)

            
        

        
<!DOCTYPE html>
<html lang="en" dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MIZ</title>
        <link rel="stylesheet" href="http://eazymizy.com/assets/css/miz.min.css">
        <link rel="stylesheet" href="http://eazymizy.com/assets/css/style.min.css">
    </head>
    <body>
            </body>
</html>

Alternatively, you can set the direction dynamically using a Blade condition. This approach is useful if your site supports multiple languages (e.g., English and Persian) and needs to switch direction automatically. 

        

            
Blade (conditional direction)

            
        

        
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MIZ</title>
        <link rel="stylesheet" href="http://eazymizy.com/assets/css/miz.min.css">
        <link rel="stylesheet" href="http://eazymizy.com/assets/css/style.min.css">
    </head>
    <body class="ltr">
            </body>
</html>

You can also apply RTL or LTR direction to specific sections of your page using the predefined MIZ classes .rtl and .ltr. 

        

            
SCSS

            
        

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

By using these helper classes, you can easily manage text direction on individual components or layout sections within your Laravel views.

RTL in Mizban #

In the Mizban environment, enabling RTL is even simpler. You just need to add the rtl class to the <body> element inside your canvas. This automatically applies the right-to-left direction to your entire layout and components within the canvas. 

            

                
MIZBAN Canvas

                
            

            <body class="rtl">
    <div class="container">
        <p></p>
    </div>
</body>

Benefits #

  1. Full RTL support for Persian, Arabic, and other right-to-left languages.
  2. Dynamic direction switching based on application locale.
  3. Easy integration with Laravel Blade templates and Mizban environment.
  4. Better UX for multilingual interfaces.