diff --git a/app/assets/javascripts/discourse/app/components/glimmer-header/hamburger-dropdown-wrapper.gjs b/app/assets/javascripts/discourse/app/components/glimmer-header/hamburger-dropdown-wrapper.gjs
index 7ee2e2098b1..2a7466f2ddd 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-header/hamburger-dropdown-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-header/hamburger-dropdown-wrapper.gjs
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import { prefersReducedMotion } from "discourse/lib/utilities";
 import { isTesting } from "discourse-common/config/environment";
 import discourseLater from "discourse-common/lib/later";
@@ -28,10 +29,7 @@ export default class HamburgerDropdownWrapper extends Component {
     ) {
       const panel = document.querySelector(".menu-panel");
       const headerCloak = document.querySelector(".header-cloak");
-      const finishPosition =
-        document.querySelector("html").classList["direction"] === "rtl"
-          ? "340px"
-          : "-340px";
+      const finishPosition = isDocumentRTL() ? "340px" : "-340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,
diff --git a/app/assets/javascripts/discourse/app/components/glimmer-header/user-menu-wrapper.gjs b/app/assets/javascripts/discourse/app/components/glimmer-header/user-menu-wrapper.gjs
index 0bd90b20202..c43e3c86f44 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-header/user-menu-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-header/user-menu-wrapper.gjs
@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { action } from "@ember/object";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import { prefersReducedMotion } from "discourse/lib/utilities";
 import { isTesting } from "discourse-common/config/environment";
 import discourseLater from "discourse-common/lib/later";
@@ -16,10 +17,7 @@ export default class UserMenuWrapper extends Component {
     ) {
       const panel = document.querySelector(".menu-panel");
       const headerCloak = document.querySelector(".header-cloak");
-      const finishPosition =
-        document.documentElement.classList["direction"] === "rtl"
-          ? "-340px"
-          : "340px";
+      const finishPosition = isDocumentRTL() ? "-340px" : "340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,
diff --git a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
index 08b19edda9e..3a8781ef727 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
@@ -9,6 +9,7 @@ import ItsATrap from "@discourse/itsatrap";
 import concatClass from "discourse/helpers/concat-class";
 import scrollLock from "discourse/lib/scroll-lock";
 import SwipeEvents from "discourse/lib/swipe-events";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import { isTesting } from "discourse-common/config/environment";
 import discourseLater from "discourse-common/lib/later";
 import { bind, debounce } from "discourse-common/utils/decorators";
@@ -51,7 +52,7 @@ export default class GlimmerSiteHeader extends Component {
   }
 
   get leftMenuClass() {
-    if (document.querySelector("html").classList["direction"] === "rtl") {
+    if (isDocumentRTL()) {
       return "user-menu";
     } else {
       return "hamburger-panel";
diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 70375bd770f..845e42b34fc 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -6,6 +6,7 @@ import MountWidget from "discourse/components/mount-widget";
 import { topicTitleDecorators } from "discourse/components/topic-title";
 import scrollLock from "discourse/lib/scroll-lock";
 import SwipeEvents from "discourse/lib/swipe-events";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import Docking from "discourse/mixins/docking";
 import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
 import { isTesting } from "discourse-common/config/environment";
@@ -104,12 +105,8 @@ const SiteHeaderComponent = MountWidget.extend(
       this.pxClosed = null;
     },
 
-    _isRTL() {
-      return document.querySelector("html").classList["direction"] === "rtl";
-    },
-
     _leftMenuClass() {
-      return this._isRTL() ? "user-menu" : "hamburger-panel";
+      return isDocumentRTL() ? "user-menu" : "hamburger-panel";
     },
 
     @bind
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 279fda8355c..5402402053d 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -8,6 +8,7 @@ import { addExtraUserClasses } from "discourse/helpers/user-avatar";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import scrollLock from "discourse/lib/scroll-lock";
 import { logSearchLinkClick } from "discourse/lib/search";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import DiscourseURL from "discourse/lib/url";
 import { scrollTop } from "discourse/mixins/scroll-top";
 import { avatarImg } from "discourse/widgets/post";
@@ -381,10 +382,7 @@ createWidget("hamburger-dropdown-wrapper", {
     ) {
       const panel = document.querySelector(".menu-panel");
       const headerCloak = document.querySelector(".header-cloak");
-      const finishPosition =
-        document.querySelector("html").classList["direction"] === "rtl"
-          ? "340px"
-          : "-340px";
+      const finishPosition = isDocumentRTL() ? "340px" : "-340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,
@@ -438,10 +436,7 @@ createWidget("revamped-user-menu-wrapper", {
     ) {
       const panel = document.querySelector(".menu-panel");
       const headerCloak = document.querySelector(".header-cloak");
-      const finishPosition =
-        document.querySelector("html").classList["direction"] === "rtl"
-          ? "-340px"
-          : "340px";
+      const finishPosition = isDocumentRTL() ? "-340px" : "340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,