diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss
index e7aefe6c..efb4b8f3 100644
--- a/assets/scss/partials/base.scss
+++ b/assets/scss/partials/base.scss
@@ -35,4 +35,4 @@ body {
 ::-webkit-scrollbar-track {
     background-color: transparent;
 }
-/**/
+/**/
\ No newline at end of file
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index ef35ba9c..36f326a5 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -252,9 +252,9 @@
     h4,
     h5,
     h6 {
-        margin-left: calc((var(--card-padding)) * -1);
-        padding-left: calc(var(--card-padding) - var(--heading-border-size));
-        border-left: var(--heading-border-size) solid var(--accent-color);
+        margin-inline-start: calc((var(--card-padding)) * -1);
+        padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
+        border-inline-start: var(--heading-border-size) solid var(--accent-color);
     }
 
     figure {
@@ -269,7 +269,7 @@
     blockquote {
         position: relative;
         margin: 1.5em 0;
-        border-left: var(--blockquote-border-size) solid var(--card-separator-color);
+        border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
         padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
@@ -313,7 +313,10 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
-
+        //  keep Codeblocks LTR
+        [dir="rtl"] & {
+            direction: ltr;
+        }
         code {
             color: unset;
             border: none;
@@ -332,7 +335,10 @@
                 opacity: 1;
             }
         }
-
+        // keep Codeblocks LTR
+        [dir="rtl"] & {
+            direction: ltr;
+        }
         pre {
             margin: initial;
             padding: 0;
diff --git a/assets/scss/partials/layout/search.scss b/assets/scss/partials/layout/search.scss
index f2cc7be4..89cdcef9 100644
--- a/assets/scss/partials/layout/search.scss
+++ b/assets/scss/partials/layout/search.scss
@@ -24,7 +24,7 @@
     label {
         position: absolute;
         top: 15px;
-        left: 20px;
+        inset-inline-start: 20px;
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
@@ -51,7 +51,7 @@
 
     button {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
         height: 100%;
         width: var(--button-size);
@@ -78,4 +78,5 @@
             height: 20px;
         }
     }
+
 }
\ No newline at end of file
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index cfad0a0c..ea1cf07c 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -13,6 +13,11 @@ languages:
         languageName: 中文
         title: 演示站点
         weight: 2
+    ar:
+        languageName: عربي
+        languagedirection: rtl
+        title: موقع تجريبي
+        weight: 3
 
 # Change it to your Disqus shortname before using
 disqusShortname: hugo-theme-stack
@@ -21,7 +26,7 @@ disqusShortname: hugo-theme-stack
 googleAnalytics:
 
 # Theme i18n support
-# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
 DefaultContentLanguage: en
 
 # Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
diff --git a/exampleSite/content/post/placeholder-text/index.ar.md b/exampleSite/content/post/placeholder-text/index.ar.md
new file mode 100644
index 00000000..b0328f4d
--- /dev/null
+++ b/exampleSite/content/post/placeholder-text/index.ar.md
@@ -0,0 +1,32 @@
++++
+author = "Hugo Authors"
+title = "مثال نص"
+date = "2019-03-09"
+description = "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة"
+categories = [
+    "تجربة",
+    "تجربة مع فراغات"
+]
+tags = [
+    "ماركداون",
+    "نص",
+    "وسم مع فراغات"
+]
+image = "matt-le-SJSpo9hQf7s-unsplash.jpg"
++++
+## فقرة 1
+
+هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من [مولد النص العربى](https://colorslab.com/textgator/)، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
+إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
+ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
+هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
+
+## فقرة 2
+
+هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من [مولد النص العربى](https://colorslab.com/textgator/)، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
+إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
+ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
+هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
+
+## تجربة RTL
+كلمة 1 Text كلمة 2
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index db1903eb..98cc8152 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}" dir="{{ default `ltr` .Language.LanguageDirection }}">
     <head>
         {{- partial "head/head.html" . -}}
         {{- block "head" . -}}{{ end }}