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..7e720a5f06 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -3,6 +3,49 @@
 @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 kbd,
+html.rtl-text code {
+  direction: ltr;
+  display: inline-block;
+}
+
 @theme {
   --default-ring-width: 3px;
   --default-ring-color: var(--color-malibu-blue);