From f05e3012e390ba23486f4cf916a884055ff5dfef Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 13:32:30 +0800
Subject: [PATCH] Preliminary step for RTL

---
 src/app.css                           | 321 +++++++++++++-------------
 src/app.jsx                           |   2 +
 src/components/ICONS.jsx              | 117 +++++++---
 src/components/account-block.css      |   2 +
 src/components/account-block.jsx      |   2 +-
 src/components/account-info.css       |  32 ++-
 src/components/account-info.jsx       |  11 +-
 src/components/compose.css            |  28 +--
 src/components/compose.jsx            |  10 +-
 src/components/drafts.css             |   2 +-
 src/components/generic-accounts.css   |   6 +-
 src/components/icon.jsx               |  10 +-
 src/components/links-bar.css          |  13 +-
 src/components/media-modal.jsx        |  20 +-
 src/components/media-post.css         |   2 +-
 src/components/menu2.jsx              |  14 +-
 src/components/modal.css              |  19 +-
 src/components/name-text.jsx          |   6 +-
 src/components/nav-menu.css           |  12 +-
 src/components/poll.jsx               |   3 -
 src/components/report-modal.css       |   4 +-
 src/components/search-form.jsx        |   1 +
 src/components/shortcuts-settings.css |  18 +-
 src/components/shortcuts-settings.jsx |   5 +
 src/components/shortcuts.css          |  10 +-
 src/components/status.css             | 172 ++++++++------
 src/components/status.jsx             |  20 +-
 src/components/timeline.jsx           |  11 +-
 src/components/translation-block.css  |   7 +-
 src/index.css                         |  16 ++
 src/pages/accounts.css                |   4 +-
 src/pages/catchup.css                 |  44 ++--
 src/pages/filters.jsx                 |   1 +
 src/pages/hashtag.jsx                 |   5 +-
 src/pages/login.css                   |   5 +-
 src/pages/login.jsx                   |   1 +
 src/pages/notifications.css           |  15 +-
 src/pages/search.css                  |  15 +-
 src/pages/settings.css                |  10 +-
 src/pages/status.css                  |   4 +-
 src/pages/status.jsx                  |   2 +
 src/pages/trending.jsx                |   2 +-
 src/pages/welcome.css                 |   7 +-
 src/utils/is-rtl.js                   |  26 +++
 44 files changed, 654 insertions(+), 383 deletions(-)
 create mode 100644 src/utils/is-rtl.js

diff --git a/src/app.css b/src/app.css
index e675c4d1..52245283 100644
--- a/src/app.css
+++ b/src/app.css
@@ -162,7 +162,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   white-space: nowrap;
 }
 .deck > header .header-grid > .header-side:last-of-type {
-  text-align: right;
+  text-align: end;
   grid-column: 3;
 }
 .deck > header .header-grid :is(button, .button).plain {
@@ -181,8 +181,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   grid-template-columns: 1fr max-content;
 }
 .deck > header .header-grid-2 h1 {
-  text-align: left;
-  padding-left: 8px;
+  text-align: start;
+  padding-inline-start: 8px;
 }
 .deck > header .header-grid h1:has(.ancestors-indicator) {
   display: flex;
@@ -217,6 +217,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     opacity: 0.25;
   }
 }
+@keyframes indeterminate-bar-rtl {
+  0% {
+    transform: translateX(50%);
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0.25;
+  }
+}
 .deck > header.loading:after {
   pointer-events: none;
   content: '';
@@ -232,6 +245,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transparent
   );
   animation: indeterminate-bar 1s ease-in-out infinite alternate;
+  &:dir(rtl) {
+    animation-name: indeterminate-bar-rtl;
+  }
 }
 @media (min-width: 40em) {
   .deck > header.loading:after {
@@ -268,6 +284,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
           width: 95vw;
           max-width: calc(320px * 3.3);
           transform: translateX(calc(-50% + var(--main-width) / 2));
+          &:dir(rtl) {
+            transform: translateX(calc(50% - var(--main-width) / 2));
+          }
         }
       }
 
@@ -346,6 +365,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   margin: 0;
   padding: 0;
   border-bottom: var(--hairline-width) solid var(--divider-color);
+  --line-dir: var(--to-forward);
 }
 .timeline.flat > li {
   border-bottom: none;
@@ -362,10 +382,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   --avatar-size: 50px;
   --avatar-margin-start: 16px;
   --avatar-margin-end: 12px;
+  --line-curve: 45deg;
+  :dir(rtl) & {
+    --line-curve: -45deg;
+  }
 }
 .timeline.contextual > li {
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -394,7 +418,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus) {
-  padding-left: 40px;
+  padding-inline-start: 40px;
 }
 .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
   background-color: var(--bg-color);
@@ -408,7 +432,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline.contextual .replies[data-comments-level='4']:has(.replies) {
   overflow-x: auto;
-  mask-image: linear-gradient(to left, transparent, black 32px);
+  mask-image: linear-gradient(var(--to-backward), transparent, black 32px);
 }
 .timeline.contextual
   .replies[data-comments-level='4']:has(.replies)
@@ -426,145 +450,61 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > :is(.status-link, .status-focus)
   + .replies
   .replies-summary {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-/* .timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant.thread
   > :is(.status-link, .status-focus)
   + .replies
   :is(.status-link, .status-focus) {
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-/* .timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .status-link {
-  padding-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  .status-link {
-  padding-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus)
   + .replies
   .replies-summary {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--thread-start) + var(--line-margin-end) * var(--comments-level)
   );
 }
-/* .timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus)
   + .replies
   :is(.status-link, .status-focus) {
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--thread-start) + var(--line-margin-end) * var(--comments-level)
   );
 }
-/* .timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .status-link {
-  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2));
-}
-.timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  .status-link {
-  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
-} */
 .timeline.contextual > li.descendant:not(.thread):before {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 .timeline.contextual > li .replies-link {
   color: var(--text-insignificant-color);
-  margin-left: 16px;
+  margin-inline-start: 16px;
   margin-top: -12px;
   padding-bottom: 12px;
   font-size: 90%;
 }
 .timeline.contextual > li.ancestor .replies-link {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
   );
 }
@@ -572,7 +512,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > li.thread
   > :is(.status-link, .status-focus)
   .replies-link {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
   );
 }
@@ -603,7 +543,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   list-style: none;
   gap: 8px;
   align-items: center;
-  margin-right: calc(44px + 8px);
+  margin-inline-end: calc(44px + 8px);
 
   b {
     font-weight: 500;
@@ -618,7 +558,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       transition: transform 0.3s ease;
 
       &:not(:first-child) {
-        margin: 0 0 0 -4px;
+        transform: rotate(0deg);
+        margin: 0;
+        margin-inline-start: -4px;
       }
     }
   }
@@ -637,7 +579,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 
   .replies-parent-link {
     position: absolute;
-    right: 4px;
+    inset-inline-end: 4px;
     height: 100%;
     z-index: 2;
     font-size: 16px;
@@ -648,8 +590,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     align-items: center;
     padding: var(--summary-padding) calc(var(--summary-padding) * 2);
     transform: translateX(100%);
-    margin: calc(-1 * var(--summary-padding)) calc(-1 * var(--summary-padding))
-      calc(-1 * var(--summary-padding)) 0;
+    &:dir(rtl) {
+      transform: translateX(-100%);
+    }
+    margin: calc(-1 * var(--summary-padding)) 0;
+    margin-inline-end: calc(-1 * var(--summary-padding));
     border-radius: 8px;
     background-color: var(--link-bg-color);
 
@@ -681,7 +626,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   color: var(--text-color);
   background-color: var(--comment-line-color);
   background-image: linear-gradient(
-    to top right,
+    to top var(--forward),
     var(--comment-line-color),
     var(--bg-faded-color)
   );
@@ -697,7 +642,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   }
 }
 .timeline.contextual > li .replies[open] > .replies-summary {
-  border-bottom-left-radius: 0;
+  border-end-start-radius: 0;
 
   .avatars {
     opacity: 0.5;
@@ -727,7 +672,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   );
   --line-end: calc(var(--line-start) + var(--line-width));
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -768,14 +713,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 /* .timeline.contextual > li .replies .replies li:before {
   --line-start: calc(
@@ -814,8 +759,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > ul > li:only-child {
     > .replies {
       > ul > li:only-child {
-        margin-left: calc(-1 * var(--line-margin-end));
-        background-position: calc(16px) 0;
+        margin-inline-start: calc(-1 * var(--line-margin-end));
+        background-position: 16px 0;
+        &:dir(rtl) {
+          background-position: -16px 0;
+        }
         background-size: 100% calc(20px + 8px);
 
         &:before {
@@ -856,7 +804,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   --line-width: 3px;
   --line-end: calc(var(--line-start) + var(--line-width));
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -868,8 +816,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline:not(.flat) > li.timeline-item-container-start {
   margin-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   border-bottom: 0;
   background-position: 0 calc(16px + var(--avatar-size));
 }
@@ -882,8 +830,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline:not(.flat) > li.timeline-item-container-end {
   margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
   background-size: 100% 16px;
 
@@ -909,8 +857,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 
 .timeline .show-more {
-  padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
-  text-align: left;
+  padding-inline-start: calc(
+    var(--line-end) + var(--line-margin-end)
+  ) !important;
+  text-align: start;
   background-color: transparent !important;
   backdrop-filter: none !important;
   position: relative;
@@ -918,7 +868,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   padding-block: 16px !important;
 
   .avatars-bunch > .avatar:not(:first-child) {
-    margin-left: -4px;
+    margin-inline-start: -4px;
   }
 }
 .timeline .show-more:hover {
@@ -930,14 +880,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 
 .status-loading {
@@ -988,7 +938,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel {
   --carousel-faded-color: var(--bg-faded-color);
   background: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--carousel-faded-color),
     transparent
   );
@@ -1058,12 +1008,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   display: none;
 }
 .status-carousel .status-carousel-beacon {
-  margin-right: calc(-1 * var(--carousel-gap));
+  margin-inline-end: calc(-1 * var(--carousel-gap));
   pointer-events: none;
   opacity: 0;
 
   ~ .status-carousel-beacon {
-    margin-left: calc(-1 * var(--carousel-gap));
+    margin-inline-start: calc(-1 * var(--carousel-gap));
   }
 }
 /*
@@ -1107,7 +1057,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel.boosts-carousel > ul > li:before {
   content: counter(index);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   font-size: 10px;
   color: var(--text-insignificant-color);
   padding: 6px;
@@ -1147,11 +1097,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   box-shadow: 0 1px var(--bg-color);
 
   &:has(.status-badge:not(:empty)) {
-    border-top-right-radius: 8px;
+    border-start-end-radius: 8px;
   }
 
-  .status-carousel.boosts-carousel & {
-    border-top-left-radius: 8px;
+  .status-carousel.boosts-carousel &:not(.timeline-item-carousel-group &) {
+    border-start-start-radius: 8px;
   }
 }
 .status-carousel-link::focus {
@@ -1189,14 +1139,29 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transform: translate3d(0, 0, 0);
   }
 }
+@keyframes slide-in-rtl {
+  0% {
+    transform: translate3d(-100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
 .deck-backdrop .deck {
   width: var(--main-width);
   max-width: 100vw;
   background-color: var(--bg-color);
   box-shadow: -1px 0 var(--bg-color);
+  &:dir(rtl) {
+    box-shadow: 1px 0 var(--bg-color);
+  }
 }
 .deck-backdrop .deck.slide-in:not(.deck-view-full) {
   animation: slide-in 0.5s var(--timing-function);
+
+  &:dir(rtl) {
+    animation-name: slide-in-rtl;
+  }
 }
 .deck-backdrop .deck .status {
   max-width: var(--main-width);
@@ -1240,7 +1205,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   display: inline-block;
   position: absolute;
-  right: 10px;
+  inset-inline-end: 10px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
@@ -1519,7 +1484,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 .media-modal-container + .status-deck {
   /* display: none; */
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   z-index: -1;
   pointer-events: none;
   user-select: none;
@@ -1547,8 +1512,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     )
     #modal-container
     > div {
-    left: 0;
-    right: 350px;
+    inset-inline-start: 0;
+    inset-inline-end: 350px;
     width: auto;
   }
   /* ✨ New */
