diff --git a/app/assets/javascripts/rtl.js b/app/assets/javascripts/rtl.js
new file mode 100644
index 00000000..47e3801c
--- /dev/null
+++ b/app/assets/javascripts/rtl.js
@@ -0,0 +1,8 @@
+$(document).on('turbolinks:load', function() {
+  $('#post_dir').change(function(e) {
+    var dir = $(this).val();
+    var rid = (dir == 'rtl') ? 'ltr' : 'rtl';
+
+    $('.'+rid).removeClass(rid).addClass(dir);
+  });
+});
diff --git a/app/views/posts/_form.haml b/app/views/posts/_form.haml
index 243e06df..e4bb175e 100644
--- a/app/views/posts/_form.haml
+++ b/app/views/posts/_form.haml
@@ -16,6 +16,12 @@
 = form_tag url, method: method, class: 'form' do
   .form-group
     = submit_tag t('posts.save'), class: 'btn btn-success'
+  .form-group
+    = label_tag 'post_dir', t('posts.dir')
+    = select_tag 'post[dir]',
+      options_for_select([[t('posts.ltr'), 'ltr'], [t('posts.rtl'), 'rtl']],
+      @post.get_front_matter(:dir)),
+      { class: 'form-control' }
   .form-group
     = text_field 'post', 'title', value: @post.title, class: field_class,
       placeholder: t('posts.title')
@@ -112,11 +118,6 @@
       = text_field 'post', "lang[#{lang}]", value: @post.get_front_matter(:lang).dig(lang),
         class: 'form-control'
       %small.text-muted.form-text= t('posts.lang_help')
-  .form-group
-    = label_tag 'post_dir', t('posts.dir')
-    = select_tag 'post[dir]',
-      options_for_select([[t('posts.ltr'), 'ltr'], [t('posts.rtl'), 'rtl']]),
-      { class: 'form-control' }
   .form-group
     = submit_tag t('posts.save'), class: 'btn btn-success'