squidfunk · squidfunk · Jan 13, 2018 · Jan 13, 2018 · Jan 13, 2018
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,3 +1,7 @@
+mkdocs-material-2.5.0 (2017-01-13)
+
+  * Added support for right-to-left languages
+
 mkdocs-material-2.4.0 (2017-01-11)
 
   * Added focus state for clipboard buttons

diff --git a/README.md b/README.md
@@ -42,8 +42,8 @@ theme:
 ## What to expect
 
 * Responsive design and fluid layout for all kinds of screens and devices,
-  designed to serve your project documentation in a user-friendly way with
-  optimal readability.
+  designed to serve your project documentation in a user-friendly way in 17
+  languages with optimal readability.
 
 * Easily customizable primary and accent color, fonts, favicon and logo;
   straight forward localization through theme extension; integrated with Google

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -104,9 +104,12 @@ The `mkdocs` executable is provided as an entrypoint, `serve` is the default
 command. Start the development server in your project root with:
 
 ```
-docker run --rm -it -p 8000:8000 -v `pwd`:/docs squidfunk/mkdocs-material
+docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/mkdocs-material
 ```
 
+If you're using Windows command prompt (`cmd.exe`), substitute `${PWD}` with
+`"%cd%"`.
+
   [8]: https://hub.docker.com/r/squidfunk/mkdocs-material/
 
 ## Usage
@@ -324,6 +327,19 @@ Pull Request.
 
   [16]: https://www.w3schools.com/tags/ref_language_codes.asp
 
+#### Text direction
+
+> Default: `ltr`
+
+Material supports both, left-to-right (`ltr`) and right-to-left (`rtl`) text
+direction. This enables more languages like Arabic, Hebrew, Syriac and others
+to be used with the theme:
+
+```
+theme:
+  direction: rtl
+```
+
 #### Site search
 
 > Default: `en`

diff --git a/docs/index.md b/docs/index.md
@@ -29,8 +29,8 @@ theme:
 ## What to expect
 
 * Responsive design and fluid layout for all kinds of screens and devices,
-  designed to serve your project documentation in a user-friendly way with
-  optimal readability.
+  designed to serve your project documentation in a user-friendly way in 17
+  languages with optimal readability.
 
 * Easily customizable primary and accent color, fonts, favicon and logo;
   straight forward localization through theme extension; integrated with Google

diff --git a/docs/release-notes.md b/docs/release-notes.md
@@ -12,7 +12,7 @@ To determine the currently installed version, use the following command:
 
 ``` sh
 pip show mkdocs-material | grep -E ^Version
-# Version 2.4.0
+# Version 2.5.0
 ```
 
 ### Material 1.x to 2.x
@@ -38,6 +38,10 @@ pip show mkdocs-material | grep -E ^Version
 
 ## Changelog
 
+### 2.5.0 <small>_ January 13, 2018</small>
+
+* Added support for right-to-left languages
+
 ### 2.4.0 <small>_ January 11, 2018</small>
 
 * Added focus state for clipboard buttons

diff --git a/material/assets/stylesheets/application.2a88008a.css b/material/assets/stylesheets/application.2a88008a.css
diff --git a/material/assets/stylesheets/application.7fb6a6f0.css b/material/assets/stylesheets/application.7fb6a6f0.css
diff --git a/material/base.html b/material/base.html
@@ -34,7 +34,7 @@
         <meta name="lang:{{ key }}" content="{{ lang.t(key) }}">
       {% endfor %}
       <link rel="shortcut icon" href="{{ base_url }}/{{ config.theme.favicon }}">
-      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-2.4.0">
+      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-2.5.0">
     {% endblock %}
     {% block htmltitle %}
       {% if page and page.meta and page.meta.title %}
@@ -46,7 +46,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.7fb6a6f0.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.2a88008a.css">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.792431c1.css">
       {% endif %}
@@ -69,18 +69,13 @@
     {% endfor %}
     {% block extrahead %}{% endblock %}
   </head>
+  {% set direction = config.theme.direction %}
   {% if palette.primary or palette.accent %}
     {% set primary = palette.primary | replace(" ", "-") | lower %}
     {% set accent  = palette.accent  | replace(" ", "-") | lower %}
-    {% if palette.primary and palette.accent %}
-      <body data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}">
-    {% elif palette.primary %}
-      <body data-md-color-primary="{{ primary }}">
-    {% elif palette.accent %}
-      <body data-md-color-accent="{{ accent }}">
-    {% endif %}
+    <body dir="{{ direction }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}">
   {% else %}
-    <body>
+    <body dir="{{ direction }}">
   {% endif %}
     <svg class="md-svg">
       <defs>

diff --git a/material/mkdocs_theme.yml b/material/mkdocs_theme.yml
@@ -21,6 +21,9 @@
 # Language for theme localization
 language: en
 
+# Text direction (can be ltr or rtl)
+direction: ltr
+
 # Feature flags for functionality that alters behavior significantly, and thus
 # may be a matter of taste
 feature:

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -47,6 +47,7 @@ theme:
 
   # Default values, taken from mkdocs_theme.yml
   language: en
+  direction: ltr
   feature:
     tabs: true
   palette:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A Material Design theme for MkDocs",
   "keywords": [
     "mkdocs",

diff --git a/src/assets/stylesheets/base/_icons.scss b/src/assets/stylesheets/base/_icons.scss
@@ -64,4 +64,18 @@
       content: $ligature;
     }
   }
