diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 77cc80d3..ccca8123 100644
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@@ -89,7 +89,7 @@ export function initData(route: Route): VitePressData {
     frontmatter: computed(() => route.data.frontmatter),
     params: computed(() => route.data.params),
     lang: computed(() => site.value.lang),
-    dir: computed(() => site.value.dir),
+    dir: computed(() => route.data.frontmatter.dir || site.value.dir || 'ltr'),
     localeIndex: computed(() => site.value.localeIndex || 'root'),
     title: computed(() => {
       return createTitle(site.value, route.data)
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index bbfd3cf4..0ecca7ec 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, inBrowser } from 'vitepress'
+import { useRoute } from 'vitepress'
 import { computed, provide, useSlots, watch } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
@@ -22,22 +22,12 @@ watch(() => route.path, closeSidebar)
 
 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 
-const { frontmatter, dir } = useData()
+const { frontmatter } = useData()
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
 provide('hero-image-slot-exists', heroImageSlotExists)
-
-watch(() => frontmatter.value.dir, (metaDir) => {
-  if (!inBrowser) { return }
-  const pageDir = metaDir || dir.value || 'ltr'
-  // <html dir>
-  document.documentElement.dir = pageDir
-  // <body dir> and <body style="direction">
-  document.body.dir = pageDir
-  document.body.style.direction = pageDir
-}, { immediate: true })
 </script>
 
 <template>
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index 8e9dd3d6..8818a5e1 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -148,10 +148,8 @@ export async function renderPage(
     }
   }
 
-  const pageDir = pageData.frontmatter.dir || siteData.dir || 'ltr'
-
   const html = `<!DOCTYPE html>
-<html lang="${siteData.lang}" dir="${pageDir}">
+<html lang="${siteData.lang}" dir="${siteData.dir}">
   <head>
     <meta charset="utf-8">
     ${
@@ -175,7 +173,7 @@ export async function renderPage(
     }
     ${await renderHead(head)}
   </head>
-  <body dir="${pageDir}" style="direction: ${pageDir}">${teleports?.body || ''}
+  <body>${teleports?.body || ''}
     <div id="app">${content}</div>
     ${metadataScript.inHead ? '' : metadataScript.html}
     ${inlinedScript}
