Support RTL

piroor · Jan 10, 2025 · a4e164d · a4e164d
1 parent 60fdbf1
commit a4e164d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/background/background.js b/background/background.js
@@ -30,7 +30,7 @@ function getStyle() {
     ::part(%EXTRA_CONTENTS_PART% container) {
       bottom: 0;
       direction: ltr;
-      left: 0;
+      inset-inline-start: 0;
       line-height: 1;
       overflow: hidden;
       position: absolute;
@@ -82,7 +82,7 @@ function getStyle() {
     }
 
     ::part(%EXTRA_CONTENTS_PART% handle following) {
-      margin-left: -1px;
+      margin-inline-start: -1px;
     }
 
     ::part(%EXTRA_CONTENTS_PART% handle-image) {

diff --git a/common/common.js b/common/common.js
@@ -73,3 +73,25 @@ export async function getTSTVersion() {
   }
   return '0.0';
 }
+
+const RTL_LANGUAGES = new Set([
+  'ar',
+  'he',
+  'fa',
+  'ur',
+  'ps',
+  'sd',
+  'ckb',
+  'prs',
+  'rhg',
+]);
+
+export function isRTL() {
+  const lang = (
+    navigator.language ||
+    navigator.userLanguage ||
+    //(new Intl.DateTimeFormat()).resolvedOptions().locale ||
+    ''
+  ).split('-')[0];
+  return RTL_LANGUAGES.has(lang);
+}
diff --git a/options/init.js b/options/init.js
@@ -6,7 +6,8 @@
 'use strict';
 
 import {
-  configs
+  configs,
+  isRTL,
 } from '/common/common.js';
 import Options from '/extlib/Options.js';
 import '/extlib/l10n.js';
@@ -29,6 +30,7 @@ configs.$addObserver(onConfigChanged);
 */
 
 window.addEventListener('DOMContentLoaded', async () => {
+  document.documentElement.classList.toggle('rtl', isRTL());
   await configs.$loaded;
 
   //options.buildUIForAllConfigs(document.querySelector('#debug-configs'));

diff --git a/options/options.css b/options/options.css
@@ -11,6 +11,10 @@
   opacity: 0;
 }
 
+:root.rtl {
+  direction: rtl;
+}
+
 body {
   background: var(--bg-color);
   color: var(--text-color);