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

* 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
2025-09-18 02:34:22 +03:30
parent 03ccac2872
commit 7a77f54e50
4 changed files with 5 additions and 1 deletions
--- 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">
--- 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: "ملاحظة",
--- 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: {
--- 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: "یادداشت",