Add RTL Support (#4886)

Signed-off-by: Hamed Faramarzi <hamed.faramarzi@gmail.com> Co-authored-by: Hamed Faramarzi <hamed.faramarzi@gmail.com> Co-authored-by: iBug <git@ibugone.com>
mmistakes · Jun 25, 2024 · 621529a · 621529a
1 parent ef5018e
commit 621529a
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 5 deletions.
diff --git a/_config.yml b/_config.yml
@@ -16,6 +16,7 @@ minimal_mistakes_skin    : "default" # "air", "aqua", "contrast", "dark", "dirt"
 
 # Site Settings
 locale                   : "en-US"
+rtl                      : # true, false (default) # turns direction of the page into right to left for RTL languages
 title                    : "Site Title"
 title_separator          : "-"
 subtitle                 : # site tagline that appears below site title in masthead

diff --git a/_data/ui-text.yml b/_data/ui-text.yml
@@ -1400,7 +1400,7 @@ fa: &DEFAULT_FA
   toc_label                  : "در این صفحه"
   ext_link_label             : "لینک مستقیم"
   less_than                  : " "
-  minute_read                : "(طول مطالعه (دقیقه"
+  minute_read                : "دقیقه، طول مطالعه"
   share_on_label             : "اشتراک گذاری در"
   meta_label                 :
   tags_label                 : "تگ ها: "
@@ -1427,9 +1427,9 @@ fa: &DEFAULT_FA
   comment_btn_submitted      : "ارسال شد"
   comment_success_msg        : ".باتشکر از ارسال دیدگاه! پس از تأیید، این دیدگاه در سایت نشان داده خواهد شد"
   comment_error_msg          : ".متاسفانه در ارسال شما خطایی بود. لطفا مطمئن شوید تمام فیلدهای مورد نیاز تکمیل شده و دوباره امتحان کنید"
-  loading_label              : "...بارگذاری"
+  loading_label              : "بارگذاری..."
   search_label_text          :
-  search_placeholder_text    : "...عبارت جستجوی خود را وارد کنید"
+  search_placeholder_text    : "عبارت جستجوی خود را وارد کنید..."
   search_algolia_no_results  :
   results_found              : "نتایج"
   back_to_top                : "بازگشت به بالا"

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,7 +9,7 @@
     {% include head/custom.html %}
   </head>
 
-  <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
+  <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}" dir="{% if site.rtl %}rtl{% else %}ltr{% endif %}">
     {% include_cached skip-links.html %}
     {% include_cached masthead.html %}
 

diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
@@ -10,11 +10,21 @@
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-right: $right-sidebar-width-narrow;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width-narrow;
+    }
   }
 
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
     padding-right: $right-sidebar-width;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width;
+    }
   }
 }
 

diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss
@@ -113,6 +113,12 @@ blockquote {
   font-style: italic;
   border-left: 0.25em solid $primary-color;
 
+  [dir=rtl] & {
+    border-left: none;
+    border-right: .25em solid $primary-color;
+    margin: 2em 0 2em 1em;
+  }
+
   cite {
     font-style: italic;
 

diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
@@ -194,10 +194,20 @@
     &.site-logo {
       margin-left: 0;
       margin-right: 0.5rem;
+
+      [dir=rtl] & {
+        margin-right: 0;
+        margin-left: 0.5rem;
+      }
     }
 
     &.site-title {
       margin-left: 0;
+
+      [dir=rtl] & {
+        margin-left: 1rem;
+        margin-right: 0;
+      }
     }
   }
 
@@ -553,21 +563,46 @@
   li ul > li a {
     padding-left: 1.25rem;
     font-weight: normal;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 1.25rem;
+    }
   }
 
   li ul li ul > li a {
     padding-left: 1.75rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 1.75rem;
+    }
   }
 
   li ul li ul li ul > li a {
     padding-left: 2.25rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 2.25rem;
+    }
   }
 
   li ul li ul li ul li ul > li a {
     padding-left: 2.75rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 2.75rem;
+    }
   }
 
   li ul li ul li ul li ul li ul > li a {
-    padding-left: 3.25rem
+    padding-left: 3.25rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 3.25rem;
+    }
   }
 }
diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
@@ -40,11 +40,21 @@ body {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-right: $right-sidebar-width-narrow;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width-narrow;
+    }
   }
 
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
     padding-right: $right-sidebar-width;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width;
+    }
   }
 
   .page__inner-wrap {
@@ -103,6 +113,11 @@ body {
 			-moz-transition: opacity 0.2s ease-in-out 0.1s;
 			-o-transition: opacity 0.2s ease-in-out 0.1s;
 			transition: opacity 0.2s ease-in-out 0.1s;
+
+			[dir=rtl] & {
+			  left: 0;
+			  right: .5em;
+			}
 		}
 
 		&:hover .header-link {
@@ -335,6 +350,11 @@ body {
 
   strong {
     margin-right: 10px;
+
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: 10px;
+    }
   }
 }
 
@@ -347,6 +367,11 @@ body {
   border: 1px solid mix(#000, $border-color, 25%);
   border-radius: $border-radius;
 
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+
   &:hover {
     text-decoration: none;
     color: $link-color-hover;
@@ -530,9 +555,17 @@ body {
   padding-top: 1em;
   border-top: 1px solid $border-color;
 
+  [dir=rtl] & {
+    float: right;
+  }
+
   @include breakpoint($large) {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
+
+    [dir=rtl] & {
+      float: left;
+    }
   }
 
   @include breakpoint($x-large) {

diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
@@ -23,6 +23,10 @@
     -webkit-transition: opacity 0.2s ease-in-out;
     transition: opacity 0.2s ease-in-out;
 
+    [dir=rtl] & {
+      float: right;
+    }
+
     &:hover {
       opacity: 1;
     }
@@ -83,13 +87,26 @@
     padding-left: 1em;
     z-index: 10;
 
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      margin-right: 0;
+      margin-left: -1 * $right-sidebar-width-narrow;
+      padding-left: 0;
+      padding-right: 1em;
+    }
+
     &.sticky {
       @include clearfix();
       position: -webkit-sticky;
       position: sticky;
       top: 2em;
       float: right;
 
+      [dir=rtl] & {
+        float: left;
+      }
+
       .toc {
         .toc__menu {
           overflow-y: auto;
@@ -102,6 +119,11 @@
   @include breakpoint($x-large) {
     width: $right-sidebar-width;
     margin-right: -1 * $right-sidebar-width;
+
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: -1 * $right-sidebar-width;
+    }
   }
 }
 
@@ -203,6 +225,11 @@
   .author__urls {
     span.label {
       padding-left: 5px;
+
+      [dir=rtl] & {
+        padding-left: 0;
+        padding-right: 5px;
+      }
     }
   }
 
@@ -318,6 +345,11 @@
     font-size: $type-size-5;
     text-decoration: none;
 
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: 5px;
+    }
+
     &:hover {
       text-decoration: underline;
     }

diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss
@@ -13,6 +13,10 @@ figure.highlight {
   line-height: 1.8;
   border-radius: $border-radius;
 
+  [dir=rtl] & {
+    direction: ltr;
+  }
+
   > pre,
   pre.highlight {
     margin: 0;

diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
@@ -117,6 +117,11 @@ body:hover .visually-hidden button {
   .task-list-item-checkbox {
     margin-right: 0.5em;
     opacity: 1;
+
+    [dir=rtl] & {
+      margin-left: .5em;
+      margin-right: 0;
+    }
   }
 }
 
@@ -183,6 +188,11 @@ body:hover .visually-hidden button {
 .full {
   @include breakpoint($large) {
     margin-right: -1 * span(2.5 of 12) !important;
+
+    [dir=rtl] & {
+      margin-right: 0 !important;
+      margin-left: -1 * span(2.5 of 12) !important;
+    }
   }
 }
 

diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
@@ -215,6 +215,12 @@ By default your site title is used in the masthead. You can override this text b
 masthead_title: "My Custom Title"
 ```
 
+### Site RTL direction
+
+`site.rtl` is used to turn the direction of the page into right to left. This option can be used for RTL languages (like Arabic, Persian, etc)
+
+_Example:_ `rtl: true` sets the direction of the page to right to left. By default this option is `rtl: false`.
+
 ### Breadcrumb navigation (beta)
 
 Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results: