diff --git a/src/lib/stores/app/misc.js b/src/lib/stores/app/misc.js
index bcb7207..423abc4 100644
--- a/src/lib/stores/app/misc.js
+++ b/src/lib/stores/app/misc.js
@@ -1,4 +1,4 @@
-import {writable} from 'svelte/store'
+import {derived, writable} from 'svelte/store'
 
 export const saved = writable(true)
 
@@ -14,6 +14,17 @@ export const onMobile = !import.meta.env.SSR ? writable(/Android|webOS|iPhone|iP
 
 export const locale = writable('en')
 
+export const writingDirection = derived(
+    locale,
+    $locale => (
+        $locale === 'ar' ||
+        $locale === 'he' ||
+        $locale === 'fa' ||
+        $locale === 'ur' ||
+        $locale === 'bal'
+    ) ? 'rtl' : 'ltr'
+)
+
 export const highlightedElement = writable(null)
 
 export const locked_blocks = writable([])
\ No newline at end of file
diff --git a/src/lib/views/editor/Page.svelte b/src/lib/views/editor/Page.svelte
index 8d00853..56465a9 100644
--- a/src/lib/views/editor/Page.svelte
+++ b/src/lib/views/editor/Page.svelte
@@ -11,7 +11,7 @@
 	import { isEqual, cloneDeep } from 'lodash-es'
 	import Spinner from '../../ui/misc/Spinner.svelte'
 	import { code as siteCode } from '../../stores/data/site'
-	import { locale, locked_blocks, showingIDE } from '../../stores/app/misc'
+	import { locale, writingDirection, locked_blocks, showingIDE } from '../../stores/app/misc'
 	import { active_page } from '../../stores/actions'
 	import modal from '../../stores/app/modal'
 	import {
@@ -316,6 +316,7 @@
 	bind:this={page_el}
 	class:fadein={page_mounted}
 	lang={$locale}
+	dir={$writingDirection}
 	use:dndzone={{
 		items: draggable_sections,
 		flipDurationMs,
diff --git a/src/lib/views/modal/PageEditor/PageEditor.svelte b/src/lib/views/modal/PageEditor/PageEditor.svelte
index a2942c7..0d82d99 100644
--- a/src/lib/views/modal/PageEditor/PageEditor.svelte
+++ b/src/lib/views/modal/PageEditor/PageEditor.svelte
@@ -20,7 +20,7 @@
 	import GenericFields from '../../../components/GenericFields.svelte'
 	import { autoRefresh } from '../../../components/misc/CodePreview.svelte'
 	import { buildStaticPage } from '../../../stores/helpers'
-	import { locale, onMobile } from '../../../stores/app/misc'
+	import { locale, writingDirection, onMobile } from '../../../stores/app/misc'
 	import { modal } from '../../../stores/app'
 	import { active_page } from '../../../stores/actions'
 	import activePage, {
@@ -304,7 +304,7 @@
 			bind:bottomPaneSize={$bottomPaneSize}
 			hideRightPanel={$onMobile}
 		>
-			<div slot="left" lang={$locale}>
+			<div slot="left" lang={$locale} dir={$writingDirection}>
 				{#if $activeTab === 'content'}
 					<GenericFields
 						bind:fields
diff --git a/src/lib/views/modal/SiteEditor/SiteEditor.svelte b/src/lib/views/modal/SiteEditor/SiteEditor.svelte
index ca08e20..ae245bd 100644
--- a/src/lib/views/modal/SiteEditor/SiteEditor.svelte
+++ b/src/lib/views/modal/SiteEditor/SiteEditor.svelte
@@ -20,7 +20,7 @@
 	import GenericFields from '../../../components/GenericFields.svelte'
 	import { autoRefresh } from '../../../components/misc/CodePreview.svelte'
 	import { buildStaticPage } from '../../../stores/helpers'
-	import { locale, onMobile } from '../../../stores/app/misc'
+	import { locale, writingDirection, onMobile } from '../../../stores/app/misc'
 	import { modal } from '../../../stores/app'
 	import { active_site } from '../../../stores/actions'
 	import site, {
@@ -298,7 +298,7 @@
 		hideRightPanel={$onMobile}
 		hideLeftOverflow={$showingIDE && $activeTab === 0}
 	>
-		<div slot="left" lang={$locale}>
+		<div slot="left" lang={$locale} dir={$writingDirection}>
 			{#if $activeTab === 'code'}
 				<FullCodeEditor
 					bind:html={rawHTML}
diff --git a/src/lib/views/modal/SymbolEditor/SymbolEditor.svelte b/src/lib/views/modal/SymbolEditor/SymbolEditor.svelte
index b86e55c..d638777 100644
--- a/src/lib/views/modal/SymbolEditor/SymbolEditor.svelte
+++ b/src/lib/views/modal/SymbolEditor/SymbolEditor.svelte
@@ -22,7 +22,7 @@
 	import { autoRefresh } from '../../../components/misc/CodePreview.svelte'
 
 	import { processCode, processCSS, wrapInStyleTags } from '../../../utils'
-	import { locale, onMobile } from '../../../stores/app/misc'
+	import { locale, writingDirection, onMobile } from '../../../stores/app/misc'
 
 	import * as actions from '../../../stores/actions'
 	import { content, code as siteCode } from '../../../stores/data/site'
@@ -299,7 +299,7 @@
 		bind:bottomPaneSize={$bottomPaneSize}
 		hideRightPanel={$onMobile}
 	>
-		<div slot="left" lang={$locale}>
+		<div slot="left" lang={$locale} dir={$writingDirection}>
 			{#if tab === 'code'}
 				<FullCodeEditor
 					bind:html={raw_html}