fix(i18n): Add RTL Detection based on Config Set Language (#2100)

pourmand1376 · web-flow · commit 7a77f54e5014 · 2025-09-17T16:04:22.000-07:00
* Add rtl automatic detection to base.scss

* Implement RTL support for Arabic and Persian locales and update HTML direction attribute in renderPage component

* Update HTML direction attribute in renderPage component to prioritize frontmatter dir value

* Refactor renderPage component to simplify HTML direction attribute assignment by removing frontmatter dir fallback
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -231,8 +231,9 @@ export function renderPage(
   )
 
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
+  const direction = i18n(cfg.locale).direction ?? "ltr"
   const doc = (
-    <html lang={lang}>
+    <html lang={lang} dir={direction}>
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
diff --git a/quartz/i18n/locales/ar-SA.ts b/quartz/i18n/locales/ar-SA.ts
@@ -5,6 +5,7 @@ export default {
     title: "غير معنون",
     description: "لم يتم تقديم أي وصف",
   },
+  direction: "rtl" as const,
   components: {
     callout: {
       note: "ملاحظة",
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
@@ -21,6 +21,7 @@ export interface Translation {
     title: string
     description: string
   }
+  direction?: "ltr" | "rtl"
   components: {
     callout: CalloutTranslation
     backlinks: {
diff --git a/quartz/i18n/locales/fa-IR.ts b/quartz/i18n/locales/fa-IR.ts
@@ -5,6 +5,7 @@ export default {
     title: "بدون عنوان",
     description: "توضیح خاصی اضافه نشده است",
   },
+  direction: "rtl" as const,
   components: {
     callout: {
       note: "یادداشت",

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ export interface Translation {`
`21`	`21`	`title: string`
`22`	`22`	`description: string`
`23`	`23`	`}`
	`24`	`+ direction?: "ltr" \| "rtl"`
`24`	`25`	`components: {`
`25`	`26`	`callout: CalloutTranslation`
`26`	`27`	`backlinks: {`