@@ -1579,8 +1544,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   position: fixed;
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
-  right: 16px;
-  right: max(16px, env(safe-area-inset-right));
+  inset-inline-end: 16px;
+  inset-inline-end: max(16px, env(safe-area-inset-right));
   padding: 16px;
   background-color: var(--button-bg-blur-color);
   /* backdrop-filter: blur(16px); */
@@ -1629,7 +1594,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
       display: block;
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline-end: 0;
       width: 14px;
       height: 14px;
       border-radius: 50%;
@@ -1696,6 +1661,10 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   border-radius: 0;
   padding: 0;
   right: env(safe-area-inset-right);
+  &:dir(rtl) {
+    right: auto;
+    left: env(safe-area-inset-left);
+  }
   width: 44px;
   height: 44px;
   display: inline-flex;
@@ -1737,6 +1706,11 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 }
 .sheet .sheet-close:not(.outer) + header {
   padding-right: max(44px, env(safe-area-inset-right));
+
+  &:dir(rtl) {
+    padding-right: max(16px, env(safe-area-inset-right));
+    padding-left: max(44px, env(safe-area-inset-left));
+  }
 }
 .sheet header :is(h1, h2, h3) {
   margin: 0;
@@ -1774,6 +1748,10 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     width: 100%;
     height: 100%;
   }
+
+  :dir(rtl) &.rtl-flip {
+    transform: scaleX(-1);
+  }
 }
 
 /* TAG */
@@ -1839,7 +1817,7 @@ body > .szh-menu-container {
   border: 1px solid var(--outline-color);
   border-radius: 8px;
   box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
-  text-align: left;
+  text-align: start;
   /* animation: appear-smooth 0.15s ease-in-out; */
   width: 16em;
   max-width: 90vw;
@@ -1975,7 +1953,7 @@ body > .szh-menu-container {
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child,
 .szh-menu .menu-horizontal > *:not(:only-child):first-child .szh-menu__item {
-  padding-right: 4px !important;
+  padding-inline-end: 4px !important;
 }
 .szh-menu
   .menu-horizontal
@@ -1984,12 +1962,12 @@ body > .szh-menu-container {
   .menu-horizontal
   > *:not(:only-child):not(:first-child):not(:last-child)
   .szh-menu__item {
-  padding-left: 8px !important;
-  padding-right: 4px !important;
+  padding-inline-start: 8px !important;
+  padding-inline-end: 4px !important;
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):last-child,
 .szh-menu .menu-horizontal > *:not(:only-child):last-child .szh-menu__item {
-  padding-left: 8px !important;
+  padding-inline-start: 8px !important;
 }
 .szh-menu .szh-menu__item .menu-shortcut {
   opacity: 0.5;
@@ -2053,7 +2031,11 @@ body > .szh-menu-container {
           text-align: center;
           opacity: 0.5;
           text-overflow: clip;
-          mask-image: linear-gradient(to left, transparent, black 16px);
+          mask-image: linear-gradient(
+            var(--to-backward),
+            transparent,
+            black 16px
+          );
         }
       }
     }
@@ -2069,10 +2051,10 @@ body > .szh-menu-container {
     }
 
     > [class^='szh-menu']:first-child {
-      border-top-left-radius: 8px;
+      border-start-start-radius: 8px;
     }
     > [class^='szh-menu']:last-child {
-      border-top-right-radius: 8px;
+      border-start-end-radius: 8px;
     }
   }
 }
@@ -2153,6 +2135,9 @@ body > .szh-menu-container {
     background-image: var(--middle-circle),
       conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
     transform: scale(0.7);
+    &:dir(rtl) {
+      transform: scale(-0.7, 0.7);
+    }
     transition: transform 0.2s ease-in-out;
 
     &::-webkit-meter-inner-element,
@@ -2362,12 +2347,12 @@ ul.link-list li a {
   }
 }
 ul.link-list li:first-child a {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
+  border-start-start-radius: var(--radius);
+  border-start-end-radius: var(--radius);
 }
 ul.link-list li:last-child a {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
+  border-end-start-radius: var(--radius);
+  border-end-end-radius: var(--radius);
 }
 ul.link-list li a:is(:hover, :focus) {
   color: var(--text-color);
@@ -2404,8 +2389,8 @@ ul.link-list li a .icon {
 }
 .nav-menu-button.with-avatar .icon {
   position: absolute;
-  bottom: 4px;
-  right: 8px;
+  inset-block-end: 4px;
+  inset-inline-end: 8px;
   background-color: var(--bg-color);
   border-radius: 2px;
 }
@@ -2433,13 +2418,17 @@ ul.link-list li a .icon {
 } */
 #columns > * {
   overscroll-behavior: auto;
-  scroll-snap-align: left;
+  scroll-snap-align: start;
   scroll-snap-stop: always;
   overscroll-behavior: auto;
   flex-basis: min(100vw, 360px);
   flex-shrink: 0;
   box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);
+  &:dir(rtl) {
+    box-shadow: 1px 0 var(--bg-color), 2px 0 var(--drop-shadow-color),
+      3px 0 var(--bg-color);
+  }
 }
 #columns:has(> :nth-child(3)) > *:nth-child(even),
 #columns:has(> :nth-child(3))
@@ -2572,7 +2561,7 @@ ul.link-list li a .icon {
   gap: 8px;
   overflow-x: auto;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px,
     black calc(100% - 16px),
@@ -2586,6 +2575,9 @@ ul.link-list li a .icon {
       width: 95vw;
       max-width: calc(320px * 3.3);
       transform: translateX(calc(-50% + var(--main-width) / 2));
+      &:dir(rtl) {
+        transform: translateX(calc(50% - var(--main-width) / 2));
+      }
     }
   }
 
@@ -2704,7 +2696,8 @@ ul.link-list li a .icon {
   min-width: 16px;
   min-height: 16px;
   padding: 4px;
-  margin: -4px -8px -4px 0;
+  margin: -4px 0;
+  margin-inline-end: -8px;
   background-color: var(--bg-faded-color);
   border-radius: 999px;
 }
