diff --git a/src/core/drive/page_renderer.js b/src/core/drive/page_renderer.js
index c2789639b..475cb1cb3 100644
--- a/src/core/drive/page_renderer.js
+++ b/src/core/drive/page_renderer.js
@@ -60,13 +60,18 @@ export class PageRenderer extends Renderer {
 
   #setLanguage() {
     const { documentElement } = this.currentSnapshot
-    const { lang } = this.newSnapshot
+    const { dir, lang } = this.newSnapshot
 
     if (lang) {
       documentElement.setAttribute("lang", lang)
     } else {
       documentElement.removeAttribute("lang")
     }
+    if (dir) {
+      documentElement.setAttribute("dir", dir)
+    } else {
+      documentElement.removeAttribute("dir")
+    }
   }
 
   async mergeHead() {
diff --git a/src/core/drive/page_snapshot.js b/src/core/drive/page_snapshot.js
index 4e54944c8..c1c56261d 100644
--- a/src/core/drive/page_snapshot.js
+++ b/src/core/drive/page_snapshot.js
@@ -45,6 +45,10 @@ export class PageSnapshot extends Snapshot {
     return this.documentElement.getAttribute("lang")
   }
 
+  get dir() {
+    return this.documentElement.getAttribute("dir")
+  }
+
   get headElement() {
     return this.headSnapshot.element
   }
diff --git a/src/tests/fixtures/dir_rtl.html b/src/tests/fixtures/dir_rtl.html
new file mode 100644
index 000000000..2793c0e5d
--- /dev/null
+++ b/src/tests/fixtures/dir_rtl.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html dir="rtl">
+  <head>
+    <meta charset="utf-8" />
+    <title>Turbo</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <h1>html[dir="rtl"]</h1>
+  </body>
+</html>
diff --git a/src/tests/fixtures/rendering.html b/src/tests/fixtures/rendering.html
index f03e725a8..9772804f6 100644
--- a/src/tests/fixtures/rendering.html
+++ b/src/tests/fixtures/rendering.html
@@ -47,6 +47,7 @@ <h1>Rendering</h1>
       <p><a id="delayed-link" href="/__turbo/delayed_response">Delayed link</a></p>
       <p><a id="redirect-link" href="/__turbo/redirect">Redirect link</a></p>
       <p><a id="es_locale_link" href="/src/tests/fixtures/es_locale.html">Change html[lang]</a></p>
+      <p><a id="dir-rtl" href="/src/tests/fixtures/dir_rtl.html">Change html[dir]</a></p>
       <form>
         <input type="text" id="text-input">
         <input type="radio" id="radio-input">
diff --git a/src/tests/functional/rendering_tests.js b/src/tests/functional/rendering_tests.js
index 22ffe741c..2f50729eb 100644
--- a/src/tests/functional/rendering_tests.js
+++ b/src/tests/functional/rendering_tests.js
@@ -201,6 +201,12 @@ test("changes the html[lang] attribute", async ({ page }) => {
   await expect(page.locator("html")).toHaveAttribute("lang", "es")
 })
 
+test("changes the html[dir] attribute", async ({ page }) => {
+  await page.click("#dir-rtl")
+
+  await expect(page.locator("html")).toHaveAttribute("dir", "rtl")
+})
+
 test("accumulates script elements in head", async ({ page }) => {
   const assetElements = () => page.$$('script')
   const originalElements = await assetElements()