+
+  // Adjust for RTL languages
+  [dir="rtl"] & {
+
+    // Flip ligatures for arrows
+    @each $ligature, $name in (
+      "\E5C8": "arrow-back", // arrow_forward
+      "\E5C4": "arrow-forward" // arrow_back
+    ) {
+      &--#{$name}::before {
+        content: $ligature;
+      }
+    }
+  }
 }
diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss
@@ -166,6 +166,7 @@ kbd {
     background-color: $md-code-background;
     color: $md-code-color;
     font-size: 85%;
+    direction: ltr;
 
     // Wrap text and hide scollbars
     @media print {
@@ -307,13 +308,27 @@ kbd {
   sup,
   sub {
     margin-left: 0.0625em * 1 / 0.8;
+
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      margin-right: 0.0625em * 1 / 0.8;
+      margin-left: initial;
+    }
   }
 
   // Blockquotes, possibly nested
   blockquote {
     padding-left: 1.2rem;
     border-left: 0.4rem solid $md-color-black--lighter;
     color: $md-color-black--light;
+
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      padding-right: 1.2rem;
+      padding-left: initial;
+      border-right: 0.4rem solid $md-color-black--lighter;
+      border-left: initial;
+    }
   }
 
   // Unordered lists
@@ -327,6 +342,12 @@ kbd {
     margin-left: 0.625em;
     padding: 0;
 
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      margin-right: 0.625em;
+      margin-left: initial;
+    }
+
     // Nested ordered lists
     ol {
       list-style-type: lower-alpha;
@@ -342,6 +363,12 @@ kbd {
       margin-bottom: 0.5em;
       margin-left: 1.25em;
 
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        margin-right: 1.25em;
+        margin-left: initial;
+      }
+
       // Decrease vertical spacing
       p,
       blockquote {
@@ -357,13 +384,25 @@ kbd {
       ul,
       ol {
         margin: 0.5em 0 0.5em 0.625em;
+
+        // Adjust for RTL languages
+        [dir="rtl"] & {
+          margin-right: 0.625em;
+          margin-left: initial;
+        }
       }
     }
   }
 
   // Definition lists
   dd {
     margin: 1em 0 1em 1.875em;
+
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      margin-right: 1.875em;
+      margin-left: initial;
+    }
   }
 
   // Limit width to container
@@ -395,6 +434,11 @@ kbd {
     th:not([align]),
     td:not([align]) {
       text-align: left;
+
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        text-align: right;
+      }
     }
 
     // Table headings

diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss
@@ -39,6 +39,12 @@
     font-size: ms(-1);
     overflow: auto;
 
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      border-right: 0.4rem solid $clr-blue-a200;
+      border-left: none;
+    }
+
     // Adjust spacing on last element
     html & > :last-child {
       margin-bottom: 1.2rem;
@@ -57,6 +63,11 @@
       background-color: transparentize($clr-blue-a200, 0.9);
       font-weight: 700;
 
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        padding: 0.8rem 4rem 0.8rem 1.2rem;
+      }
+
       // Reset spacing, if title is the only element
       &:last-child {
         margin-bottom: 0;
@@ -71,6 +82,12 @@
         color: $clr-blue-a200;
         font-size: 2rem;
         content: "\E3C9"; // edit
+
+        // Adjust for RTL languages
+        [dir="rtl"] & {
+          right: 1.2rem;
+          left: initial;
+        }
       }
     }
 
@@ -94,11 +111,16 @@
       // Define base class
       &%#{nth($names, 1)},
       &.#{nth($names, 1)} {
-        border-left: 0.4rem solid $tint;
+        border-left-color: $tint;
+
+        // Adjust for RTL languages
+        [dir="rtl"] & {
+          border-right-color: $tint;
+        }
 
         // Title
         > .admonition-title {
-          border-bottom: 0.1rem solid transparentize($tint, 0.9);
+          border-bottom-color: 0.1rem solid transparentize($tint, 0.9);
           background-color: transparentize($tint, 0.9);
 
           // Icon

diff --git a/src/assets/stylesheets/extensions/_footnotes.scss b/src/assets/stylesheets/extensions/_footnotes.scss
@@ -129,10 +129,21 @@
     opacity: 0;
     vertical-align: text-bottom;
 
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      transform: translateX(-0.5rem);
+    }
+
     // Back reference icon
     &::before {
+      display: inline-block;
       font-size: 1.6rem;
       content: "\E31B"; // keyboard_return
+
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        transform: scaleX(-1)
+      }
     }
   }
 }
diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss
@@ -38,6 +38,12 @@
       opacity   0.125s 0.25s;
     opacity: 0;
 
+    // Adjust for RTL languages
+    [dir="rtl"] & {
+      margin-right: 1rem;
+      margin-left: initial;
+    }
+
     // Higher specificity for color due to palettes integration
     html body & {
       color: $md-color-black--lighter;

diff --git a/src/assets/stylesheets/extensions/pymdown/_details.scss b/src/assets/stylesheets/extensions/pymdown/_details.scss
@@ -51,6 +51,11 @@
     // Increase spacing to the right - scoped here for higher specificity
     summary {
       padding-right: 4rem;
+
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        padding-left: 4rem;
+      }
     }
 
     // Manually hide and show, if browser doesn't support details
@@ -92,6 +97,12 @@
       color: $md-color-black--lighter;
       font-size: 2rem;
       content: "\E313"; // keyboard_arrow_down
+
+      // Adjust for RTL languages
+      [dir="rtl"] & {
+        right: initial;
+        left: 1.2rem;
+      }
     }
   }
 }