@@ -2734,11 +2727,14 @@ ul.link-list li a .icon {
   .deck-container:has(~ .deck-backdrop .deck) {
     transition: transform 0.4s ease-out;
     transform: translate3d(-5vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(5vw, 0, 0);
+    }
   }
   .deck-backdrop .deck {
     /* width: 50%;
     min-width: var(--main-width); */
-    border-left: 1px solid var(--divider-color);
+    border-inline-start: 1px solid var(--divider-color);
   }
   .timeline-deck {
     border: 0;
@@ -2799,16 +2795,19 @@ ul.link-list li a .icon {
     > li:not(.timeline-item-container-end, .timeline-item-container-middle):has(
       .status-badge:not(:empty)
     ) {
-    border-top-right-radius: 8px;
+    border-start-end-radius: 8px;
   }
   .timeline:not(.flat) > li:has(.status-link.is-active) {
     transition: var(--back-transition);
     transform: translate3d(-2.5vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(2.5vw, 0, 0);
+    }
   }
   .timeline:not(.flat)
     > li.timeline-item-container:has(.status-link.is-active) {
-    border-top-left-radius: var(--item-radius);
-    border-bottom-left-radius: var(--item-radius);
+    border-start-start-radius: var(--item-radius);
+    border-end-start-radius: var(--item-radius);
   }
   .timeline:not(.flat)
     > li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
@@ -2817,19 +2816,22 @@ ul.link-list li a .icon {
     + li {
     transition: var(--back-transition);
     transform: translate3d(-1.25vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(1.25vw, 0, 0);
+    }
   }
   .timeline:not(.flat)
     > li.timeline-item-container:not(:has(.status-carousel)):has(
       + li .status-link.is-active
     ) {
-    border-top-left-radius: var(--item-radius);
+    border-start-start-radius: var(--item-radius);
   }
   .timeline:not(.flat)
     > li.timeline-item-container:not(:has(.status-carousel)):has(
       .status-link.is-active
     )
     + li.timeline-item-container {
-    border-bottom-left-radius: var(--item-radius);
+    border-end-start-radius: var(--item-radius);
   }
   .box {
     padding: 32px;
@@ -2841,5 +2843,8 @@ ul.link-list li a .icon {
     width: 95vw;
     max-width: calc(320px * 3.3);
     transform: translateX(calc(-50% + var(--main-width) / 2));
+    &:dir(rtl) {
+      transform: translateX(calc(50% - var(--main-width) / 2));
+    }
   }
 }
diff --git a/src/app.jsx b/src/app.jsx
index d2d044c2..fd3ef5ed 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -132,6 +132,8 @@ setTimeout(() => {
     setTimeout(() => {
       if (Array.isArray(ICONS[icon])) {
         ICONS[icon][0]?.();
+      } else if (typeof ICONS[icon] === 'object') {
+        ICONS[icon].module?.();
       } else {
         ICONS[icon]?.();
       }
diff --git a/src/components/ICONS.jsx b/src/components/ICONS.jsx
index 0fa7880f..cac8190b 100644
--- a/src/components/ICONS.jsx
+++ b/src/components/ICONS.jsx
@@ -6,8 +6,14 @@ export const ICONS = {
   'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
   transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
   rocket: () => import('@iconify-icons/mingcute/rocket-line'),
-  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
-  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
+  'arrow-left': {
+    module: () => import('@iconify-icons/mingcute/arrow-left-line'),
+    rtl: true,
+  },
+  'arrow-right': {
+    module: () => import('@iconify-icons/mingcute/arrow-right-line'),
+    rtl: true,
+  },
   'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
   'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
   earth: () => import('@iconify-icons/mingcute/earth-line'),
@@ -16,8 +22,14 @@ export const ICONS = {
   'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
   'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
   message: () => import('@iconify-icons/mingcute/mail-line'),
-  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
-  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
+  comment: {
+    module: () => import('@iconify-icons/mingcute/chat-3-line'),
+    rtl: true,
+  },
+  comment2: {
+    module: () => import('@iconify-icons/mingcute/comment-2-line'),
+    rtl: true,
+  },
   home: () => import('@iconify-icons/mingcute/home-3-line'),
   notification: () => import('@iconify-icons/mingcute/notification-line'),
   follow: () => import('@iconify-icons/mingcute/user-follow-line'),
@@ -31,23 +43,46 @@ export const ICONS = {
   gear: () => import('@iconify-icons/mingcute/settings-3-line'),
   more: () => import('@iconify-icons/mingcute/more-3-line'),
   more2: () => import('@iconify-icons/mingcute/more-1-fill'),
-  external: () => import('@iconify-icons/mingcute/external-link-line'),
-  popout: () => import('@iconify-icons/mingcute/external-link-line'),
-  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
+  external: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popout: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popin: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rotate: '180deg',
+    rtl: true,
+  },
   plus: () => import('@iconify-icons/mingcute/add-circle-line'),
-  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
-  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
+  'chevron-left': {
+    module: () => import('@iconify-icons/mingcute/left-line'),
+    rtl: true,
+  },
+  'chevron-right': {
+    module: () => import('@iconify-icons/mingcute/right-line'),
+    rtl: true,
+  },
   'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
-  reply: [
-    () => import('@iconify-icons/mingcute/share-forward-line'),
-    '180deg',
-    'horizontal',
-  ],
+  reply: {
+    module: () => import('@iconify-icons/mingcute/share-forward-line'),
+    rotate: '180deg',
+    flip: 'horizontal',
+    rtl: true,
+  },
   thread: () => import('@iconify-icons/mingcute/route-line'),
-  group: () => import('@iconify-icons/mingcute/group-line'),
+  group: {
+    module: () => import('@iconify-icons/mingcute/group-line'),
+    rtl: true,
+  },
   bot: () => import('@iconify-icons/mingcute/android-2-line'),
   menu: () => import('@iconify-icons/mingcute/rows-4-line'),
-  list: () => import('@iconify-icons/mingcute/list-check-line'),
+  list: {
+    module: () => import('@iconify-icons/mingcute/list-check-line'),
+    rtl: true,
+  },
   search: () => import('@iconify-icons/mingcute/search-2-line'),
   hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
   info: () => import('@iconify-icons/mingcute/information-line'),
@@ -62,12 +97,21 @@ export const ICONS = {
   share: () => import('@iconify-icons/mingcute/share-2-line'),
   sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
   sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
-  exit: () => import('@iconify-icons/mingcute/exit-line'),
+  exit: {
+    module: () => import('@iconify-icons/mingcute/exit-line'),
+    rtl: true,
+  },
   translate: () => import('@iconify-icons/mingcute/translate-line'),
   play: () => import('@iconify-icons/mingcute/play-fill'),
   trash: () => import('@iconify-icons/mingcute/delete-2-line'),
-  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
-  unmute: () => import('@iconify-icons/mingcute/volume-line'),
+  mute: {
+    module: () => import('@iconify-icons/mingcute/volume-mute-line'),
+    rtl: true,
+  },
+  unmute: {
+    module: () => import('@iconify-icons/mingcute/volume-line'),
+    rtl: true,
+  },
   block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
   unblock: [
     () => import('@iconify-icons/mingcute/forbid-circle-line'),
@@ -81,30 +125,51 @@ export const ICONS = {
   filters: () => import('@iconify-icons/mingcute/filter-line'),
   chart: () => import('@iconify-icons/mingcute/chart-line-line'),
   react: () => import('@iconify-icons/mingcute/react-line'),
-  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
+  layout4: {
+    module: () => import('@iconify-icons/mingcute/layout-4-line'),
+    rtl: true,
+  },
   layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
-  announce: () => import('@iconify-icons/mingcute/announcement-line'),
+  announce: {
+    module: () => import('@iconify-icons/mingcute/announcement-line'),
+    rtl: true,
+  },
   alert: () => import('@iconify-icons/mingcute/alert-line'),
   round: () => import('@iconify-icons/mingcute/round-fill'),
   'arrow-up-circle': () =>
     import('@iconify-icons/mingcute/arrow-up-circle-line'),
   'arrow-down-circle': () =>
     import('@iconify-icons/mingcute/arrow-down-circle-line'),
-  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
+  clipboard: {
+    module: () => import('@iconify-icons/mingcute/clipboard-line'),
+    rtl: true,
+  },
   'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   cloud: () => import('@iconify-icons/mingcute/cloud-line'),
-  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
+  month: {
+    module: () => import('@iconify-icons/mingcute/calendar-month-line'),
+    rtl: true,
+  },
   media: () => import('@iconify-icons/mingcute/photo-album-line'),
   speak: () => import('@iconify-icons/mingcute/radar-line'),
   building: () => import('@iconify-icons/mingcute/building-5-line'),
-  history2: () => import('@iconify-icons/mingcute/history-2-line'),
+  history2: {
+    module: () => import('@iconify-icons/mingcute/history-2-line'),
+    rtl: true,
+  },
   document: () => import('@iconify-icons/mingcute/document-line'),
-  'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
+  'arrows-right': {
+    module: () => import('@iconify-icons/mingcute/arrows-right-line'),
+    rtl: true,
+  },
   code: () => import('@iconify-icons/mingcute/code-line'),
   copy: () => import('@iconify-icons/mingcute/copy-2-line'),
-  quote: () => import('@iconify-icons/mingcute/quote-left-line'),
+  quote: {
+    module: () => import('@iconify-icons/mingcute/quote-left-line'),
+    rtl: true,
+  },
   settings: () => import('@iconify-icons/mingcute/settings-6-line'),
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
   'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
diff --git a/src/components/account-block.css b/src/components/account-block.css
index 14309fb9..890e4968 100644
--- a/src/components/account-block.css
+++ b/src/components/account-block.css
@@ -29,6 +29,8 @@
     line-clamp: 1;
     text-overflow: ellipsis;
     overflow: hidden;
+    unicode-bidi: isolate;
+    direction: initial;
   }
 
   a {
diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
index 326f415c..47b4e711 100644
--- a/src/components/account-block.jsx
+++ b/src/components/account-block.jsx
@@ -120,7 +120,7 @@ function AccountBlock({
             )}
           </>
         )}{' '}
-        <span class="account-block-acct">
+        <span class="account-block-acct bidi-isolate">
           {acct2 ? '' : '@'}
           {acct1}
           <wbr />
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 688d9587..a1a26b59 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -57,7 +57,7 @@
     background-repeat: no-repeat;
     animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
     background-image: linear-gradient(
-      to right,
+      var(--to-forward),
       var(--original-color) 0%,
       var(--original-color) calc(var(--originals-percentage) - var(--gap)),
       var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
@@ -181,8 +181,8 @@
   opacity: 1;
 }
 .sheet .account-container .header-banner {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
 }
 .account-container .header-banner.header-is-avatar {
   mask-image: linear-gradient(
@@ -288,10 +288,17 @@
   align-self: center !important;
   /* clip a dog ear on top right */
   clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+  &:dir(rtl) {
+    /* top left */
+    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
+  }
   /* 4x4px square on top right */
   background-size: 4px 4px;
   background-repeat: no-repeat;
   background-position: top right;
+  &:dir(rtl) {
+    background-position: top left;
+  }
   background-image: linear-gradient(
     to bottom,
     var(--private-note-border-color),
@@ -311,7 +318,7 @@
     box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:hover:not(:active) {
@@ -370,7 +377,8 @@
     animation: appear 1s both ease-in-out;
 
     > *:not(:first-child) {
-      margin: 0 0 0 -4px;
+      margin: 0;
+      margin-inline-start: -4px;
     }
   }
 }
@@ -422,15 +430,15 @@
   }
 
   &:has(+ .account-metadata-box) {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-end-start-radius: 4px;
+    border-end-end-radius: 4px;
   }
 
   + .account-metadata-box {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-left-radius: 16px;
-    border-bottom-right-radius: 16px;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
   }
 }
 
@@ -805,7 +813,7 @@
     width: 100%;
 
     th {
-      text-align: left;
+      text-align: start;
       color: var(--text-insignificant-color);
       font-weight: normal;
       font-size: 0.8em;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 0e2fea35..bf4c2c23 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -568,7 +568,9 @@ function AccountInfo({
                   </div>
                   <MenuItem
                     onClick={() => {
-                      const handleWithInstance = acct.includes('@') ? `@${acct}` : `@${acct}@${instance}`;
+                      const handleWithInstance = acct.includes('@')
+                        ? `@${acct}`
+                        : `@${acct}@${instance}`;
                       try {
                         navigator.clipboard.writeText(handleWithInstance);
                         showToast('Handle copied');
@@ -1221,7 +1223,7 @@ function RelatedActions({
               <small>
                 Copy handle
                 <br />
-                <span class="more-insignificant">
+                <span class="more-insignificant bidi-isolate">
                   @{currentInfo?.acct || acctWithInstance}
                 </span>
               </small>
@@ -1895,6 +1897,7 @@ function PrivateNoteSheet({
             ref={textareaRef}
             name="note"
             disabled={uiState === 'loading'}
+            dir="auto"
           >
             {initialNote}
           </textarea>
@@ -2017,6 +2020,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   defaultValue={displayName}
                   maxLength={30}
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2029,6 +2033,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   maxLength={500}
                   rows="5"
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2092,6 +2097,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           required={hasValue}
+          dir="auto"
         />
       </td>
       <td>
@@ -2102,6 +2108,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           onChange={(e) => setHasValue(!!e.currentTarget.value)}
+          dir="auto"
         />
       </td>
     </tr>
diff --git a/src/components/compose.css b/src/components/compose.css
index bc7b1d1f..fc025370 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -16,7 +16,6 @@
 }
 
 #compose-container .compose-top {
-  text-align: right;
   display: flex;
   justify-content: space-between;
   gap: 8px;
@@ -62,7 +61,7 @@
   box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
 }
 #compose-container .status-preview:has(.status-badge:not(:empty)) {
-  border-top-right-radius: 8px;
+  border-start-end-radius: 8px;
 }
 #compose-container .status-preview :is(.content-container, .time) {
   pointer-events: none;
@@ -216,8 +215,8 @@
   line-height: 1em;
 }
 #compose-container .toolbar-button:not(.show-field) select {
-  right: 0;
-  left: auto !important;
+  inset-inline-end: 0;
+  inset-inline-start: auto !important;
 }
 #compose-container
   .toolbar-button:not(:disabled):is(
@@ -303,6 +302,9 @@
 }
 #compose-container .text-expander-menu li[aria-selected] {
   box-shadow: inset 4px 0 0 0 var(--button-bg-color);
+  :dir(rtl) & {
+    box-shadow: inset -4px 0 0 0 var(--button-bg-color);
+  }
 }
 #compose-container .text-expander-menu li[data-more] {
   &:not(:hover, :focus, [aria-selected]) {
@@ -494,14 +496,14 @@
   display: flex;
   gap: 4px;
   align-items: center;
-  border-left: 1px solid var(--outline-color);
-  padding-left: 8px;
+  border-inline-start: 1px solid var(--outline-color);
+  padding-inline-start: 8px;
 }
 
 #compose-container .expires-in {
   flex-grow: 1;
-  border-left: 1px solid var(--outline-color);
-  padding-left: 8px;
+  border-inline-start: 1px solid var(--outline-color);
+  padding-inline-start: 8px;
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
@@ -646,7 +648,7 @@
 
       &:hover {
         background-image: linear-gradient(
-          to right,
+          var(--to-forward),
           transparent 75%,
           var(--link-bg-color)
         );
@@ -654,7 +656,7 @@
 
       &.selected {
         background-image: linear-gradient(
-          to right,
+          var(--to-forward),
           var(--bg-faded-color) 75%,
           var(--link-bg-color)
         );
@@ -666,8 +668,8 @@
         border-top: var(--hairline-width) solid var(--divider-color);
         position: absolute;
         bottom: 0;
-        left: 58px;
-        right: 0;
+        inset-inline-start: 58px;
+        inset-inline-end: 0;
       }
 
       &:has(+ li:is(.selected, :hover)):before,
@@ -951,7 +953,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     mask-image: linear-gradient(
-      to right,
+      var(--to-forward),
       transparent 2px,
       black 16px,
       black calc(100% - 16px),
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 545765c8..ac01fe42 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -27,6 +27,7 @@ import urlRegex from '../data/url-regex';
 import { api } from '../utils/api';
 import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
+import isRTL from '../utils/is-rtl';
 import localeMatch from '../utils/locale-match';
 import localeCode2Text from '../utils/localeCode2Text';
 import openCompose from '../utils/open-compose';
@@ -103,7 +104,8 @@ const observer = new IntersectionObserver((entries) => {
       const { left, width } = entry.boundingClientRect;
       const { innerWidth } = window;
       if (left + width > innerWidth) {
-        menu.style.left = innerWidth - width - windowMargin + 'px';
+        const insetInlineStart = isRTL() ? 'right' : 'left';
+        menu.style[insetInlineStart] = innerWidth - width - windowMargin + 'px';
       }
     }
   });
@@ -1127,6 +1129,7 @@ function Compose({
                   setVisibility(e.target.value);
                 }}
                 disabled={uiState === 'loading' || !!editStatus}
+                dir="auto"
               >
                 <option value="public">
                   Public <Icon icon="earth" />
@@ -1383,6 +1386,7 @@ function Compose({
                   store.session.set('currentLanguage', value || DEFAULT_LANG);
                 }}
                 disabled={uiState === 'loading'}
+                dir="auto"
               >
                 {topSupportedLanguages.map(([code, common, native]) => (
                   <option value={code} key={code}>
@@ -1716,7 +1720,9 @@ const Textarea = forwardRef((props, ref) => {
                       </span>
                       <span>
                         <b>${displayNameWithEmoji || username}</b>
-                        <br>@${encodeHTML(acct)}
+                        <br><span class="bidi-isolate">@${encodeHTML(
+                          acct,
+                        )}</span>
                       </span>
                     </li>
                   `;
diff --git a/src/components/drafts.css b/src/components/drafts.css
index 2b093b8c..198dd46c 100644
--- a/src/components/drafts.css
+++ b/src/components/drafts.css
@@ -27,7 +27,7 @@ button.draft-item {
   background-color: var(--bg-color);
   color: var(--text-color);
   border: 1px solid var(--link-faded-color);
-  text-align: left;
+  text-align: start;
   padding: 0;
 }
 button.draft-item:is(:hover, :focus) {
diff --git a/src/components/generic-accounts.css b/src/components/generic-accounts.css
index 7ef1443b..d328ae40 100644
--- a/src/components/generic-accounts.css
+++ b/src/components/generic-accounts.css
@@ -62,13 +62,13 @@
         border-top: var(--hairline-width) solid var(--divider-color);
         position: absolute;
         bottom: calc(-1 * var(--list-gap) / 2);
-        left: 40px;
-        right: 0;
+        inset-inline-start: 40px;
+        inset-inline-end: 0;
       }
 
       &:has(.reactions-block):before {
         /* avatar + reactions + gap */
-        left: calc(40px + 16px + 8px);
+        inset-inline-start: calc(40px + 16px + 8px);
       }
     }
 
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 16fb7c22..b7633437 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -53,9 +53,14 @@ function Icon({
     return null;
   }
 
-  let rotate, flip;
+  let rotate,
+    flip,
+    rtl = false;
   if (Array.isArray(iconBlock)) {
     [iconBlock, rotate, flip] = iconBlock;
+  } else if (typeof iconBlock === 'object') {
+    ({ rotate, flip, rtl } = iconBlock);
+    iconBlock = iconBlock.module;
   }
 
   const [iconData, setIconData] = useState(ICONDATA[icon]);
@@ -72,13 +77,14 @@ function Icon({
 
   return (
     <span
-      class={`icon ${className}`}
+      class={`icon ${className} ${rtl ? 'rtl-flip' : ''}`}
       title={title || alt}
       style={{
         width: `${iconSize}px`,
         height: `${iconSize}px`,
         ...style,
       }}
+      data-icon={icon}
     >
       {iconData && (
         // <svg
diff --git a/src/components/links-bar.css b/src/components/links-bar.css
index d2b5b66a..bf109fae 100644
--- a/src/components/links-bar.css
+++ b/src/components/links-bar.css
@@ -6,7 +6,7 @@
   overflow-x: auto;
   background-color: var(--bg-faded-color);
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px,
     black calc(100% - 16px),
@@ -20,6 +20,9 @@
       width: 95vw;
       max-width: calc(320px * 3.3);
       transform: translateX(calc(-50% + var(--main-width) / 2));
+      &:dir(rtl) {
+        transform: translateX(calc(50% - var(--main-width) / 2));
+      }
     }
   }
 
@@ -38,12 +41,16 @@
       color: var(--text-insignificant-color);
       position: absolute;
       top: 8px;
-      left: 0;
+      inset-inline-start: 0;
       transform-origin: top left;
       transform: rotate(-90deg) translateX(-100%);
+      &:dir(rtl) {
+        transform-origin: top right;
+        transform: rotate(90deg) translateX(100%);
+      }
       user-select: none;
       background-image: linear-gradient(
-        to left,
+        var(--to-backward),
         var(--text-color),
         var(--link-color)
       );
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 9f804938..8a9084a0 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -10,6 +10,7 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
+import isRTL from '../utils/is-rtl';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 
@@ -54,7 +55,7 @@ function MediaModal({
     const differentStatusID = prevStatusID.current !== statusID;
     if (differentStatusID) prevStatusID.current = statusID;
     carouselRef.current.scrollTo({
-      left: scrollLeft,
+      left: scrollLeft * (isRTL() ? -1 : 1),
       behavior: differentStatusID ? 'auto' : 'smooth',
     });
     carouselRef.current.focus();
@@ -91,7 +92,7 @@ function MediaModal({
   useEffect(() => {
     let handleScroll = () => {
       const { clientWidth, scrollLeft } = carouselRef.current;
-      const index = Math.round(scrollLeft / clientWidth);
+      const index = Math.round(Math.abs(scrollLeft) / clientWidth);
       setCurrentIndex(index);
     };
     if (carouselRef.current) {
@@ -178,7 +179,7 @@ function MediaModal({
             ? {
                 backgroundAttachment: 'local',
                 backgroundImage: `linear-gradient(
-            to right, ${mediaAccentGradient})`,
+            to ${isRTL() ? 'left' : 'right'}, ${mediaAccentGradient})`,
               }
             : {}
         }
@@ -257,7 +258,8 @@ function MediaModal({
                   e.preventDefault();
                   e.stopPropagation();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * i,
+                    left:
+                      carouselRef.current.clientWidth * i * (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                   carouselRef.current.focus();
@@ -368,7 +370,10 @@ function MediaModal({
               e.stopPropagation();
               carouselRef.current.focus();
               carouselRef.current.scrollTo({
-                left: carouselRef.current.clientWidth * (currentIndex - 1),
+                left:
+                  carouselRef.current.clientWidth *
+                  (currentIndex - 1) *
+                  (isRTL() ? -1 : 1),
                 behavior: 'smooth',
               });
             }}
@@ -384,7 +389,10 @@ function MediaModal({
               e.stopPropagation();
               carouselRef.current.focus();
               carouselRef.current.scrollTo({
-                left: carouselRef.current.clientWidth * (currentIndex + 1),
+                left:
+                  carouselRef.current.clientWidth *
+                  (currentIndex + 1) *
+                  (isRTL() ? -1 : 1),
                 behavior: 'smooth',
               });
             }}
diff --git a/src/components/media-post.css b/src/components/media-post.css
index 2a52a11a..306e5a27 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -23,7 +23,7 @@
     pointer-events: none;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     background-color: var(--bg-blur-color);
     margin: 8px;
diff --git a/src/components/menu2.jsx b/src/components/menu2.jsx
index 3d83a72d..fe79318c 100644
--- a/src/components/menu2.jsx
+++ b/src/components/menu2.jsx
@@ -1,21 +1,33 @@
 import { Menu } from '@szhsin/react-menu';
 import { useRef } from 'preact/hooks';
 
+import isRTL from '../utils/is-rtl';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import useWindowSize from '../utils/useWindowSize';
 
 // It's like Menu but with sensible defaults, bug fixes and improvements.
 function Menu2(props) {
-  const { containerProps, instanceRef: _instanceRef } = props;
+  const { containerProps, instanceRef: _instanceRef, align } = props;
   const size = useWindowSize();
   const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
 
+  // Values: start, end, center
+  // Note: don't mess with 'center'
+  const rtlAlign = isRTL()
+    ? align === 'end'
+      ? 'start'
+      : align === 'start'
+      ? 'end'
+      : align
+    : align;
+
   return (
     <Menu
       boundingBoxPadding={safeBoundingBoxPadding()}
       repositionFlag={`${size.width}x${size.height}`}
       unmountOnClose
       {...props}
+      align={rtlAlign}
       instanceRef={instanceRef}
       containerProps={{
         onClick: (e) => {
diff --git a/src/components/modal.css b/src/components/modal.css
index 62d6c8b6..80b9ccad 100644
--- a/src/components/modal.css
+++ b/src/components/modal.css
@@ -1,7 +1,7 @@
 #modal-container > div {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   height: 100%;
   width: 100%;
   z-index: 1000;
@@ -26,21 +26,30 @@
     user-select: none;
     overflow: hidden;
     transform: scale(0);
-    --right: max(
+    --end: max(
       var(--compose-button-dimension-margin),
       env(safe-area-inset-right)
     );
+    :dir(rtl) & {
+      --end: max(
+        var(--compose-button-dimension-margin),
+        env(safe-area-inset-left)
+      );
+    }
     --bottom: max(
       var(--compose-button-dimension-margin),
       env(safe-area-inset-bottom)
     );
-    --origin-right: calc(
-      100% - var(--compose-button-dimension-half) - var(--right)
+    --origin-end: calc(
+      100% - var(--compose-button-dimension-half) - var(--end)
     );
+    :dir(rtl) & {
+      --origin-end: calc(var(--compose-button-dimension-half) + var(--end));
+    }
     --origin-bottom: calc(
       100% - var(--compose-button-dimension-half) - var(--bottom)
     );
-    transform-origin: var(--origin-right) var(--origin-bottom);
+    transform-origin: var(--origin-end) var(--origin-bottom);
   }
 
   .sheet {
diff --git a/src/components/name-text.jsx b/src/components/name-text.jsx
index ad329e93..8906ee79 100644
--- a/src/components/name-text.jsx
+++ b/src/components/name-text.jsx
@@ -88,13 +88,13 @@ function NameText({
       )}
       {displayName && !short ? (
         <>
-          <b>
+          <b dir="auto">
             <EmojiText text={displayName} emojis={emojis} />
           </b>
           {!showAcct && !hideUsername && (
             <>
               {' '}
-              <i>@{username}</i>
+              <i class="bidi-isolate">@{username}</i>
             </>
           )}
         </>
@@ -106,7 +106,7 @@ function NameText({
       {showAcct && (
         <>
           <br />
-          <i>
+          <i class="bidi-isolate">
             {acct2 ? '' : '@'}
             {acct1}
             {!!acct2 && <span class="ib">{acct2}</span>}
diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
index 24bc1349..70efdd46 100644
--- a/src/components/nav-menu.css
+++ b/src/components/nav-menu.css
@@ -35,11 +35,15 @@
   }
   .nav-menu section:last-child {
     background-image: linear-gradient(
-        to right,
+        var(--to-forward),
         var(--divider-color) 1px,
         transparent 1px
       ),
-      linear-gradient(to bottom left, var(--bg-blur-color), transparent),
+      linear-gradient(
+        to bottom var(--backward),
+        var(--bg-blur-color),
+        transparent
+      ),
       url(../assets/phanpy-bg.svg);
     background-repeat: no-repeat;
     /* background-size: auto, auto, 200%; */
@@ -49,8 +53,8 @@
     position: sticky;
     top: 0;
     animation: phanpying 0.2s ease-in-out both;
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
     margin-bottom: 0;
     display: flex;
     flex-direction: column;
diff --git a/src/components/poll.jsx b/src/components/poll.jsx
index 1095a5dc..b8a893d2 100644
--- a/src/components/poll.jsx
+++ b/src/components/poll.jsx
@@ -187,9 +187,6 @@ export default function Poll({
             type="button"
             class="plain small"
             disabled={uiState === 'loading'}
-            style={{
-              marginLeft: -8,
-            }}
             onClick={(e) => {
               e.preventDefault();
               setUIState('loading');
diff --git a/src/components/report-modal.css b/src/components/report-modal.css
index 831c5d22..b99db159 100644
--- a/src/components/report-modal.css
+++ b/src/components/report-modal.css
@@ -92,7 +92,7 @@
     pointer-events: none;
     user-select: none;
     position: absolute;
-    right: 32px;
+    inset-inline-end: 32px;
     margin-top: -48px;
     animation: rubber-stamp 0.3s ease-in both;
     position: absolute;
@@ -148,7 +148,7 @@
     }
 
     .report-rules {
-      margin-left: 1.75em;
+      margin-inline-start: 1.75em;
     }
   }
 
diff --git a/src/components/search-form.jsx b/src/components/search-form.jsx
index 2df8d0ae..94f9ae08 100644
--- a/src/components/search-form.jsx
+++ b/src/components/search-form.jsx
@@ -273,6 +273,7 @@ const SearchForm = forwardRef((props, ref) => {
                 class={`search-popover-item ${i === 0 ? 'focus' : ''}`}
                 // hidden={hidden}
                 onClick={(e) => {
+                  console.log('onClick', e);
                   props?.onSubmit?.(e);
                 }}
               >
diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 86cc6f70..1ef5bac9 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -18,8 +18,8 @@
   counter-increment: index;
   display: inline-block;
   width: 1.2em;
-  text-align: right;
-  margin-right: 8px;
+  text-align: end;
+  margin-inline-end: 8px;
   color: var(--text-insignificant-color);
   font-size: 90%;
   flex-shrink: 0;
@@ -55,12 +55,12 @@
   justify-content: center;
 }
 #shortcuts-settings-container .shortcuts-view-mode label:first-child {
-  border-top-left-radius: 16px;
-  border-bottom-left-radius: 16px;
+  border-start-start-radius: 16px;
+  border-end-start-radius: 16px;
 }
 #shortcuts-settings-container .shortcuts-view-mode label:last-child {
-  border-top-right-radius: 16px;
-  border-bottom-right-radius: 16px;
+  border-start-end-radius: 16px;
+  border-end-end-radius: 16px;
 }
 #shortcuts-settings-container .shortcuts-view-mode label img {
   max-height: 64px;
@@ -114,7 +114,7 @@
 }
 #shortcut-settings-form label > span:first-child {
   flex-basis: 5em;
-  text-align: right;
+  text-align: end;
 }
 #shortcut-settings-form :is(input[type='text'], select) {
   flex-grow: 1;
@@ -185,8 +185,8 @@
   counter-increment: index;
   display: inline-block;
   width: 1.2em;
-  text-align: right;
-  margin-right: 8px;
+  text-align: end;
+  margin-inline-end: 8px;
   color: var(--text-insignificant-color);
   font-size: 90%;
   flex-shrink: 0;
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index de31c334..2f294b35 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -612,6 +612,7 @@ function ShortcutForm({
                 }}
                 defaultValue={editMode ? shortcut.type : undefined}
                 name="type"
+                dir="auto"
               >
                 <option></option>
                 {TYPES.map((type) => (
@@ -632,6 +633,7 @@ function ShortcutForm({
                         required={!notRequired}
                         disabled={disabled || uiState === 'loading'}
                         defaultValue={editMode ? shortcut.id : undefined}
+                        dir="auto"
                       >
                         <option value=""></option>
                         {lists.map((list) => (
@@ -663,6 +665,7 @@ function ShortcutForm({
                       autocapitalize="off"
                       spellCheck={false}
                       pattern={pattern}
+                      dir="auto"
                     />
                     {currentType === 'hashtag' &&
                       followedHashtags.length > 0 && (
@@ -780,6 +783,7 @@ function ImportExport({ shortcuts, onClose }) {
               onInput={(e) => {
                 setImportShortcutStr(e.target.value);
               }}
+              dir="auto"
             />
             {states.settings.shortcutSettingsCloudImportExport && (
               <button
@@ -996,6 +1000,7 @@ function ImportExport({ shortcuts, onClose }) {
                   showToast('Unable to copy shortcuts');
                 }
               }}
+              dir="auto"
             />
           </p>
           <p>
diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index 69e680be..99ddf153 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -2,8 +2,8 @@
   position: fixed;
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
-  left: 16px;
-  left: max(16px, env(safe-area-inset-left));
+  inset-inline-start: 16px;
+  inset-inline-start: max(16px, env(safe-area-inset-left));
   padding: 16px;
   background-color: var(--bg-faded-blur-color);
   z-index: 101;
@@ -34,9 +34,9 @@
 
 @media (min-width: calc(40em + 56px + 8px)) {
   #shortcuts-button {
-    right: 16px;
-    right: max(16px, env(safe-area-inset-right));
-    left: auto;
+    inset-inline-end: 16px;
+    inset-inline-end: max(16px, env(safe-area-inset-right));
+    inset-inline-start: auto;
     top: 16px;
     top: max(16px, env(safe-area-inset-top));
     bottom: auto;
diff --git a/src/components/status.css b/src/components/status.css
index 3698c5d6..4b13762b 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1,22 +1,31 @@
 /* REBLOG + REPLY-TO */
 
+:root {
+  --post-gradient-angle: 160deg;
+  --post-gradient-chip-angle: -20deg;
+  &:dir(rtl) {
+    --post-gradient-angle: -160deg;
+    --post-gradient-chip-angle: 20deg;
+  }
+}
+
 .status-reblog {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--reblog-faded-color),
     transparent min(160px, 50%)
   );
 }
 .status-group {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--group-faded-color),
     transparent min(160px, 50%)
   );
 }
 .status-followed-tags {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--hashtag-faded-color),
     transparent min(160px, 50%)
   );
@@ -33,14 +42,14 @@
 }
 .status-reply-to {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--reply-to-faded-color),
     transparent min(160px, 50%)
   );
 }
 :is(.status-reblog, .status-group, .status-followed-tags) .status-reply-to {
   background: linear-gradient(
-    -20deg,
+    var(--post-gradient-chip-angle),
     var(--reply-to-faded-color),
     transparent min(160px, 50%)
   );
@@ -72,12 +81,12 @@
 }
 .status-reblog .status-pre-meta .icon {
   color: var(--reblog-color);
-  margin-right: 4px;
+  margin-inline-end: 4px;
   vertical-align: text-bottom;
 }
 .status-group .status-pre-meta .icon {
   color: var(--group-color);
-  margin-right: 4px;
+  margin-inline-end: 4px;
   vertical-align: text-bottom;
 }
 .status-followed-tags {
@@ -91,7 +100,7 @@
 
     .icon {
       color: var(--hashtag-color);
-      margin-right: 4px;
+      margin-inline-end: 4px;
       vertical-align: text-bottom;
     }
     a {
@@ -208,7 +217,7 @@
   /* filter: drop-shadow(0 2px 4px var(--bg-faded-color)); */
 }
 .status-card:has(.status-badge:not(:empty)) {
-  border-top-right-radius: 8px;
+  border-start-end-radius: 8px;
 }
 .status-card > * {
   pointer-events: none;
@@ -276,7 +285,8 @@
   align-items: center;
 
   .status-carousel & {
-    padding: 16px 16px 16px 24px;
+    padding: 16px;
+    padding-inline-start: 24px;
   }
 }
 .status.filtered .status-filtered-info {
@@ -286,7 +296,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  mask-image: linear-gradient(to right, black 90%, transparent);
+  mask-image: linear-gradient(var(--to-forward), black 90%, transparent);
   position: relative;
 }
 .status.filtered .avatar {
@@ -312,7 +322,7 @@
   opacity: 0;
   transform: translateX(8px);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
 }
 .status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
   opacity: 0.75;
@@ -353,7 +363,7 @@
   padding-bottom: 0;
   margin-bottom: calc(-1 * var(--top-padding) / 2);
   background-image: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     transparent 2.5%,
     var(--reply-to-faded-color) 10%,
     transparent
@@ -381,7 +391,7 @@
     content: '';
     position: absolute;
     top: calc(var(--top-padding) + var(--avatar-size));
-    left: var(--line-start);
+    inset-inline-start: var(--line-start);
     width: var(--line-width);
     height: calc(
       100% - var(--top-padding) - var(--avatar-size) + (var(--top-padding) / 2)
@@ -392,7 +402,7 @@
   }
 
   .avatar {
-    margin-left: calc((50px - var(--avatar-size)) / 2);
+    margin-inline-start: calc((50px - var(--avatar-size)) / 2);
     justify-self: center;
     z-index: 1;
   }
@@ -433,7 +443,7 @@
   min-width: 0;
 }
 .status:not(.small) > .container {
-  padding-left: 12px;
+  padding-inline-start: 12px;
 }
 
 .status > .container > .meta {
@@ -451,7 +461,7 @@
   /* text-overflow: ellipsis; */
 }
 .status > .container > .meta .meta-name {
-  mask-image: linear-gradient(to left, transparent, black 16px);
+  mask-image: linear-gradient(var(--to-backward), transparent, black 16px);
   flex-grow: 1;
 
   .name-text b {
@@ -470,7 +480,7 @@
   text-align: end;
   text-decoration: none;
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   white-space: nowrap;
 }
 .status > .container > .meta a.time {
@@ -482,7 +492,7 @@
   font-size: 90%;
 
   .more {
-    margin-left: 4px;
+    margin-inline-start: 4px;
     transition: transform 0.2s ease-out;
   }
 }
@@ -509,7 +519,8 @@
 
 .status-reply-badge {
   display: inline-flex;
-  margin: 2px 0 2px 4px;
+  margin: 2px 0;
+  margin-inline-start: 4px;
   gap: 4px;
   align-items: center;
   vertical-align: middle;
@@ -609,7 +620,7 @@
   position: absolute;
   width: 100%;
   top: calc(100% + 2px);
-  left: 0;
+  inset-inline-start: 0;
   text-align: center;
 }
 .status-filtered-badge.horizontal.badge-meta > span + span {
@@ -618,7 +629,7 @@
 }
 
 .status.large > .container > .content-container {
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -1005,13 +1016,13 @@
     .media-gt2
   ) {
   /* 50px = avatar size */
-  margin-left: calc(-1 * ((50px / 2)));
+  margin-inline-start: calc(-1 * ((50px / 2)));
   /*
     outer padding = 16px
     gap = 12px
     so... 16 - 12 = 4
   */
-  margin-right: -4px;
+  margin-inline-end: -4px;
 }
 .status.large :is(.media-container, .media-container.media-gt2) {
   height: auto;
@@ -1121,40 +1132,46 @@
 }
 /* Special media borders */
 .status .media-container.media-eq2 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq2 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:nth-of-type(2) {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:nth-of-type(2) {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:nth-of-type(3) {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media:only-child {
   grid-area: span 2 / span 2;
@@ -1207,7 +1224,7 @@
     .alt-badge {
       position: absolute;
       bottom: 8px;
-      left: 8px;
+      inset-inline-start: 8px;
 
       &:before {
         content: '';
@@ -1266,7 +1283,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   content: attr(data-formatted-duration);
   position: absolute;
   bottom: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   color: var(--media-fg-color);
   background-color: var(--media-bg-color);
   border: var(--hairline-width) solid var(--media-outline-color);
@@ -1283,7 +1300,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   content: attr(data-label);
   position: absolute;
   bottom: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   color: var(--media-fg-color);
   background-color: var(--media-bg-color);
   border: var(--hairline-width) solid var(--media-outline-color);
@@ -1456,7 +1473,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
       z-index: 1;
       position: absolute;
       top: 8px;
-      right: 8px;
+      inset-inline-end: 8px;
       color: var(--media-fg-color);
       background-color: var(--media-bg-color);
       padding: 2px 8px;
@@ -1484,8 +1501,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
       }
 
       + .carousel-button {
-        left: auto;
-        right: 8px;
+        inset-inline-start: auto;
+        inset-inline-end: 8px;
       }
     }
 
@@ -1655,7 +1672,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
     display: none;
 
     + * {
-      margin-left: 1ex;
+      margin-inline-start: 1ex;
     }
   }
 }
@@ -1746,9 +1763,9 @@ body:has(#modal-container .carousel) .status .media img:hover {
   --bottom: 16px;
   bottom: var(--bottom);
   bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
-  left: 16px;
-  left: calc(16px + env(safe-area-inset-left));
-  text-align: left;
+  inset-inline-start: 16px;
+  inset-inline-start: calc(16px + env(safe-area-inset-left));
+  text-align: start;
   border-radius: 8px;
   color: var(--text-color);
   padding: 4px 8px;
@@ -2023,8 +2040,8 @@ a.card:is(:hover, :focus):visited {
   z-index: 0;
 }
 .poll-option:first-child:after {
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  border-start-start-radius: 12px;
+  border-start-end-radius: 12px;
 }
 .poll-option:hover:after {
   opacity: 1;
@@ -2057,7 +2074,9 @@ a.card:is(:hover, :focus):visited {
   opacity: 1;
 }
 .poll-vote-button {
-  margin: 8px 8px 0 12px;
+  margin: 8px 0 0;
+  margin-inline-start: 12px;
+  margin-inline-end: 8px;
   /* padding-inline: 24px; */
   min-width: 160px;
 }
@@ -2066,6 +2085,10 @@ a.card:is(:hover, :focus):visited {
   margin: 8px 16px;
   font-size: 90%;
   user-select: none;
+
+  > button:first-child {
+    margin-inline-start: -8px;
+  }
 }
 .poll-option-title {
   text-shadow: 0 1px var(--bg-color);
@@ -2101,14 +2124,14 @@ a.card:is(:hover, :focus):visited {
 }
 .status.large .extra-meta {
   padding-top: 0;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
 }
 
 /* EMOJI REACTIONS */
 
 .status.large .emoji-reactions {
   cursor: default;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
 }
 
 /* ACTIONS */
@@ -2120,7 +2143,7 @@ a.card:is(:hover, :focus):visited {
 .status.large .actions {
   padding-top: 4px;
   padding-bottom: 16px;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
   color: var(--text-insignificant-color);
   border-top: var(--hairline-width) solid var(--outline-color);
   margin-top: 8px;
@@ -2279,7 +2302,7 @@ a.card:is(:hover, :focus):visited {
   width: 100%;
   border: 1px solid var(--outline-color);
   background: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--bg-faded-color),
     transparent 160px
   );
@@ -2297,7 +2320,7 @@ a.card:is(:hover, :focus):visited {
   display: flex;
   position: absolute;
   top: -6px;
-  right: 8px;
+  inset-inline-end: 8px;
   background-color: var(--bg-color);
   border-radius: 8px;
   z-index: 1;
@@ -2307,7 +2330,7 @@ a.card:is(:hover, :focus):visited {
   opacity: 0;
   pointer-events: none;
   transform: translate3d(0, 6px, 0);
-  transform-origin: right center;
+  transform-origin: var(--forward) center;
   transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
 
   .timeline.contextual .replies[data-comments-level='4'] & {
@@ -2386,8 +2409,13 @@ a.card:is(:hover, :focus):visited {
   }
 }
 .timeline.contextual .descendant .status {
+  --bg-gradient-rotation: -140deg;
+  :dir(rtl) & {
+    --bg-gradient-rotation: 140deg;
+  }
+
   --bg-gradient: linear-gradient(
-    -140deg,
+    var(--bg-gradient-rotation),
     var(--bg-faded-color),
     transparent 75%
   );
@@ -2414,7 +2442,7 @@ a.card:is(:hover, :focus):visited {
 .status-badge {
   position: absolute;
   top: 4px;
-  right: 4px;
+  inset-inline-end: 4px;
   line-height: 0;
   pointer-events: none;
   opacity: 0.75;
@@ -2441,8 +2469,21 @@ a.card:is(:hover, :focus):visited {
     transform: translateX(0);
   }
 }
+@keyframes swoosh-from-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-300%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 .status-badge > * {
   animation: swoosh-from-right 1s cubic-bezier(0.51, 0.28, 0.16, 1.26) both;
+  :dir(rtl) & {
+    animation-name: swoosh-from-left;
+  }
 }
 .status-badge > *:nth-child(2) {
   animation-delay: 0.1s;
@@ -2457,7 +2498,8 @@ a.card:is(:hover, :focus):visited {
 /* MISC */
 
 .status-aside {
-  padding: 0 16px 16px 80px;
+  padding: 0 16px 16px;
+  padding-inline-start: 80px;
   color: var(--text-insignificant-color);
 }
 
@@ -2740,7 +2782,7 @@ a.card:is(:hover, :focus):visited {
     vertical-align: super;
     font-weight: normal;
     line-height: 0;
-    padding-left: 2px;
+    padding-inline-start: 2px;
   }
 
   &.clickable {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index ab5928ff..c42e374c 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -46,6 +46,7 @@ import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import getHTMLText from '../utils/getHTMLText';
 import handleContentLinks from '../utils/handle-content-links';
 import htmlContentLength from '../utils/html-content-length';
+import isRTL from '../utils/is-rtl';
 import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
 import localeMatch from '../utils/locale-match';
 import mem from '../utils/mem';
@@ -2363,7 +2364,7 @@ function MediaFirstContainer(props) {
   useEffect(() => {
     let handleScroll = () => {
       const { clientWidth, scrollLeft } = carouselRef.current;
-      const index = Math.round(scrollLeft / clientWidth);
+      const index = Math.round(Math.abs(scrollLeft) / clientWidth);
       setCurrentIndex(index);
     };
     if (carouselRef.current) {
@@ -2407,7 +2408,10 @@ function MediaFirstContainer(props) {
                   e.stopPropagation();
                   carouselRef.current.focus();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * (currentIndex - 1),
+                    left:
+                      carouselRef.current.clientWidth *
+                      (currentIndex - 1) *
+                      (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                 }}
@@ -2425,7 +2429,10 @@ function MediaFirstContainer(props) {
                   e.stopPropagation();
                   carouselRef.current.focus();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * (currentIndex + 1),
+                    left:
+                      carouselRef.current.clientWidth *
+                      (currentIndex + 1) *
+                      (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                 }}
@@ -2580,8 +2587,6 @@ function Card({ card, selfReferential, instance }) {
         class={`card link ${isPost ? 'card-post' : ''} ${
           blurhashImage ? '' : size
         }`}
-        lang={language}
-        dir="auto"
         style={{
           '--average-color':
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -2608,7 +2613,7 @@ function Card({ card, selfReferential, instance }) {
             }}
           />
         </div>
-        <div class="meta-container">
+        <div class="meta-container" lang={language}>
           <p class="meta domain">
             <span class="domain">{domain}</span>{' '}
             {!!publishedAt && <>&middot; </>}
@@ -2685,6 +2690,7 @@ function Card({ card, selfReferential, instance }) {
           rel="nofollow noopener noreferrer"
           class={`card link ${isPost ? 'card-post' : ''} no-image`}
           lang={language}
+          dir="auto"
           onClick={handleClick}
         >
           <div class="meta-container">
@@ -2987,6 +2993,7 @@ function EmbedModal({ post, instance, onClose }) {
           onClick={(e) => {
             e.target.select();
           }}
+          dir="auto"
         >
           {htmlCode}
         </textarea>
@@ -3133,6 +3140,7 @@ function EmbedModal({ post, instance, onClose }) {
         <output
           class="embed-preview"
           dangerouslySetInnerHTML={{ __html: htmlCode }}
+          dir="auto"
         />
         <p>
           <small>Note: This preview is lightly styled.</small>
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 9113f650..7a330a54 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -13,6 +13,7 @@ import { useSnapshot } from 'valtio';
 
 import FilterContext from '../utils/filter-context';
 import { filteredItems, isFiltered } from '../utils/filters';
+import isRTL from '../utils/is-rtl';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import { isMediaFirstInstance } from '../utils/store-utils';
@@ -864,8 +865,11 @@ function StatusCarousel({ title, class: className, children }) {
             class="small plain2"
             // disabled={reachStart}
             onClick={() => {
+              const left =
+                Math.min(320, carouselRef.current?.offsetWidth) *
+                (isRTL() ? 1 : -1);
               carouselRef.current?.scrollBy({
-                left: -Math.min(320, carouselRef.current?.offsetWidth),
+                left,
                 behavior: 'smooth',
               });
             }}
@@ -878,8 +882,11 @@ function StatusCarousel({ title, class: className, children }) {
             class="small plain2"
             // disabled={reachEnd}
             onClick={() => {
+              const left =
+                Math.min(320, carouselRef.current?.offsetWidth) *
+                (isRTL() ? -1 : 1);
               carouselRef.current?.scrollBy({
-                left: Math.min(320, carouselRef.current?.offsetWidth),
+                left,
                 behavior: 'smooth',
               });
             }}
diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index a1c83b9c..cbed2b8b 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -35,7 +35,7 @@
   border-bottom: 0;
   margin-bottom: -1px;
   background-image: linear-gradient(
-    to top left,
+    to top var(--backward),
     var(--bg-color) 50%,
     var(--bg-faded-blur-color)
   );
@@ -44,12 +44,13 @@
 .status-translation-block .translated-block {
   border: 1px solid var(--outline-color);
   line-height: 1.3;
-  border-radius: 0 8px 8px 8px;
+  border-radius: 8px;
+  border-start-start-radius: 0;
   margin: 0;
   padding: 8px;
   background-color: var(--bg-color);
   background-image: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--bg-color),
     var(--bg-faded-blur-color)
   );
diff --git a/src/index.css b/src/index.css
index b40c06df..a9bcf28d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -110,6 +110,17 @@
   --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
   --min-dimension: 88px;
+
+  --forward: right;
+  --backward: left;
+  --to-forward: to right;
+  --to-backward: to left;
+  &:dir(rtl) {
+    --forward: left;
+    --backward: right;
+    --to-forward: to left;
+    --to-backward: to right;
+  }
 }
 
 @media (min-resolution: 2dppx) {
@@ -442,6 +453,11 @@ kbd {
   display: initial;
 }
 
+.bidi-isolate {
+  direction: initial;
+  unicode-bidi: isolate;
+}
+
 /* KEYFRAMES */
 
 @keyframes appear {
diff --git a/src/pages/accounts.css b/src/pages/accounts.css
index 0848f1be..d29e3ac2 100644
--- a/src/pages/accounts.css
+++ b/src/pages/accounts.css
@@ -28,7 +28,7 @@
 }
 
 #accounts-container section > ul > li .current {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   color: var(--green-color);
   opacity: 0.1;
 }
@@ -47,7 +47,7 @@
 }
 
 #accounts-container .avatar {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 #accounts-container .accounts-list li div {
diff --git a/src/pages/catchup.css b/src/pages/catchup.css
index fd79a8fb..3ca0b07d 100644
--- a/src/pages/catchup.css
+++ b/src/pages/catchup.css
@@ -111,7 +111,7 @@
       margin-bottom: 8px;
       align-items: center;
       gap: 8px;
-      text-align: left;
+      text-align: start;
       justify-content: space-between;
 
       a {
@@ -146,6 +146,9 @@
   input[type='range'] {
     accent-color: var(--link-color);
     direction: rtl;
+    &:dir(rtl) {
+      direction: ltr;
+    }
   }
 }
 
@@ -251,7 +254,7 @@
   overflow-y: hidden;
   max-width: 100%;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px calc(100% - 16px),
     transparent
@@ -315,7 +318,7 @@
 
       .count {
         font-size: 70%;
-        margin-left: 4px;
+        margin-inline-start: 4px;
         background-color: var(--bg-color);
         padding: 4px 6px;
         border-radius: 12px;
@@ -386,7 +389,7 @@
 
       .count {
         position: absolute;
-        right: -4px;
+        inset-inline-end: -4px;
         top: -4px;
         font-size: 10px;
         background-color: var(--bg-color);
@@ -406,7 +409,7 @@
         overflow: hidden;
         text-align: center;
         mask-image: linear-gradient(
-          to right,
+          var(--to-forward),
           black calc(100% - 0.5em),
           transparent 100%
         );
@@ -478,13 +481,13 @@
 
     > li {
       &:first-child > a {
-        border-top-left-radius: var(--corner-radius);
-        border-top-right-radius: var(--corner-radius);
+        border-start-start-radius: var(--corner-radius);
+        border-start-end-radius: var(--corner-radius);
       }
 
       &:last-child > a {
-        border-bottom-left-radius: var(--corner-radius);
-        border-bottom-right-radius: var(--corner-radius);
+        border-end-start-radius: var(--corner-radius);
+        border-end-end-radius: var(--corner-radius);
       }
     }
   }
@@ -502,13 +505,13 @@
 
     @media (min-width: 40em) {
       &.separator + li a {
-        border-top-left-radius: var(--corner-radius);
-        border-top-right-radius: var(--corner-radius);
+        border-start-start-radius: var(--corner-radius);
+        border-start-end-radius: var(--corner-radius);
       }
 
       &:has(+ .separator) a {
-        border-bottom-left-radius: var(--corner-radius);
-        border-bottom-right-radius: var(--corner-radius);
+        border-end-start-radius: var(--corner-radius);
+        border-end-end-radius: var(--corner-radius);
       }
     }
 
@@ -572,8 +575,12 @@
       'author meta'
       'content content';
     /* align-items: center; */
+    --bg-gradient-angle: 140deg;
+    &:dir(rtl) {
+      --bg-gradient-angle: -140deg;
+    }
     background-image: linear-gradient(
-      140deg,
+      var(--bg-gradient-angle),
       var(--post-bg-color),
       transparent min(160px, 50%)
     );
@@ -636,7 +643,7 @@
       }
 
       > .avatar ~ .avatar {
-        margin-left: -8px;
+        margin-inline-start: -8px;
       }
 
       > .icon {
@@ -655,7 +662,7 @@
       white-space: nowrap;
       overflow: hidden;
       mask-image: linear-gradient(
-        to right,
+        var(--to-forward),
         black calc(100% - 1em),
         transparent 100%
       );
@@ -887,12 +894,15 @@
         &:has(.post-peek-media),
         .post-peek-media:first-child img {
           transform-origin: left center;
+          :dir(rtl) & {
+            transform-origin: right center;
+          }
         }
       }
 
       @media (max-width: 480px) {
         .post-peek-media:not(:last-child) {
-          margin-right: -24px;
+          margin-inline-end: -24px;
           box-shadow: 0 0 0 2px var(--bg-blur-color);
         }
         /* Max 10, I'm not going to code more than this */
diff --git a/src/pages/filters.jsx b/src/pages/filters.jsx
index 0d83d27e..4abc9e4b 100644
--- a/src/pages/filters.jsx
+++ b/src/pages/filters.jsx
@@ -365,6 +365,7 @@ function FiltersAddEdit({ filter, onClose }) {
                         defaultValue={keyword}
                         disabled={uiState === 'loading'}
                         required
+                        dir="auto"
                       />
                       <div class="filter-keyword-actions">
                         <label>
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index f7b26cb0..5301db82 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -166,7 +166,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       titleComponent={
         !!instance && (
           <h1 class="header-double-lines">
-            <b>{hashtagTitle}</b>
+            <b dir="auto">{hashtagTitle}</b>
             <div>{instance}</div>
           </h1>
         )
@@ -379,6 +379,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                   // no spaces, no hashtags
                   pattern="[^#][^\s#]+[^#]"
                   disabled={reachLimit}
+                  dir="auto"
                 />
               </form>
             )}
@@ -402,7 +403,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                 }}
               >
                 <Icon icon="x" alt="Remove hashtag" class="danger-icon" />
-                <span>
+                <span class="bidi-isolate">
                   <span class="more-insignificant">#</span>
                   {t}
                 </span>
diff --git a/src/pages/login.css b/src/pages/login.css
index d142f67a..7c9273d8 100644
--- a/src/pages/login.css
+++ b/src/pages/login.css
@@ -30,14 +30,15 @@
 
 #instances-suggestions {
   margin: 0.2em 0 0;
-  padding: 0 0 0 1.2em;
+  padding: 0;
+  padding-inline-start: 1.2em;
   list-style: none;
   width: 90vw;
   max-width: 40em;
   overflow: auto;
   white-space: nowrap;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 1.2em,
     black calc(100% - 5em),
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 5a98ad38..66bcbafc 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -158,6 +158,7 @@ function Login() {
             onInput={(e) => {
               setInstanceText(e.target.value);
             }}
+            dir="auto"
           />
           {instancesSuggestions?.length > 0 ? (
             <ul id="instances-suggestions">
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 47273aca..e20752cd 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -185,7 +185,7 @@
 .notification-group-statuses > li:before {
   content: counter(index);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   font-size: 10px;
   padding: 8px;
   font-weight: bold;
@@ -194,16 +194,19 @@
   margin-top: -1px;
 }
 .notification-group-statuses > li:not(:last-child) .status-link {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 .notification-group-statuses > li:not(:first-child) .status-link {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }
 
 #mentions-option {
   float: right;
+  &:dir(rtl) {
+    float: left;
+  }
   margin-top: 0.5em;
 }
 #mentions-option label {
@@ -388,7 +391,7 @@
   width: calc(100% - 16px);
 }
 .announcements > ul > li:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 .announcements .announcement-block {
   padding: 16px;
diff --git a/src/pages/search.css b/src/pages/search.css
index 8127cffb..1c939c8e 100644
--- a/src/pages/search.css
+++ b/src/pages/search.css
@@ -48,10 +48,10 @@
   a {
     .icon {
       vertical-align: middle;
-      transition: transform 0.2s;
+      transition: margin 0.2s;
     }
     &:hover .icon {
-      transform: translateX(4px);
+      margin-inline-start: 4px;
     }
   }
 }
@@ -101,9 +101,8 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover {
   position: absolute;
-  left: 8px;
+  inset-inline-start: 8px;
   max-width: calc(100% - 16px);
-  /* right: 8px; */
   background-color: var(--bg-color);
   border: 1px solid var(--outline-color);
   box-shadow: 0 4px 24px var(--drop-shadow-color);
@@ -118,7 +117,8 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover-item {
   text-decoration: none;
-  padding: 8px 16px 8px 8px;
+  padding: 8px;
+  padding-inline-end: 16px;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -132,10 +132,15 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover-item:is(:focus, .focus) {
   box-shadow: inset 4px 0 0 0 var(--button-bg-color);
+  :dir(rtl) & {
+    box-shadow: inset -4px 0 0 0 var(--button-bg-color);
+  }
 }
 .search-popover-item :is(mark, q) {
   color: var(--text-color);
   background-color: var(--link-bg-color);
+  unicode-bidi: isolate;
+  direction: initial;
 }
 .search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
   background-color: var(--link-bg-color);
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 1c1481d5..b7c93285 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -36,12 +36,12 @@
   border-bottom: var(--hairline-width) solid var(--outline-color);
 }
 #settings-container section > ul > li > div:last-child {
-  text-align: right;
+  text-align: end;
 }
 #settings-container section > ul > li .sub-section {
-  text-align: left !important;
+  text-align: start !important;
   margin-top: 8px;
-  margin-left: 24px;
+  margin-inline-start: 24px;
 }
 #settings-container section > ul > li .sub-section p {
   margin-block: 0.5em;
@@ -121,11 +121,11 @@
     grid-template-rows: 1fr 1fr;
 
     > span:first-child {
-      text-align: left;
+      text-align: start;
     }
 
     > span:last-child {
-      text-align: right;
+      text-align: end;
     }
   }
 }
diff --git a/src/pages/status.css b/src/pages/status.css
index 35b26764..8380ca96 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -11,7 +11,7 @@
     align-self: stretch;
   }
   header h1 .deck-back {
-    margin-left: -16px;
+    margin-inline-start: -16px;
   }
 
   .button-refresh .icon {
@@ -39,7 +39,7 @@
   font-size: 70% !important;
 
   & > .avatar ~ .avatar {
-    margin-left: -4px;
+    margin-inline-start: -4px;
   }
 }
 .ancestors-indicator:not([hidden]) {
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index df236100..c4873905 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1370,6 +1370,8 @@ function SubComments({
   const detailsRef = useRef();
   useLayoutEffect(() => {
     function handleScroll(e) {
+      // NOTE: this scrollLeft works for RTL too
+      // Browsers do the magic for us
       e.target.dataset.scrollLeft = e.target.scrollLeft;
     }
     detailsRef.current?.addEventListener('scroll', handleScroll, {
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index 80a73550..230c7995 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -209,7 +209,7 @@ function Trending({ columnMode, ...props }) {
               const total = history.reduce((acc, cur) => acc + +cur.uses, 0);
               return (
                 <Link to={`/${instance}/t/${name}`} key={name}>
-                  <span>
+                  <span dir="auto">
                     <span class="more-insignificant">#</span>
                     {name}
                   </span>
diff --git a/src/pages/welcome.css b/src/pages/welcome.css
index c79a2c71..d020170b 100644
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@@ -140,7 +140,7 @@
       height: auto;
       max-height: none;
       position: fixed;
-      left: 0;
+      inset-inline-start: 0;
       top: 0;
       bottom: 0;
       width: 50%;
@@ -153,8 +153,9 @@
     }
 
     #why-container {
-      padding: 32px 32px 32px 8px;
-      margin-left: 50%;
+      padding: 32px;
+      padding-inline-start: 8px;
+      margin-inline-start: 50%;
 
       /* overflow: auto;
       mask-image: linear-gradient(to top, transparent 16px, black 64px); */
diff --git a/src/utils/is-rtl.js b/src/utils/is-rtl.js
new file mode 100644
index 00000000..0a868f48
--- /dev/null
+++ b/src/utils/is-rtl.js
@@ -0,0 +1,26 @@
+let IS_RTL = false;
+
+// Use MutationObserver to detect RTL
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'attributes') {
+      const { value } = mutation.target;
+      if (value === 'rtl') {
+        IS_RTL = true;
+      } else {
+        IS_RTL = false;
+      }
+      // Fire custom event 'dirchange' on document
+      // document.dispatchEvent(new Event('dirchange'));
+    }
+  });
+});
+observer.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['dir'],
+});
+
+export default function isRTL() {
+  return IS_RTL;
+  // return document.documentElement.dir === 'rtl';
+}