From 24bef58c7c07ab64ebcc20fd88e0e2dfb7da315f Mon Sep 17 00:00:00 2001
From: NOBODY <ylala4546@gmail.com>
Date: Sat, 30 May 2026 10:59:48 +0330
Subject: [PATCH 1/2] feat(i18n): add non-destructive RTL text direction and
 typography support for Persian and Arabic

---
 src/client/LangSelector.ts | 19 ++++++++++++++++
 src/client/styles.css      | 44 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/src/client/LangSelector.ts b/src/client/LangSelector.ts
index 97d369d68d..00cc481689 100644
--- a/src/client/LangSelector.ts
+++ b/src/client/LangSelector.ts
@@ -8,6 +8,8 @@ import { formatDebugTranslation } from "./Utils";
 import en from "../../resources/lang/en.json";
 import metadata from "../../resources/lang/metadata.json";
 
+const RTL_LANGUAGES = new Set(["fa", "ar", "he"]);
+
 type LanguageMetadata = {
   code: string;
   native: string;
@@ -98,6 +100,14 @@ export class LangSelector extends LitElement {
     this.translations = translations;
     this.currentLang = userLang;
 
+    const isRtl = RTL_LANGUAGES.has(userLang);
+    if (isRtl) {
+      document.documentElement.classList.add("rtl-text");
+    } else {
+      document.documentElement.classList.remove("rtl-text");
+    }
+    document.documentElement.setAttribute("lang", userLang);
+
     await this.loadLanguageList();
     this.applyTranslation();
   }
@@ -200,6 +210,15 @@ export class LangSelector extends LitElement {
     localStorage.setItem("lang", lang);
     this.translations = await this.loadLanguage(lang);
     this.currentLang = lang;
+
+    const isRtl = RTL_LANGUAGES.has(lang);
+    if (isRtl) {
+      document.documentElement.classList.add("rtl-text");
+    } else {
+      document.documentElement.classList.remove("rtl-text");
+    }
+    document.documentElement.setAttribute("lang", lang);
+
     this.applyTranslation();
   }
 
diff --git a/src/client/styles.css b/src/client/styles.css
index 234d2aece0..f262b9d35a 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -3,6 +3,50 @@
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant hover (&:hover);
 
+html.rtl-text {
+  --font-display:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Tahoma, sans-serif;
+}
+
+html.rtl-text p,
+html.rtl-text td,
+html.rtl-text th,
+html.rtl-text li,
+html.rtl-text h1,
+html.rtl-text h2,
+html.rtl-text h3,
+html.rtl-text .prose,
+html.rtl-text .text-start,
+html.rtl-text .text-left {
+  direction: rtl;
+  text-align: right;
+}
+
+html.rtl-text ul,
+html.rtl-text ol {
+  padding-left: 0 !important;
+  padding-right: 1.25rem !important;
+}
+
+html.rtl-text .pl-4 {
+  padding-left: 0 !important;
+  padding-right: 1rem !important;
+}
+
+html.rtl-text .pl-5 {
+  padding-left: 0 !important;
+  padding-right: 1.25rem !important;
+}
+
+html.rtl-text font-mono,
+html.rtl-text .font-mono,
+html.rtl-text kbd,
+html.rtl-text code {
+  direction: ltr;
+  display: inline-block;
+}
+
 @theme {
   --default-ring-width: 3px;
   --default-ring-color: var(--color-malibu-blue);

From a7039964101d9d80aa390339559ce1a18b73ee2b Mon Sep 17 00:00:00 2001
From: NOBODY <ylala4546@gmail.com>
Date: Sat, 30 May 2026 11:19:13 +0330
Subject: [PATCH 2/2] fix(css): remove invalid element selector html.rtl-text
 font-mono

---
 src/client/styles.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/client/styles.css b/src/client/styles.css
index f262b9d35a..7e720a5f06 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -39,7 +39,6 @@ html.rtl-text .pl-5 {
   padding-right: 1.25rem !important;
 }
 
-html.rtl-text font-mono,
 html.rtl-text .font-mono,
 html.rtl-text kbd,
 html.rtl-text code {