writing mode: RTL functionality w/ CSS values debug

src/App.vue

@@ -2,6 +2,7 @@
   <div
     id="app-loaded"
     :style="bgStyle"
+    :dir="$t('_locale.dir')"
   >
     <div
       id="app_bg_wrapper"

src/components/dialog_modal/dialog_modal.vue

@@ -58,6 +58,9 @@
   inline-size: max-content;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+  [dir="rtl"] & {
+    transform: translateX(50%);
+  }
 
   .dialog-modal-heading {
     .title {

src/components/edit_status_modal/edit_status_modal.vue

@@ -41,7 +41,7 @@
     max-inline-size: 6.5em;
 
     .emoji-icon {
-      justify-content: right;
+      justify-content: end;
     }
   }
 }

src/components/emoji_picker/emoji_picker.scss

@@ -26,8 +26,7 @@
   position: absolute;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  margin-block: 0;
-  margin-inline: !important;
+  margin: 0 !important;
   z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
@@ -192,7 +191,7 @@
       align-items: center;
       flex-wrap: wrap;
       padding-inline-start: 5px;
-      justify-content: left;
+      justify-content: start;
 
       &-title {
         font-size: 0.85em;

src/components/mobile_nav/mobile_nav.vue

@@ -166,6 +166,9 @@
     &.-closed {
       transform: translateX(100%);
       box-shadow: none;
+      [dir="rtl"] & {
+        transform: translate(-100%);
+      }
     }
   }
 

src/components/popover/popover.js

@@ -53,6 +53,11 @@ const Popover = {
         return
       }
 
+      const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
+      const isRTL = this.$t('_locale.dir') == "rtl"
+      const inlineStartOf = (box) => isRTL ? viewport.width - box.right : box.left
+      const inlineEndOf = (box) => isRTL ? viewport.width - box.left : box.right
+
       // Popover will be anchored around this element, trigger ref is the container, so
       // its children are what are inside the slot. Expect only one v-slot:trigger.
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
@@ -61,7 +66,7 @@ const Popover = {
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
       const screenBox = anchorEl.getBoundingClientRect()
       // Screen position of the origin point for popover
-      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const origin = { x: inlineStartOf(screenBox) + screenBox.width * 0.5, y: screenBox.top }
       const content = this.$refs.content
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentBounds = this.boundTo &&
@@ -73,11 +78,11 @@ const Popover = {
       // What are the screen bounds for the popover? Viewport vs container
       // when using viewport, using default margin values to dodge the navbar
       const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
+        min: inlineStartOf(parentBounds) + (margin.left || 0),
+        max: inlineEndOf(parentBounds) - (margin.right || 0)
       } : {
         min: 0 + (margin.left || 10),
-        max: window.innerWidth - (margin.right || 10)
+        max: viewport.width - (margin.right || 10)
       }
 
       const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
@@ -122,12 +127,13 @@ const Popover = {
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateXLogical = isRTL ? -translateX : translateX
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
       this.styles = {
         opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        transform: `translateX(${Math.round(translateXLogical)}px) translateY(${Math.round(translateY)}px)`
       }
     },
     showPopover () {

src/components/post_status_form/post_status_form.vue

@@ -471,7 +471,7 @@
   // Order is not necessary but a good indicator
   .media-upload-icon {
     order: 1;
-    justify-content: left;
+    justify-content: start;
   }
 
   .emoji-icon {
@@ -481,7 +481,7 @@
 
   .poll-icon {
     order: 3;
-    justify-content: right;
+    justify-content: end;
   }
 
   .error {

src/components/react_button/react_button.vue

@@ -107,6 +107,9 @@
   .popover {
     transform: translateX(-64px) translateY(5px);
     min-inline-size: 70%;
+    [dir="rtl"] & {
+      transform: translateX(64px) translateY(5px);
+    }
   }
 }
 

src/components/side_drawer/side_drawer.vue

@@ -243,6 +243,9 @@
 .side-drawer-container-closed {
   transition-delay: 0.35s;
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
 }
 
 .side-drawer-darken {
@@ -317,6 +320,9 @@
 
 .side-drawer-closed {
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
 }
 
 .side-drawer-heading {

src/components/status/status.scss

@@ -310,7 +310,7 @@
     inline-size: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: left;
+    justify-content: start;
     margin-block-start: var(--status-margin, $status-margin);
 
     > * {

src/components/sticker_picker/sticker_picker.vue

@@ -41,8 +41,7 @@
   position: absolute;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  margin-block: 0;
-  margin-inline: !important;
+  margin: 0 !important;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;

src/i18n/ar.json

@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "features_panel": {
         "media_proxy": "بروكسي الوسائط",
         "scope_options": "",

src/i18n/en.json

@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "ltr"
+    },
     "about": {
         "bubble_instances": "Local Bubble Instances",
         "bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",

src/i18n/fa.json

@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "about": {
         "mrf": {
             "federation": "فدراسیون",

src/i18n/he.json

@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "about": {
         "mrf": {
             "federation": "פדרציה",