From 034ac59c9aa5a213d0748716862d513301c13df7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 11:51:14 +0300
Subject: [PATCH 01/52] feat(i18n/rtl): add an English with RTL enabled for
 testing

---
 apps/client/src/widgets/collections/calendar/index.tsx | 3 ++-
 apps/server/src/services/i18n.ts                       | 1 +
 packages/commons/src/lib/i18n.ts                       | 7 +++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index 3aa9fc1d6..c22155585 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -74,7 +74,8 @@ export const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: Local
     pt: () => import("@fullcalendar/core/locales/pt"),
     "pt_br": () => import("@fullcalendar/core/locales/pt-br"),
     uk: () => import("@fullcalendar/core/locales/uk"),
-    en: null
+    en: null,
+    "en_rtl": null,
 };
 
 export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
diff --git a/apps/server/src/services/i18n.ts b/apps/server/src/services/i18n.ts
index 1f1db1ac6..1199bd796 100644
--- a/apps/server/src/services/i18n.ts
+++ b/apps/server/src/services/i18n.ts
@@ -12,6 +12,7 @@ export const DAYJS_LOADER: Record<LOCALE_IDS, () => Promise<typeof import("dayjs
     "cn": () => import("dayjs/locale/zh-cn.js"),
     "de": () => import("dayjs/locale/de.js"),
     "en": () => import("dayjs/locale/en.js"),
+    "en_rtl": () => import("dayjs/locale/en.js"),
     "es": () => import("dayjs/locale/es.js"),
     "fa": () => import("dayjs/locale/fa.js"),
     "fr": () => import("dayjs/locale/fr.js"),
diff --git a/packages/commons/src/lib/i18n.ts b/packages/commons/src/lib/i18n.ts
index 5970d2ab8..a6679f542 100644
--- a/packages/commons/src/lib/i18n.ts
+++ b/packages/commons/src/lib/i18n.ts
@@ -23,6 +23,13 @@ const UNSORTED_LOCALES: Locale[] = [
     { id: "tw", name: "繁體中文", electronLocale: "zh_TW" },
     { id: "uk", name: "Українська", electronLocale: "uk" },
 
+    /**
+     * Development-only languages.
+     *
+     * These are only displayed while in dev mode, to test some language particularities (such as RTL) more easily.
+     */
+    { id: "en_rtl", name: "English (right-to-left) [dev]", electronLocale: "en", rtl: true },
+
     /*
      * Right to left languages
      *

From adff36cf2214e5130c65c81bd2381eae788d9efc Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 12:08:39 +0300
Subject: [PATCH 02/52] feat(i18n/rtl): apply right to left direction at root
 level

---
 apps/client/src/widgets/containers/root_container.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 6c2d87521..511a98b14 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -3,6 +3,7 @@ import FlexContainer from "./flex_container.js";
 import options from "../../services/options.js";
 import type BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
+import { LOCALES } from "@triliumnext/commons";
 
 /**
  * The root container is the top-most widget/container, from which the entire layout derives.
@@ -32,6 +33,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
+        this.#setRightToLeft(options.get("locale"));
 
         return super.render();
     }
@@ -68,6 +70,11 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
     #setBackdropEffects(enabled: boolean) {
         document.body.classList.toggle("backdrop-effects-disabled", !enabled);
     }
+
+    #setRightToLeft(locale: string) {
+        const correspondingLocale = LOCALES.find(l => l.id === locale);
+        document.body.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
+    }
 }
 
 function getViewportHeight() {

From 247ab1aec3dd565fbfc0682b27d66209beb509a2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:44:17 +0300
Subject: [PATCH 03/52] feat(client/rtl): handle margin-left

---
 apps/client/src/layouts/mobile_layout.tsx     |  2 +-
 apps/client/src/stylesheets/style.css         | 20 ++++++++--------
 apps/client/src/stylesheets/table.css         |  2 +-
 .../src/stylesheets/theme-next/base.css       |  2 +-
 .../src/stylesheets/theme-next/dialogs.css    |  4 ++--
 .../src/stylesheets/theme-next/forms.css      |  4 ++--
 .../src/stylesheets/theme-next/llm-chat.css   |  2 +-
 .../src/stylesheets/theme-next/notes/text.css |  2 +-
 .../src/stylesheets/theme-next/pages.css      |  4 ++--
 .../src/stylesheets/theme-next/ribbon.css     |  4 ++--
 .../src/stylesheets/theme-next/shell.css      | 12 +++++-----
 apps/client/src/stylesheets/tree.css          |  8 +++----
 apps/client/src/widgets/FloatingButtons.css   |  4 ++--
 apps/client/src/widgets/attachment_detail.ts  |  2 +-
 .../src/widgets/bulk_actions/BulkAction.tsx   |  6 ++---
 .../src/widgets/buttons/global_menu.css       |  6 ++---
 .../src/widgets/collections/board/index.css   |  2 +-
 apps/client/src/widgets/dialogs/revisions.tsx | 24 +++++++++----------
 apps/client/src/widgets/note_map.ts           |  2 +-
 .../client/src/widgets/promoted_attributes.ts |  2 +-
 apps/client/src/widgets/react/FormToggle.css  |  4 ++--
 .../src/widgets/ribbon/BasicPropertiesTab.tsx |  2 +-
 .../ribbon/SearchDefinitionOptions.tsx        |  2 +-
 apps/client/src/widgets/ribbon/style.css      |  8 +++----
 apps/client/src/widgets/tab_row.ts            |  6 ++---
 apps/client/src/widgets/toc.ts                |  4 ++--
 .../type_widgets/options/text_notes.tsx       |  2 +-
 27 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 1bc944418..8d8dae6c2 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -68,7 +68,7 @@ const FANCYTREE_CSS = `
 
 .fancytree-title {
     font-size: 1.5em;
-    margin-left: 0.6em !important;
+    margin-inline-start: 0.6em !important;
 }
 
 .fancytree-node {
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index eb9449aef..574c0684b 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -174,7 +174,7 @@ textarea,
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
-    margin-left: 12px;
+    margin-inline-start: 12px;
 }
 
 label.tn-radio input[type="radio"],
@@ -226,7 +226,7 @@ samp {
 .badge {
     --bs-badge-color: var(--muted-text-color);
 
-    margin-left: 8px;
+    margin-inline-start: 8px;
     background: var(--accented-background-color);
 }
 
@@ -338,7 +338,7 @@ button kbd {
 }
 
 .ui-menu kbd {
-    margin-left: 30px;
+    margin-inline-start: 30px;
     float: right;
 }
 
@@ -392,7 +392,7 @@ body.desktop .tabulator-popup-container {
 }
 
 .dropend .dropdown-toggle::after {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     color: var(--muted-text-color);
 }
 
@@ -403,7 +403,7 @@ body.desktop .tabulator-popup-container {
 
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     font-size: 0.5em;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
@@ -1033,7 +1033,7 @@ svg.ck-icon .note-icon {
     counter-increment: footnote-counter;
     display: flex;
     list-style: none;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
 }
 
 .ck-content .footnote-item > * {
@@ -1414,7 +1414,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 .ck.ck-slash-command-button__text-part,
 .ck.ck-template-form__text-part {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     line-height: 1.2em !important;
 }
 
@@ -1748,7 +1748,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-right: 5px;
 }
 
@@ -1800,7 +1800,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .note-split {
-    margin-left: auto;
+    margin-inline-start: auto;
     margin-right: auto;
 }
 
@@ -1858,7 +1858,7 @@ textarea {
 
 .attachment-help-button {
     display: inline-block;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     vertical-align: middle;
     font-size: 1em;
 }
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 211f5d7c6..8f187dd88 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -67,7 +67,7 @@
 }
 
 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
-    margin-left: var(--cell-editing-border-width);
+    margin-inline-start: var(--cell-editing-border-width);
 }
 
 .tabulator div.tabulator-header .tabulator-col,
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 7bf49a02d..1549c9f86 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -211,7 +211,7 @@ html body .dropdown-item[disabled] {
 
 .dropdown-item span.keyboard-shortcut {
     color: var(--menu-item-keyboard-shortcut-color) !important;
-    margin-left: 16px;
+    margin-inline-start: 16px;
 }
 
 .dropdown-divider {
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 357a541ff..967689599 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -29,7 +29,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     border: 0;
     border-radius: 50%;
     padding: 0;
@@ -374,7 +374,7 @@ div.tn-tool-dialog {
 }
 
 .help-dialog .help-cards kbd:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 /* Inline code - used for Markdown samples */
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index b5cf73428..b548e97d1 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -71,7 +71,7 @@ button.btn.btn-primary kbd,
 button.btn.btn-secondary kbd,
 button.btn.btn-sm kbd,
 button.btn.btn-success kbd {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     background: var(--cmd-button-keyboard-shortcut-background);
     color: var(--cmd-button-keyboard-shortcut-color);
     font-size: 0.6em;
@@ -102,7 +102,7 @@ button.btn.btn-success kbd {
 }
 
 .btn-group .tn-tool-button + .tn-tool-button {
-    margin-left: 4px !important;
+    margin-inline-start: 4px !important;
 }
 
 /* The "x" icon button */
diff --git a/apps/client/src/stylesheets/theme-next/llm-chat.css b/apps/client/src/stylesheets/theme-next/llm-chat.css
index dc3342485..a56ad217e 100644
--- a/apps/client/src/stylesheets/theme-next/llm-chat.css
+++ b/apps/client/src/stylesheets/theme-next/llm-chat.css
@@ -19,7 +19,7 @@
 }
 
 .chat-message.user-message {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .chat-message.assistant-message {
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 6499fa0b4..4c4e6cec2 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -210,7 +210,7 @@
 /* Separator */
 :root .ck .ck-list__separator {
     margin: .5em 0;
-    margin-left: calc(0px - var(--ck-editor-popup-padding));
+    margin-inline-start: calc(0px - var(--ck-editor-popup-padding));
     width: calc(100% + (var(--ck-editor-popup-padding) * 2));
     background: var(--menu-item-delimiter-color);
 }
diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css
index b15801f71..7efc741f5 100644
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/apps/client/src/stylesheets/theme-next/pages.css
@@ -199,7 +199,7 @@ body.desktop .option-section:not(.tn-no-card) {
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
-    margin-left: calc(-1 * var(--options-card-padding));
+    margin-inline-start: calc(-1 * var(--options-card-padding));
 }
 
 .options-section:not(.tn-no-card) h5 {
@@ -216,7 +216,7 @@ body.desktop .option-section:not(.tn-no-card) {
 .options-section hr {
     --bs-border-width: 2px;
 
-    margin-left: calc(var(--options-card-padding) * -1);
+    margin-inline-start: calc(var(--options-card-padding) * -1);
     margin-right: calc(var(--options-card-padding) * -1);
     opacity: 1;
     color: var(--root-background);
diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css
index c20ecb488..3957bb1e2 100644
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -105,7 +105,7 @@ ul.note-type-dropdown li.dropdown-item {
 /* Editability dropdown */
 
 ul.editability-dropdown li.dropdown-item > div {
-    margin-left: 4px;
+    margin-inline-start: 4px;
 }
 
 .editability-dropdown .dropdown-item .description {
@@ -147,7 +147,7 @@ ul.editability-dropdown li.dropdown-item > div {
 
 /* Note path in attribute detail dialog */
 .attr-detail .note-path {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 /*
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 28679abc7..ce4a3e4eb 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -1101,7 +1101,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
 
 .tab-row-widget .note-new-tab {
     position: relative;
-    margin-left: 3px;
+    margin-inline-start: 3px;
     color: transparent; /* Prevent the original "+" from being displayed */
 }
 
@@ -1225,7 +1225,7 @@ body.mobile .note-title {
 }
 
 .title-row > *:nth-child(2) {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .title-row {
@@ -1407,7 +1407,7 @@ div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type
 div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
-    margin-left: 8px;
+    margin-inline-start: 8px;
     margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
@@ -1547,7 +1547,7 @@ div.floating-buttons-children .close-floating-buttons {
 }
 
 div.floating-buttons-children .close-floating-buttons {
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
     background: var(--floating-button-hide-button-background);
     color: var(--floating-button-hide-button-color);
 }
@@ -1642,7 +1642,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .find-replace-widget .form-check .form-check-input {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 /* Narrow version */
@@ -1806,7 +1806,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
-    margin-left: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important;
     margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
 }
 
diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index 385e596dd..29854e861 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -15,7 +15,7 @@ span.fancytree-node.fancytree-hide {
     flex-shrink: 1;
     flex-grow: 1;
     overflow: hidden;
-    margin-left: 7px;
+    margin-inline-start: 7px;
     outline: none;
     position: relative;
     top: 2px;
@@ -80,7 +80,7 @@ span.fancytree-node.fancytree-hide {
     width: 12px;
     height: 12px;
     margin-top: 2px;
-    margin-left: 1px;
+    margin-inline-start: 1px;
     border-width: 1px;
     border-style: solid;
 }
@@ -229,14 +229,14 @@ span.fancytree-node.archived {
     display: none;
     font-size: 120%;
     cursor: pointer;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     padding: 1px;
     border: 1px solid transparent;
     border-radius: 5px;
 }
 
 .unhoist-button.bx.tree-item-button {
-    margin-left: 0; /* unhoist button is on the left and doesn't need more margin */
+    margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
     display: block; /* keep always visible */
 }
 
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index f4fc8a092..56a6c20b0 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -74,7 +74,7 @@
 
 .show-floating-buttons {
     /* display: none;*/
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }
 
 .show-floating-buttons-button {
@@ -97,7 +97,7 @@
 
 /* #region Close floating buttons */
 .close-floating-buttons {
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }
 
 .close-floating-buttons:first-child {
diff --git a/apps/client/src/widgets/attachment_detail.ts b/apps/client/src/widgets/attachment_detail.ts
index 1d2eab902..31be61536 100644
--- a/apps/client/src/widgets/attachment_detail.ts
+++ b/apps/client/src/widgets/attachment_detail.ts
@@ -30,7 +30,7 @@ const TPL = /*html*/`
         }
 
         .attachment-details {
-            margin-left: 10px;
+            margin-inline-start: 10px;
         }
 
         .attachment-content-wrapper {
diff --git a/apps/client/src/widgets/bulk_actions/BulkAction.tsx b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
index 8b562d0f0..0f629b4bc 100644
--- a/apps/client/src/widgets/bulk_actions/BulkAction.tsx
+++ b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
@@ -4,7 +4,7 @@ import AbstractBulkAction from "./abstract_bulk_action";
 import HelpRemoveButtons from "../react/HelpRemoveButtons";
 
 interface BulkActionProps {
-    label: string | ComponentChildren;   
+    label: string | ComponentChildren;
     children?: ComponentChildren;
     helpText?: ComponentChildren;
     bulkAction: AbstractBulkAction;
@@ -13,7 +13,7 @@ interface BulkActionProps {
 // Define styles as constants to prevent recreation
 const flexContainerStyle = { display: "flex", alignItems: "center" } as const;
 const labelStyle = { marginRight: "10px" } as const;
-const textStyle = { marginRight: "10px", marginLeft: "10px" } as const;
+const textStyle = { marginRight: "10px", marginInlineStart: "10px" } as const;
 
 const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionProps) => {
     return (
@@ -44,4 +44,4 @@ export const BulkActionText = memo(({ text }: { text: string }) => {
                 {text}
             </div>
     );
-});
\ No newline at end of file
+});
diff --git a/apps/client/src/widgets/buttons/global_menu.css b/apps/client/src/widgets/buttons/global_menu.css
index 2145b76f9..0fd1c6988 100644
--- a/apps/client/src/widgets/buttons/global_menu.css
+++ b/apps/client/src/widgets/buttons/global_menu.css
@@ -69,7 +69,7 @@ button.global-menu-button {
 }
 
 .global-menu .zoom-buttons {
-    margin-left: 2em;
+    margin-inline-start: 2em;
 }
 
 .global-menu .zoom-buttons a {
@@ -79,7 +79,7 @@ button.global-menu-button {
     color: var(--button-text-color);
     background-color: var(--button-background-color);
     padding: 3px;
-    margin-left: 3px;
+    margin-inline-start: 3px;
     text-decoration: none;
 }
 
@@ -88,7 +88,7 @@ button.global-menu-button {
 }
 
 .global-menu .zoom-state {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     margin-right: 5px;
 }
 
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index cf5906930..9f16b4557 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -93,7 +93,7 @@
 
 .board-view-container .board-column .edit-icon {
   opacity: 0;
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
   transition: opacity 0.2s ease;
   color: var(--muted-text-color);
   cursor: pointer;
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index 65c7dfd2c..b21a36faf 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -91,7 +91,7 @@ export default function RevisionsDialog() {
                     </>
                 )
             }
-            footer={<RevisionFooter note={note} />} 
+            footer={<RevisionFooter note={note} />}
             footerStyle={{ paddingTop: 0, paddingBottom: 0 }}
             onHidden={() => {
                 setShown(false);
@@ -115,16 +115,16 @@ export default function RevisionsDialog() {
 
                 <div className="revision-content-wrapper" style={{
                     flexGrow: "1",
-                    marginLeft: "20px",
+                    marginInlineStart: "20px",
                     display: "flex",
                     flexDirection: "column",
                     maxWidth: "calc(100% - 150px)",
-                    minWidth: 0                    
+                    minWidth: 0
                 }}>
-                    <RevisionPreview 
+                    <RevisionPreview
                         noteContent={noteContent}
                         revisionItem={currentRevision}
-                        showDiff={showDiff} 
+                        showDiff={showDiff}
                         setShown={setShown}
                         onRevisionDeleted={() => {
                             setRefreshCounter(c => c + 1);
@@ -138,7 +138,7 @@ export default function RevisionsDialog() {
 function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
     return (
         <FormList onSelect={onSelect} fullHeight>
-            {revisions.map((item) => 
+            {revisions.map((item) =>
                 <FormListItem
                     title={t("revisions.revision_last_edited", { date: item.dateLastEdited })}
                     value={item.revisionId}
@@ -152,7 +152,7 @@ function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: Re
 
 function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevisionDeleted }: {
     noteContent?: string,
-    revisionItem?: RevisionItem,  
+    revisionItem?: RevisionItem,
     showDiff: boolean,
     setShown: Dispatch<StateUpdater<boolean>>,
     onRevisionDeleted?: () => void
@@ -163,7 +163,7 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
         if (revisionItem) {
             server.get<RevisionPojo>(`revisions/${revisionItem.revisionId}`).then(setFullRevision);
         } else {
-            setFullRevision(undefined);            
+            setFullRevision(undefined);
         }
     }, [revisionItem]);
 
@@ -242,11 +242,11 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
             return <RevisionContentText content={content} />
         case "code":
             return <pre style={CODE_STYLE}>{content}</pre>;
-        case "image":            
+        case "image":
             switch (revisionItem.mime) {
                 case "image/svg+xml": {
                     //Base64 of other format images may be embedded in svg
-                    const encodedSVG = encodeURIComponent(content as string); 
+                    const encodedSVG = encodeURIComponent(content as string);
                     return <img
                         src={`data:${fullRevision.mime};utf8,${encodedSVG}`}
                         style={IMAGE_STYLE} />;
@@ -355,7 +355,7 @@ function RevisionFooter({ note }: { note?: FNote }) {
     if (revisionsNumberLimit === -1) {
         revisionsNumberLimit = "∞";
     }
-    
+
     return <>
         <span class="revisions-snapshot-interval flex-grow-1 my-0 py-0">
             {t("revisions.snapshot_interval", { seconds: options.getInt("revisionSnapshotTimeInterval") })}
@@ -376,4 +376,4 @@ async function getNote(noteId?: string | null) {
     } else {
         return appContext.tabManager.getActiveContextNote();
     }
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts
index d0274fc86..ef36d7b7e 100644
--- a/apps/client/src/widgets/note_map.ts
+++ b/apps/client/src/widgets/note_map.ts
@@ -38,7 +38,7 @@ const TPL = /*html*/`<div class="note-map-widget">
             /* removing default appearance */
             -webkit-appearance: none;
             appearance: none;
-            margin-left: 15px;
+            margin-inline-start: 15px;
             width: 150px;
         }
 
diff --git a/apps/client/src/widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
index 1b67ecec1..db1937264 100644
--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -45,7 +45,7 @@ const TPL = /*html*/`
     }
 
     .promoted-attribute-cell div.input-group {
-        margin-left: 10px;
+        margin-inline-start: 10px;
         display: flex;
         min-height: 40px;
     }
diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
index f727bc5ff..f012f8056 100644
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -18,7 +18,7 @@
 .switch-widget .switch-button {
     display: block;
     position: relative;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     width: var(--switch-track-width);
     height: var(--switch-track-height);
     border-radius: 24px;
@@ -86,7 +86,7 @@
 
 .switch-widget .switch-help-button {
     border: 0;
-    margin-left: 4px;
+    margin-inline-start: 4px;
     background: none;
     cursor: pointer;
     font-size: 1.1em;
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index 6039053b5..b7ef4fa0e 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -353,7 +353,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                 >{t("note_language.configure-languages")}</FormListItem>
             </Dropdown>
 
-            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
+            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
 
             <Modal
                 className="content-languages-modal"
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
index 69e33cf51..6393dfb10 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -263,7 +263,7 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
         placeholder={t("ancestor.placeholder")}
       />
 
-      <div style="margin-left: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
+      <div style="margin-inline-start: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
       <FormSelect
         values={options}
         keyProperty="value" titleProperty="label"
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 276256e25..31c996dd5 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     flex-grow: 1;
     flex-flow: row wrap;
 }
@@ -76,12 +76,12 @@
 .ribbon-button-container > * {
     position: relative;
     top: -3px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
 }
 
 .ribbon-body {
     border-bottom: 1px solid var(--main-border-color);
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
 }
 
@@ -308,7 +308,7 @@
 
 /* #region Owned Attributes */
 .attribute-list {
-    margin-left: 7px;
+    margin-inline-start: 7px;
     margin-right: 7px;
     margin-top: 5px;
     margin-bottom: 2px;
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index c13aa4969..0d248fa5a 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-small] .note-tab-title {
-        margin-left: 0;
+        margin-inline-start: 0;
     }
 
     .tab-row-widget .note-tab .note-tab-drag-handle {
@@ -240,13 +240,13 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-smaller] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
     }
     .tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
         display: none;
     }
     .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
         margin-right: auto;
     }
     @-moz-keyframes note-tab-was-just-added {
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index e49368283..b2858cf71 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -103,12 +103,12 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc li .item-content {
-            margin-left: 25px;
+            margin-inline-start: 25px;
             flex: 1;
         }
 
         .toc li .collapse-button + .item-content {
-            margin-left: 4px;
+            margin-inline-start: 4px;
         }
 
         .toc li:hover {
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
index 5c8ed90af..4e2475922 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -62,7 +62,7 @@ function FormattingToolbar() {
                 name="multiline-toolbar"
                 label={t("editing.editor_type.multiline-toolbar")}
                 currentValue={textNoteEditorMultilineToolbar} onChange={setTextNoteEditorMultilineToolbar}
-                containerStyle={{ marginLeft: "1em" }}
+                containerStyle={{ marginInlineStart: "1em" }}
             />
         </OptionsSection>
     )

From 6b930136747764e5459b16cdc478f7e8c7baf03a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:45:31 +0300
Subject: [PATCH 04/52] feat(client/rtl): handle margin-right

---
 apps/client/src/layouts/mobile_layout.tsx        |  4 ++--
 apps/client/src/stylesheets/style.css            | 16 ++++++++--------
 apps/client/src/stylesheets/table.css            |  2 +-
 apps/client/src/stylesheets/theme-next/base.css  |  4 ++--
 .../src/stylesheets/theme-next/dialogs.css       |  6 +++---
 .../src/stylesheets/theme-next/llm-chat.css      |  4 ++--
 apps/client/src/stylesheets/theme-next/pages.css |  4 ++--
 .../client/src/stylesheets/theme-next/ribbon.css |  2 +-
 apps/client/src/stylesheets/theme-next/shell.css | 16 ++++++++--------
 apps/client/src/stylesheets/tree.css             |  2 +-
 .../attribute_widgets/attribute_detail.ts        |  2 +-
 .../src/widgets/bulk_actions/BulkAction.tsx      |  4 ++--
 .../src/widgets/buttons/attachments_actions.ts   |  2 +-
 apps/client/src/widgets/buttons/global_menu.css  |  4 ++--
 .../src/widgets/collections/board/index.css      |  6 +++---
 apps/client/src/widgets/dialogs/bulk_actions.css |  2 +-
 apps/client/src/widgets/find.ts                  |  4 ++--
 apps/client/src/widgets/note_icon.css            |  2 +-
 .../widgets/ribbon/SearchDefinitionOptions.tsx   |  2 +-
 apps/client/src/widgets/ribbon/style.css         | 12 ++++++------
 apps/client/src/widgets/tab_row.ts               |  2 +-
 21 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 8d8dae6c2..91953b1a3 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -81,7 +81,7 @@ const FANCYTREE_CSS = `
 
 span.fancytree-expander {
     width: 24px !important;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .fancytree-loading span.fancytree-expander {
@@ -101,7 +101,7 @@ span.fancytree-expander {
 .tree-wrapper .scroll-to-active-note-button,
 .tree-wrapper .tree-settings-button {
     position: fixed;
-    margin-right: 16px;
+    margin-inline-end: 16px;
     display: none;
 }
 
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 574c0684b..5e9b3daf3 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -179,7 +179,7 @@ label.tn-checkbox + label.tn-checkbox {
 
 label.tn-radio input[type="radio"],
 label.tn-checkbox input[type="checkbox"] {
-    margin-right: .5em;
+    margin-inline-end: .5em;
 }
 
 #left-pane input,
@@ -1041,13 +1041,13 @@ svg.ck-icon .note-icon {
 }
 
 .ck-content .footnote-back-link {
-    margin-right: 0.1em;
+    margin-inline-end: 0.1em;
     position: relative;
     top: -0.2em;
 }
 
 .ck-content .footnotes .footnote-back-link > sup {
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .ck-content .footnote-item:before {
@@ -1749,7 +1749,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     flex-shrink: 0;
     flex-direction: column;
     margin-inline-start: 10px;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 #right-pane .card-header {
@@ -1801,7 +1801,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 .note-split {
     margin-inline-start: auto;
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 .note-split.full-content-width {
@@ -1820,7 +1820,7 @@ button.close:hover {
 .reference-link .bx {
     position: relative;
     top: 1px;
-    margin-right: 3px;
+    margin-inline-end: 3px;
 }
 
 .options-section:first-of-type h4 {
@@ -2319,12 +2319,12 @@ footer.webview-footer button {
     display: flex;
     align-items: center;
     font-size: 0.9em;
-    margin-right: 15px;
+    margin-inline-end: 15px;
     cursor: pointer;
 }
 
 .chat-option input[type="checkbox"] {
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 /* Style for thinking process in chat responses */
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 8f187dd88..1579a6853 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -117,7 +117,7 @@
 /* Cell */
 
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
-    margin-right: var(--cell-editing-border-width);
+    margin-inline-end: var(--cell-editing-border-width);
 }
 
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 1549c9f86..bcadc3517 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -357,13 +357,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 }
 
 #toast-container .toast:not(.no-title) .bx {
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     font-size: 1.1em;
     opacity: 0.85;
 }
 
 #toast-container .toast.no-title .bx {
-    margin-right: 0;
+    margin-inline-end: 0;
     font-size: 1.3em;
 }
 
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 967689599..882e0b942 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -56,7 +56,7 @@
 }
 
 .modal .modal-header .help-button {
-    margin-right: 0;
+    margin-inline-end: 0;
     font-size: calc(var(--modal-control-button-size) * .75);
     font-family: unset;
     font-weight: bold;
@@ -141,7 +141,7 @@ div.tn-tool-dialog {
 
 /* Search box wrapper */
 .jump-to-note-dialog .input-group {
-    margin-right: 16px;
+    margin-inline-end: 16px;
 }
 
 .jump-to-note-dialog .input-group:hover {
@@ -419,5 +419,5 @@ div.tn-tool-dialog {
 }
 
 .note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx {
-    margin-right: .25em;
+    margin-inline-end: .25em;
 }
\ No newline at end of file
diff --git a/apps/client/src/stylesheets/theme-next/llm-chat.css b/apps/client/src/stylesheets/theme-next/llm-chat.css
index a56ad217e..da5b47895 100644
--- a/apps/client/src/stylesheets/theme-next/llm-chat.css
+++ b/apps/client/src/stylesheets/theme-next/llm-chat.css
@@ -23,7 +23,7 @@
 }
 
 .chat-message.assistant-message {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 .message-avatar {
@@ -33,7 +33,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 8px;
+    margin-inline-end: 8px;
 }
 
 .user-message .message-avatar {
diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css
index 7efc741f5..d0c092321 100644
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/apps/client/src/stylesheets/theme-next/pages.css
@@ -52,7 +52,7 @@
     background-color: #f5f5f5;
 }
 .google-login-btn img {
-    margin-right: 10px;
+    margin-inline-end: 10px;
     width: 18px;
     height: 18px;
 }
@@ -217,7 +217,7 @@ body.desktop .option-section:not(.tn-no-card) {
     --bs-border-width: 2px;
 
     margin-inline-start: calc(var(--options-card-padding) * -1);
-    margin-right: calc(var(--options-card-padding) * -1);
+    margin-inline-end: calc(var(--options-card-padding) * -1);
     opacity: 1;
     color: var(--root-background);
 }
diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css
index 3957bb1e2..e9af8df88 100644
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -95,7 +95,7 @@ div.promoted-attributes-container {
 /* Note type dropdown */
 
 ul.note-type-dropdown .check {
-    margin-right: 6px;
+    margin-inline-end: 6px;
 }
 
 ul.note-type-dropdown li.dropdown-item {
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index ce4a3e4eb..cdb9bae09 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -539,7 +539,7 @@ div.quick-search .search-button {
     justify-content: center;
     width: 25px;
     height: 25px;
-    margin-right: 8px;
+    margin-inline-end: 8px;
     border-radius: 50%;
     padding: 0;
     color: var(--quick-search-color) !important;
@@ -734,7 +734,7 @@ body.mobile .fancytree-node > span {
 }
 
 #left-pane .tree-item-button {
-    margin-right: 6px;
+    margin-inline-end: 6px;
     border: unset;
     border-radius: 50%;
     background: var(--left-pane-item-action-button-background);
@@ -1221,7 +1221,7 @@ body.mobile .note-title {
 }
 
 .title-row > *:first-child {
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .title-row > *:nth-child(2) {
@@ -1312,7 +1312,7 @@ body.mobile .note-title {
 /* The promoted attributes section */
 div.promoted-attributes-container {
     display: flex;
-    margin-right: 10%;
+    margin-inline-end: 10%;
     padding: 6px 0;
     gap: 8px;
     align-items: stretch;
@@ -1400,7 +1400,7 @@ div.promoted-attribute-cell .tn-checkbox {
 /* Relocate the checkbox before the label */
 div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type {
     order: -1;
-    margin-right: 1.5em;
+    margin-inline-end: 1.5em;
 }
 
 /* The element containing the "new attribute" and "remove this attribute button" */
@@ -1408,7 +1408,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
     margin-inline-start: 8px;
-    margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
+    margin-inline-end: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
 }
@@ -1700,7 +1700,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     }
 
     .replace-widget-box > * {
-        margin-right: unset !important;
+        margin-inline-end: unset !important;
     }
 
     div.replace-widget-box button.btn.btn-sm {
@@ -1807,7 +1807,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 
 .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
     margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important;
-    margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-inline-end: calc(var(--padding) * var(--space-factor) * -1) !important;
 }
 
 .excalidraw .dropdown-menu:before {
diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index 29854e861..00e131936 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -59,7 +59,7 @@ span.fancytree-node.fancytree-hide {
     line-height: 1;
     position: relative;
     top: 2px;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .fancytree-loading span.fancytree-expander {
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
index cdb7c7b43..7ce3372b9 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -176,7 +176,7 @@ const TPL = /*html*/`
 
     <div class="attr-save-delete-button-container">
         <button class="btn btn-primary btn-sm attr-save-changes-and-close-button"
-            style="flex-grow: 1; margin-right: 20px">
+            style="flex-grow: 1; margin-inline-end: 20px">
             ${t("attribute_detail.save_and_close")}</button>
 
         <button class="btn btn-secondary btn-sm attr-delete-button">
diff --git a/apps/client/src/widgets/bulk_actions/BulkAction.tsx b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
index 0f629b4bc..fd151aa17 100644
--- a/apps/client/src/widgets/bulk_actions/BulkAction.tsx
+++ b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
@@ -12,8 +12,8 @@ interface BulkActionProps {
 
 // Define styles as constants to prevent recreation
 const flexContainerStyle = { display: "flex", alignItems: "center" } as const;
-const labelStyle = { marginRight: "10px" } as const;
-const textStyle = { marginRight: "10px", marginInlineStart: "10px" } as const;
+const labelStyle = { marginInlineEnd: "10px" } as const;
+const textStyle = { marginInlineEnd: "10px", marginInlineStart: "10px" } as const;
 
 const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionProps) => {
     return (
diff --git a/apps/client/src/widgets/buttons/attachments_actions.ts b/apps/client/src/widgets/buttons/attachments_actions.ts
index bb49b2178..681973a28 100644
--- a/apps/client/src/widgets/buttons/attachments_actions.ts
+++ b/apps/client/src/widgets/buttons/attachments_actions.ts
@@ -28,7 +28,7 @@ const TPL = /*html*/`
         position: relative;
         top: 3px;
         font-size: 120%;
-        margin-right: 5px;
+        margin-inline-end: 5px;
     }
 
     .attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
diff --git a/apps/client/src/widgets/buttons/global_menu.css b/apps/client/src/widgets/buttons/global_menu.css
index 0fd1c6988..8ffbc2ae1 100644
--- a/apps/client/src/widgets/buttons/global_menu.css
+++ b/apps/client/src/widgets/buttons/global_menu.css
@@ -89,14 +89,14 @@ button.global-menu-button {
 
 .global-menu .zoom-state {
     margin-inline-start: 5px;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .global-menu .dropdown-item .bx {
     position: relative;
     top: 3px;
     font-size: 120%;
-    margin-right: 6px;
+    margin-inline-end: 6px;
 }
 
 /* #region Update available */
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index 9f16b4557..318b645ab 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -146,7 +146,7 @@
 }
 
 .board-view-container .board-note .icon {
-  margin-right: 0.25em;
+  margin-inline-end: 0.25em;
   display: inline;
 }
 
@@ -269,7 +269,7 @@
 }
 
 .board-new-item .icon {
-  margin-right: 0.25em;
+  margin-inline-end: 0.25em;
 }
 
 .board-add-column {
@@ -296,7 +296,7 @@
 }
 
 .board-add-column .icon {
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   font-size: 1.2em;
 }
 
diff --git a/apps/client/src/widgets/dialogs/bulk_actions.css b/apps/client/src/widgets/dialogs/bulk_actions.css
index 5f103feea..6b8400263 100644
--- a/apps/client/src/widgets/dialogs/bulk_actions.css
+++ b/apps/client/src/widgets/dialogs/bulk_actions.css
@@ -4,7 +4,7 @@
 
 .bulk-actions-dialog .bulk-available-action-list button {
     padding: 2px 7px;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     margin-bottom: 5px;
 }
 
diff --git a/apps/client/src/widgets/find.ts b/apps/client/src/widgets/find.ts
index 68d61541f..d694d087a 100644
--- a/apps/client/src/widgets/find.ts
+++ b/apps/client/src/widgets/find.ts
@@ -32,7 +32,7 @@ const TPL = /*html*/`
         }
 
         .find-widget-box > *, .replace-widget-box > *{
-            margin-right: 15px;
+            margin-inline-end: 15px;
         }
 
         .find-widget-box, .replace-widget-box {
@@ -167,7 +167,7 @@ export default class FindWidget extends NoteContextAwareWidget {
             if (isIMEComposing(e.originalEvent as KeyboardEvent)) {
                 return;
             }
-            
+
             if ((e.metaKey || e.ctrlKey) && (e.key === "F" || e.key === "f")) {
                 // If ctrl+f is pressed when the findbox is shown, select the
                 // whole input to find
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 8dbea40b5..acfbfaa03 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -1,6 +1,6 @@
 .note-icon-widget {
     padding-left: 7px;
-    margin-right: 0;
+    margin-inline-end: 0;
     width: 50px;
     height: 50px;
 }
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
index 6393dfb10..35e755c80 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -263,7 +263,7 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
         placeholder={t("ancestor.placeholder")}
       />
 
-      <div style="margin-inline-start: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
+      <div style="margin-inline-start: 10px; margin-inline-end: 10px">{t("ancestor.depth_label")}:</div>
       <FormSelect
         values={options}
         keyProperty="value" titleProperty="label"
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 31c996dd5..c4809c853 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -70,7 +70,7 @@
 .ribbon-button-container {
     display: flex;
     border-bottom: 1px solid var(--main-border-color);
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .ribbon-button-container > * {
@@ -82,7 +82,7 @@
 .ribbon-body {
     border-bottom: 1px solid var(--main-border-color);
     margin-inline-start: 10px;
-    margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
+    margin-inline-end: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
 }
 
 .ribbon-body.active {
@@ -105,7 +105,7 @@
 .basic-properties-widget > * {
     margin-top: 9px;
     margin-bottom: 2px;
-    margin-right: 30px;
+    margin-inline-end: 30px;
 }
 
 .note-type-container,
@@ -309,7 +309,7 @@
 /* #region Owned Attributes */
 .attribute-list {
     margin-inline-start: 7px;
-    margin-right: 7px;
+    margin-inline-end: 7px;
     margin-top: 5px;
     margin-bottom: 2px;
     position: relative;
@@ -359,7 +359,7 @@
 }
 
 .book-properties-widget input[type="checkbox"] {
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .book-properties-widget label {
@@ -446,7 +446,7 @@
     position: relative;
     top: 3px;
     font-size: 120%;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index 0d248fa5a..548dd7cd1 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -247,7 +247,7 @@ const TAB_ROW_TPL = `
     }
     .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
         margin-inline-start: auto;
-        margin-right: auto;
+        margin-inline-end: auto;
     }
     @-moz-keyframes note-tab-was-just-added {
         to {

From 34117fa9ad6da8adadc107c3b46f05b01deb586a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:45:58 +0300
Subject: [PATCH 05/52] feat(client/rtl): handle padding-left

---
 apps/client/src/layouts/mobile_layout.tsx     |  6 ++---
 apps/client/src/stylesheets/print.css         |  2 +-
 apps/client/src/stylesheets/style.css         | 26 +++++++++----------
 apps/client/src/stylesheets/table.css         |  6 ++---
 .../src/stylesheets/theme-next/dialogs.css    |  4 +--
 .../src/stylesheets/theme-next/forms.css      |  2 +-
 .../src/stylesheets/theme-next/notes/text.css |  2 +-
 .../src/stylesheets/theme-next/shell.css      | 26 +++++++++----------
 apps/client/src/stylesheets/tree.css          |  6 ++---
 apps/client/src/widgets/FloatingButtons.css   |  2 +-
 .../attribute_widgets/attribute_detail.ts     |  2 +-
 apps/client/src/widgets/basic_widget.ts       |  4 +--
 .../src/widgets/buttons/bookmark_folder.ts    |  2 +-
 .../src/widgets/collections/board/index.css   |  2 +-
 apps/client/src/widgets/dialogs/export.css    |  4 +--
 apps/client/src/widgets/highlights_list.ts    |  2 +-
 apps/client/src/widgets/llm_chat/ui.ts        |  2 +-
 apps/client/src/widgets/note_icon.css         |  4 +--
 apps/client/src/widgets/ribbon/style.css      |  2 +-
 apps/client/src/widgets/tab_row.ts            |  2 +-
 apps/client/src/widgets/toc.ts                |  8 +++---
 .../widgets/type_widgets/attachment_detail.ts |  2 +-
 .../widgets/type_widgets/attachment_list.ts   |  2 +-
 .../src/widgets/type_widgets/editable_text.ts |  4 +--
 .../type_widgets/options/code_notes.css       |  4 +--
 .../widgets/type_widgets/read_only_text.ts    |  2 +-
 26 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 91953b1a3..6014fa810 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -40,7 +40,7 @@ kbd {
     border: none;
     cursor: pointer;
     font-size: 1.25em;
-    padding-left: 0.5em;
+    padding-inline-start: 0.5em;
     padding-right: 0.5em;
     color: var(--main-text-color);
 }
@@ -59,7 +59,7 @@ const FANCYTREE_CSS = `
     margin-top: 0px;
     overflow-y: auto;
     contain: content;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .fancytree-custom-icon {
@@ -126,7 +126,7 @@ export default class MobileLayout {
                             .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
                             .id("mobile-sidebar-wrapper")
                             .css("max-height", "100%")
-                            .css("padding-left", "0")
+                            .css("padding-inline-start", "0")
                             .css("padding-right", "0")
                             .css("contain", "content")
                             .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
diff --git a/apps/client/src/stylesheets/print.css b/apps/client/src/stylesheets/print.css
index 114a52559..99f9f2a96 100644
--- a/apps/client/src/stylesheets/print.css
+++ b/apps/client/src/stylesheets/print.css
@@ -218,7 +218,7 @@ span[style] {
         --box-vert-offset: calc((1lh - var(--box-size)) / 2);
 
         display: inline-block;
-        padding-left: calc(var(--box-size) + var(--box-text-gap));
+        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
         /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
         background-position: 0 var(--box-vert-offset);
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 5e9b3daf3..ef1207e85 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -634,7 +634,7 @@ pre > button.copy-button:active {
 .full-text-search-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
 }
 
@@ -642,14 +642,14 @@ pre > button.copy-button:active {
     cursor: pointer;
     font-size: 1.3em;
     background: inherit !important;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
 }
 
 .open-external-link-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
     padding-top: 8px;
 }
@@ -657,7 +657,7 @@ pre > button.copy-button:active {
 .go-to-selected-note-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 4px;
+    padding-inline-start: 4px;
     padding-right: 3px;
 }
 
@@ -890,7 +890,7 @@ table.promoted-attributes-in-tooltip th {
 .aa-dropdown-menu .aa-suggestion .text {
     display: inline-block;
     width: calc(100% - 20px);
-    padding-left: 4px;
+    padding-inline-start: 4px;
 }
 
 .aa-dropdown-menu .aa-suggestion .search-result-title {
@@ -1076,7 +1076,7 @@ svg.ck-icon .note-icon {
 }
 
 .help-cards ul {
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 
 .help-cards kbd {
@@ -1153,7 +1153,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 }
 
 .toast.no-title .toast-body {
-    padding-left: 0;
+    padding-inline-start: 0;
     padding-right: 0;
 }
 
@@ -1445,7 +1445,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .area-expander-text {
-    padding-left: 20px;
+    padding-inline-start: 20px;
     padding-right: 20px;
     white-space: nowrap;
 }
@@ -1789,7 +1789,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 #right-pane .card-body ul {
-    padding-left: 25px;
+    padding-inline-start: 25px;
     margin-bottom: 5px;
 }
 
@@ -1966,7 +1966,7 @@ textarea {
 }
 
 body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
-    padding-left: 1em;
+    padding-inline-start: 1em;
 }
 
 #tab-row-left-spacer {
@@ -2049,7 +2049,7 @@ body.zen .title-row {
     display: block !important;
     height: unset !important;
     -webkit-app-region: drag;
-    padding-left: env(titlebar-area-x);
+    padding-inline-start: env(titlebar-area-x);
     padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
 }
 
@@ -2280,7 +2280,7 @@ footer.webview-footer button {
     padding: 1em;
     margin: 1.25em 0;
     position: relative;
-    padding-left: 2.5em;
+    padding-inline-start: 2.5em;
     overflow: hidden;
 }
 
@@ -2338,7 +2338,7 @@ footer.webview-footer button {
 
 .thinking-step {
     margin-bottom: 8px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .thinking-step.observation {
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 1579a6853..c77228a7e 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -90,7 +90,7 @@
 }
 
 .tabulator-row .tabulator-cell input {
-    padding-left: var(--cell-horiz-padding-size) !important;
+    padding-inline-start: var(--cell-horiz-padding-size) !important;
     padding-right: var(--cell-horiz-padding-size) !important;
 }
 
@@ -156,14 +156,14 @@
 /* Align items without children/expander to the ones with. */
 .tabulator-cell[tabulator-field="title"] > span:first-child,         /* 1st level */
 .tabulator-cell[tabulator-field="title"] > div:first-child + span {  /* sub-level */
-    padding-left: 21px;
+    padding-inline-start: 21px;
 }
 
 /* Checkbox cells */
 
 .tabulator .tabulator-cell:has(svg),
 .tabulator .tabulator-cell:has(input[type="checkbox"]) {
-    padding-left: 8px;
+    padding-inline-start: 8px;
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 882e0b942..099c3df61 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -197,7 +197,7 @@ div.tn-tool-dialog {
     border: unset;
     padding-top: var(--timeline-item-top-padding);
     padding-bottom: var(--timeline-item-bottom-padding);
-    padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
+    padding-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
     padding-right: var(--timeline-left-gap);
     color: var(--active-item-text-color);
 }
@@ -392,7 +392,7 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-left: 8px;
+    padding-inline-start: 8px;
 }
 
 /*
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index b548e97d1..9ed3844b0 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -462,7 +462,7 @@ optgroup {
         --box-label-gap: 0.5em;
 
         position: relative;
-        padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
+        padding-inline-start: calc(var(--box-size) + var(--box-label-gap)) !important;
         user-select: none;
     }
 
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 4c4e6cec2..e30099a86 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -492,7 +492,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
     /* Move the label above the text box regardless of the text box state */
     transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important;
     
-    padding-left: 0 !important;
+    padding-inline-start: 0 !important;
     background: transparent;
     font-size: .85em;
     font-weight: 600;
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index cdb9bae09..be0c598ea 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -450,7 +450,7 @@ div.bookmark-folder-widget .note-link:hover {
 }
 
 div.bookmark-folder-widget .note-link a {
-    padding-left: 8px;
+    padding-inline-start: 8px;
     color: var(--menu-text-color);
     cursor: default;
 }
@@ -471,7 +471,7 @@ div.bookmark-folder-widget .note-link .bx {
 
 div.quick-search {
     --padding-top: 8px;
-    --padding-left: 8px;
+    --padding-inline-start: 8px;
     --padding-right: 8px;
     --padding-bottom: 8px;
 
@@ -480,7 +480,7 @@ div.quick-search {
     align-items: center;
     height: unset;
     contain: unset;
-    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-inline-start);
 }
 
 div.quick-search,
@@ -496,7 +496,7 @@ div.quick-search::before {
     position: absolute;
     content: "";
     top: var(--padding-top);
-    left: var(--padding-left);
+    left: var(--padding-inline-start);
     bottom: var(--padding-bottom);
     right: var(--padding-right);
     z-index: 0;
@@ -520,7 +520,7 @@ div.quick-search:focus-within:before {
 }
 
 div.quick-search input {
-    padding-left: 15px !important;
+    padding-inline-start: 15px !important;
     box-shadow: unset !important;
     background: transparent !important;
 }
@@ -631,12 +631,12 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 }
 
 #left-pane .ui-fancytree ul {
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 /* The root element of the tree */
 #left-pane .fancytree-container > li:first-child > span {
-    padding-left: 12px;
+    padding-inline-start: 12px;
 }
 
 #left-pane span.fancytree-node.fancytree-active {
@@ -1237,7 +1237,7 @@ body.mobile .note-title {
     --input-background-color: transparent;
 
     border-radius: 8px;
-    padding-left: 12px;
+    padding-inline-start: 12px;
 }
 
 /* The "Change note icon" button */
@@ -1326,7 +1326,7 @@ div.promoted-attributes-container input {
 
 /* A promoted attribute card */
 div.promoted-attribute-cell {
-    --pa-card-padding-left: 16px;
+    --pa-card-padding-inline-start: 16px;
     --pa-card-padding-right: 2px;
     --input-background-color: transparent;
 
@@ -1335,7 +1335,7 @@ div.promoted-attribute-cell {
     display: inline-flex;
     margin: 0;
     border-radius: 8px;
-    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-left);
+    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-inline-start);
     background: var(--promoted-attribute-card-background-color);
     overflow-y: visible;
 }
@@ -1350,7 +1350,7 @@ div.promoted-attribute-cell {
 /* A promoted attribute card (boolean attribute) */
 div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) {
     /* Checbox attribute, without multiplicity */
-    padding-right: var(--pa-card-padding-left);
+    padding-right: var(--pa-card-padding-inline-start);
 }
 
 div.promoted-attribute-cell > * {
@@ -1408,7 +1408,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
     margin-inline-start: 8px;
-    margin-inline-end: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
+    margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
 }
@@ -1637,7 +1637,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .find-replace-widget .form-check {
-    padding-left: 0;
+    padding-inline-start: 0;
     white-space: nowrap;
 }
 
diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index 00e131936..df7d00bd7 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -1,5 +1,5 @@
 ul.fancytree-container {
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 
 ul.fancytree-container li {
@@ -169,11 +169,11 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
 .ui-fancytree > li > ul {
-    padding-left: 5px;
+    padding-inline-start: 5px;
 }
 
 .ui-fancytree ul {
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 
 span.fancytree-active {
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 56a6c20b0..6106ff9fc 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -151,7 +151,7 @@
 
 .backlink-excerpt {
     border-left: 2px solid var(--main-border-color);
-    padding-left: 10px;
+    padding-inline-start: 10px;
     opacity: 80%;
     font-size: 90%;
 }
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
index 7ce3372b9..f39f43fae 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -36,7 +36,7 @@ const TPL = /*html*/`
         }
 
         .related-notes-list {
-            padding-left: 20px;
+            padding-inline-start: 20px;
             margin-top: 10px;
             margin-bottom: 10px;
         }
diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts
index e33267daf..61499dbda 100644
--- a/apps/client/src/widgets/basic_widget.ts
+++ b/apps/client/src/widgets/basic_widget.ts
@@ -76,7 +76,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
     /**
      * Sets the CSS attribute of the given name to the given value.
      *
-     * @param name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
      * @param value the value of the CSS attribute to set (e.g. `12px`).
      * @returns self for chaining.
      */
@@ -89,7 +89,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
      * Sets the CSS attribute of the given name to the given value, but only if the condition provided is truthy.
      *
      * @param condition `true` in order to apply the CSS, `false` to ignore it.
-     * @param name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
      * @param value the value of the CSS attribute to set (e.g. `12px`).
      * @returns self for chaining.
      */
diff --git a/apps/client/src/widgets/buttons/bookmark_folder.ts b/apps/client/src/widgets/buttons/bookmark_folder.ts
index b41a88ef8..b749a1ab6 100644
--- a/apps/client/src/widgets/buttons/bookmark_folder.ts
+++ b/apps/client/src/widgets/buttons/bookmark_folder.ts
@@ -35,7 +35,7 @@ const DROPDOWN_TPL = `
         }
 
         .bookmark-folder-widget li .note-link {
-            padding-left: 35px;
+            padding-inline-start: 35px;
         }
     </style>
 
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index 318b645ab..1cc663354 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -168,7 +168,7 @@
   right: 4px;
   color: var(--main-text-color);
   background-color: var(--main-background-color);
-  padding-left: 6px;
+  padding-inline-start: 6px;
 }
 
 .board-view-container .board-note.fade-in {
diff --git a/apps/client/src/widgets/dialogs/export.css b/apps/client/src/widgets/dialogs/export.css
index a3916d1be..a0903b06c 100644
--- a/apps/client/src/widgets/dialogs/export.css
+++ b/apps/client/src/widgets/dialogs/export.css
@@ -4,11 +4,11 @@
 }
 
 .export-dialog form .format-choice {
-    padding-left: 40px;
+    padding-inline-start: 40px;
 }
 
 .export-dialog form .opml-versions {
-    padding-left: 60px;
+    padding-inline-start: 60px;
 }
 
 .export-dialog form .form-check-label {
diff --git a/apps/client/src/widgets/highlights_list.ts b/apps/client/src/widgets/highlights_list.ts
index c9843a479..5023facb9 100644
--- a/apps/client/src/widgets/highlights_list.ts
+++ b/apps/client/src/widgets/highlights_list.ts
@@ -24,7 +24,7 @@ const TPL = /*html*/`<div class="highlights-list-widget">
         }
 
         .highlights-list > ol {
-            padding-left: 20px;
+            padding-inline-start: 20px;
         }
 
         .highlights-list li {
diff --git a/apps/client/src/widgets/llm_chat/ui.ts b/apps/client/src/widgets/llm_chat/ui.ts
index a17167840..29bdf8d93 100644
--- a/apps/client/src/widgets/llm_chat/ui.ts
+++ b/apps/client/src/widgets/llm_chat/ui.ts
@@ -9,7 +9,7 @@ import { formatMarkdown, applyHighlighting } from "./utils.js";
 export const TPL = `
 <div class="note-context-chat h-100 w-100 d-flex flex-column">
     <!-- Move validation warning outside the card with better styling -->
-    <div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-left: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
+    <div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-inline-start: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
 
     <div class="note-context-chat-container flex-grow-1 overflow-auto p-3">
         <div class="note-context-chat-messages"></div>
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index acfbfaa03..810438a8a 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -1,5 +1,5 @@
 .note-icon-widget {
-    padding-left: 7px;
+    padding-inline-start: 7px;
     margin-inline-end: 0;
     width: 50px;
     height: 50px;
@@ -36,7 +36,7 @@
 
 .note-icon-widget .filter-row span {
     display: block;
-    padding-left: 15px;
+    padding-inline-start: 15px;
     padding-right: 15px;
     font-weight: bold;
 }
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index c4809c853..f43e8c111 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -49,7 +49,7 @@
 }
 
 .ribbon-tab-title:first-of-type {
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .ribbon-tab-spacer {
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index 548dd7cd1..ce8682d66 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -155,7 +155,7 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
-        padding-left: 2px;
+        padding-inline-start: 2px;
         padding-right: 2px;
     }
 
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index b2858cf71..cf8858171 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -29,13 +29,13 @@ const TPL = /*html*/`<div class="toc-widget">
             contain: none;
             overflow: auto;
             position: relative;
-            padding-left:0px !important;
+            padding-inline-start:0px !important;
         }
 
         .toc ol {
             position: relative;
             overflow: hidden;
-            padding-left: 0px;
+            padding-inline-start: 0px;
             transition: max-height 0.3s ease;
         }
 
@@ -56,7 +56,7 @@ const TPL = /*html*/`<div class="toc-widget">
             position: relative;
             list-style: none;
             align-items: center;
-            padding-left: 7px;
+            padding-inline-start: 7px;
             cursor: pointer;
             text-align: justify;
             word-wrap: break-word;
@@ -84,7 +84,7 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc li {
-            padding-left: calc((var(--toc-depth-level) - 1) * 20px + 4px);
+            padding-inline-start: calc((var(--toc-depth-level) - 1) * 20px + 4px);
         }
 
         .toc li .collapse-button {
diff --git a/apps/client/src/widgets/type_widgets/attachment_detail.ts b/apps/client/src/widgets/type_widgets/attachment_detail.ts
index 9dbfa5210..fe9f750e6 100644
--- a/apps/client/src/widgets/type_widgets/attachment_detail.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_detail.ts
@@ -11,7 +11,7 @@ const TPL = /*html*/`
 <div class="attachment-detail note-detail-printable">
     <style>
         .attachment-detail {
-            padding-left: 15px;
+            padding-inline-start: 15px;
             padding-right: 15px;
             height: 100%;
             display: flex;
diff --git a/apps/client/src/widgets/type_widgets/attachment_list.ts b/apps/client/src/widgets/type_widgets/attachment_list.ts
index aced1223c..8ce13175b 100644
--- a/apps/client/src/widgets/type_widgets/attachment_list.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_list.ts
@@ -9,7 +9,7 @@ const TPL = /*html*/`
 <div class="attachment-list note-detail-printable">
     <style>
         .attachment-list {
-            padding-left: 15px;
+            padding-inline-start: 15px;
             padding-right: 15px;
         }
 
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
index a092ae696..8a2103c1b 100644
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets/editable_text.ts
@@ -21,7 +21,7 @@ const TPL = /*html*/`
     <style>
     .note-detail-editable-text {
         font-family: var(--detail-font-family);
-        padding-left: 14px;
+        padding-inline-start: 14px;
         padding-top: 10px;
         height: 100%;
     }
@@ -32,7 +32,7 @@ const TPL = /*html*/`
     }
 
     body.mobile .note-detail-editable-text {
-        padding-left: 4px;
+        padding-inline-start: 4px;
     }
 
     .note-detail-editable-text a:hover {
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.css b/apps/client/src/widgets/type_widgets/options/code_notes.css
index 7b51f619d..c8f8ad9fd 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.css
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.css
@@ -2,7 +2,7 @@
 .options-mime-types {
     list-style-type: none;
     column-width: 250px;
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 
 .options-mime-types > section {
@@ -11,6 +11,6 @@
 }
 
 .options-mime-types ul {
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 /* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/read_only_text.ts b/apps/client/src/widgets/type_widgets/read_only_text.ts
index 59f99af33..51c83cd5b 100644
--- a/apps/client/src/widgets/type_widgets/read_only_text.ts
+++ b/apps/client/src/widgets/type_widgets/read_only_text.ts
@@ -41,7 +41,7 @@ const TPL = /*html*/`
     }
 
     body.mobile .note-detail-readonly-text {
-        padding-left: 10px;
+        padding-inline-start: 10px;
     }
 
     .note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {

From 6faccd3b1438679319f474e68658cb4d796779ad Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:46:10 +0300
Subject: [PATCH 06/52] feat(client/rtl): handle padding-right

---
 apps/client/src/layouts/mobile_layout.tsx     |  4 ++--
 apps/client/src/stylesheets/style.css         | 20 ++++++++--------
 apps/client/src/stylesheets/table.css         |  2 +-
 .../src/stylesheets/theme-next/dialogs.css    |  4 ++--
 .../src/stylesheets/theme-next/forms.css      |  6 ++---
 .../src/stylesheets/theme-next/notes/text.css |  4 ++--
 .../src/stylesheets/theme-next/shell.css      | 24 +++++++++----------
 .../widgets/collections/calendar/index.css    |  4 ++--
 .../collections/legacy/ListOrGridView.css     |  2 +-
 apps/client/src/widgets/note_icon.css         |  4 ++--
 apps/client/src/widgets/sql_table_schemas.css |  2 +-
 apps/client/src/widgets/tab_row.ts            |  4 ++--
 .../widgets/type_widgets/attachment_detail.ts |  2 +-
 .../widgets/type_widgets/attachment_list.ts   |  2 +-
 14 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 6014fa810..3d21b9405 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -41,7 +41,7 @@ kbd {
     cursor: pointer;
     font-size: 1.25em;
     padding-inline-start: 0.5em;
-    padding-right: 0.5em;
+    padding-inline-end: 0.5em;
     color: var(--main-text-color);
 }
 .quick-search {
@@ -127,7 +127,7 @@ export default class MobileLayout {
                             .id("mobile-sidebar-wrapper")
                             .css("max-height", "100%")
                             .css("padding-inline-start", "0")
-                            .css("padding-right", "0")
+                            .css("padding-inline-end", "0")
                             .css("contain", "content")
                             .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
                     )
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index ef1207e85..ccf8974eb 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -608,7 +608,7 @@ pre > button.copy-button {
 }
 
 :root pre:has(> button.copy-button) {
-    padding-right: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2));
+    padding-inline-end: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2));
 }
 
 pre > button.copy-button:hover {
@@ -635,7 +635,7 @@ pre > button.copy-button:active {
     cursor: pointer;
     font-size: 1.3em;
     padding-inline-start: 5px;
-    padding-right: 5px;
+    padding-inline-end: 5px;
 }
 
 .input-clearer-button {
@@ -643,14 +643,14 @@ pre > button.copy-button:active {
     font-size: 1.3em;
     background: inherit !important;
     padding-inline-start: 5px;
-    padding-right: 5px;
+    padding-inline-end: 5px;
 }
 
 .open-external-link-button {
     cursor: pointer;
     font-size: 1.3em;
     padding-inline-start: 5px;
-    padding-right: 5px;
+    padding-inline-end: 5px;
     padding-top: 8px;
 }
 
@@ -658,7 +658,7 @@ pre > button.copy-button:active {
     cursor: pointer;
     font-size: 1.3em;
     padding-inline-start: 4px;
-    padding-right: 3px;
+    padding-inline-end: 3px;
 }
 
 .go-to-selected-note-button.disabled,
@@ -1154,7 +1154,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 .toast.no-title .toast-body {
     padding-inline-start: 0;
-    padding-right: 0;
+    padding-inline-end: 0;
 }
 
 .toast.no-title .toast-header {
@@ -1446,7 +1446,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 .area-expander-text {
     padding-inline-start: 20px;
-    padding-right: 20px;
+    padding-inline-end: 20px;
     white-space: nowrap;
 }
 
@@ -1975,7 +1975,7 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
 }
 
 .tab-row-widget {
-    padding-right: calc(100vw - env(titlebar-area-width, 100vw));
+    padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }
 
 .tab-row-container .toggle-button {
@@ -2050,7 +2050,7 @@ body.zen .title-row {
     height: unset !important;
     -webkit-app-region: drag;
     padding-inline-start: env(titlebar-area-x);
-    padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
+    padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
 }
 
 body.zen .floating-buttons {
@@ -2217,7 +2217,7 @@ footer.webview-footer button {
 .chat-input {
     width: 100%;
     resize: none;
-    padding-right: 40px;
+    padding-inline-end: 40px;
 }
 
 .chat-buttons {
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index c77228a7e..4285194e7 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -91,7 +91,7 @@
 
 .tabulator-row .tabulator-cell input {
     padding-inline-start: var(--cell-horiz-padding-size) !important;
-    padding-right: var(--cell-horiz-padding-size) !important;
+    padding-inline-end: var(--cell-horiz-padding-size) !important;
 }
 
 .tabulator-row {
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 099c3df61..74c38557b 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -198,7 +198,7 @@ div.tn-tool-dialog {
     padding-top: var(--timeline-item-top-padding);
     padding-bottom: var(--timeline-item-bottom-padding);
     padding-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
-    padding-right: var(--timeline-left-gap);
+    padding-inline-end: var(--timeline-left-gap);
     color: var(--active-item-text-color);
 }
 
@@ -401,7 +401,7 @@ div.tn-tool-dialog {
 
 /* Labels */
 .attr-edit-table th {
-    padding-right: 12px;
+    padding-inline-end: 12px;
     font-weight: normal;
     white-space: nowrap;
 }
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index 9ed3844b0..c7c222880 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -62,7 +62,7 @@ button.btn.btn-secondary span.bx,
 button.btn.btn-sm span.bx,
 button.btn.btn-success span.bx {
     color: var(--cmd-button-icon-color);
-    padding-right: 0.35em;
+    padding-inline-end: 0.35em;
     font-size: 1.2em;
 }
 
@@ -237,7 +237,7 @@ input::selection,
     outline-offset: 6px;
     background: var(--input-background-color);
     border-radius: 6px;
-    padding-right: 8px;
+    padding-inline-end: 8px;
     color: var(--quick-search-color);
     flex-wrap: nowrap;
 }
@@ -357,7 +357,7 @@ select.form-control,
 
     outline: 3px solid transparent;
     outline-offset: 6px;
-    padding-right: calc(15px + 1.5rem);
+    padding-inline-end: calc(15px + 1.5rem);
     background: var(--input-background-color) var(--dropdown-arrow);
     color: var(--input-text-color);
     border: unset;
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index e30099a86..52aba262e 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -354,7 +354,7 @@
     align-items: center;
     width: 100%;
     margin: 4px;
-    padding-right: 2em;
+    padding-inline-end: 2em;
     border: 1px solid var(--accent);
     border-radius: 6px;
 }
@@ -556,7 +556,7 @@ pre button.copy-button.icon-action {
 }
 
 :root pre:has(> button.copy-button) {
-    padding-right: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2));
+    padding-inline-end: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2));
 }
 
 html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index be0c598ea..48f8bf016 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -472,7 +472,7 @@ div.bookmark-folder-widget .note-link .bx {
 div.quick-search {
     --padding-top: 8px;
     --padding-inline-start: 8px;
-    --padding-right: 8px;
+    --padding-inline-end: 8px;
     --padding-bottom: 8px;
 
     position: relative;
@@ -480,7 +480,7 @@ div.quick-search {
     align-items: center;
     height: unset;
     contain: unset;
-    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-inline-start);
+    padding: var(--padding-top) var(--padding-inline-end) var(--padding-bottom) var(--padding-inline-start);
 }
 
 div.quick-search,
@@ -498,7 +498,7 @@ div.quick-search::before {
     top: var(--padding-top);
     left: var(--padding-inline-start);
     bottom: var(--padding-bottom);
-    right: var(--padding-right);
+    right: var(--padding-inline-end);
     z-index: 0;
     border: 2px solid transparent;
     border-radius: 6px;
@@ -773,7 +773,7 @@ body.mobile .fancytree-node > span {
     overflow: hidden;
     border: 1px solid transparent;
     padding: var(--tree-actions-toolbar-padding-size);
-    padding-right: var(--tree-actions-toolbar-collapsed-width);
+    padding-inline-end: var(--tree-actions-toolbar-collapsed-width);
     background: transparent;
     transition:
         max-width 400ms ease-out,
@@ -1056,7 +1056,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
 }
 
 :root .tab-row-widget .note-tab .note-tab-icon {
-    padding-right: 5px; /* The gap between the icon and the title */
+    padding-inline-end: 5px; /* The gap between the icon and the title */
 }
 
 .tab-row-widget .note-tab[active] .note-tab-icon {
@@ -1230,7 +1230,7 @@ body.mobile .note-title {
 
 .title-row {
     /* Aligns the "Create new split" button with the note menu button (the three dots button) */
-    padding-right: 3px;
+    padding-inline-end: 3px;
 }
 
 .note-title-widget input {
@@ -1327,7 +1327,7 @@ div.promoted-attributes-container input {
 /* A promoted attribute card */
 div.promoted-attribute-cell {
     --pa-card-padding-inline-start: 16px;
-    --pa-card-padding-right: 2px;
+    --pa-card-padding-inline-end: 2px;
     --input-background-color: transparent;
 
     box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color);
@@ -1335,7 +1335,7 @@ div.promoted-attribute-cell {
     display: inline-flex;
     margin: 0;
     border-radius: 8px;
-    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-inline-start);
+    padding: 2px var(--pa-card-padding-inline-end) 2px var(--pa-card-padding-inline-start);
     background: var(--promoted-attribute-card-background-color);
     overflow-y: visible;
 }
@@ -1350,7 +1350,7 @@ div.promoted-attribute-cell {
 /* A promoted attribute card (boolean attribute) */
 div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) {
     /* Checbox attribute, without multiplicity */
-    padding-right: var(--pa-card-padding-inline-start);
+    padding-inline-end: var(--pa-card-padding-inline-start);
 }
 
 div.promoted-attribute-cell > * {
@@ -1408,7 +1408,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
     margin-inline-start: 8px;
-    margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-right));
+    margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-inline-end));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
 }
@@ -1662,7 +1662,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 
     .find-widget-box,
     .replace-widget-box {
-        padding-right: 3em !important;
+        padding-inline-end: 3em !important;
     }
 
     .find-widget-close-button {
@@ -1743,7 +1743,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 #right-pane .toc li,
 #right-pane .highlights-list li {
     padding-top: 2px;
-    padding-right: 8px;
+    padding-inline-end: 8px;
     padding-bottom: 2px;
     border-radius: 4px;
     text-align: unset;
diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
index 2255cc1d0..dd7301a47 100644
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -67,10 +67,10 @@
 }
 
 body.desktop:not(.zen) .calendar-view .calendar-header {
-    padding-right: 5em;
+    padding-inline-end: 5em;
 }
 
 .search-result-widget-content .calendar-view .calendar-header {
-    padding-right: unset !important;
+    padding-inline-end: unset !important;
 }
 /* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 784dcfa49..3a62b85b3 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -57,7 +57,7 @@
 .note-book-header .note-icon {
     font-size: 100%;
     display: inline-block;
-    padding-right: 7px;
+    padding-inline-end: 7px;
     position: relative;
 }
 
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 810438a8a..a05be824d 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -29,7 +29,7 @@
 .note-icon-widget .filter-row {
     padding-top: 10px;
     padding-bottom: 10px;
-    padding-right: 20px;
+    padding-inline-end: 20px;
     display: flex;
     align-items: baseline;
 }
@@ -37,7 +37,7 @@
 .note-icon-widget .filter-row span {
     display: block;
     padding-inline-start: 15px;
-    padding-right: 15px;
+    padding-inline-end: 15px;
     font-weight: bold;
 }
 
diff --git a/apps/client/src/widgets/sql_table_schemas.css b/apps/client/src/widgets/sql_table_schemas.css
index d13a71dfd..d6c1c8f95 100644
--- a/apps/client/src/widgets/sql_table_schemas.css
+++ b/apps/client/src/widgets/sql_table_schemas.css
@@ -1,6 +1,6 @@
 .sql-table-schemas-widget {
     padding: 12px;
-    padding-right: 10%;
+    padding-inline-end: 10%;
     contain: none !important;
 }
 
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index ce8682d66..84c96378b 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -156,7 +156,7 @@ const TAB_ROW_TPL = `
 
     .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
         padding-inline-start: 2px;
-        padding-right: 2px;
+        padding-inline-end: 2px;
     }
 
     .tab-row-widget .note-tab .note-tab-title {
@@ -168,7 +168,7 @@ const TAB_ROW_TPL = `
 
     .tab-row-widget .note-tab .note-tab-icon {
         position: relative;
-        padding-right: 3px;
+        padding-inline-end: 3px;
     }
 
     .tab-row-widget .note-tab[is-small] .note-tab-title {
diff --git a/apps/client/src/widgets/type_widgets/attachment_detail.ts b/apps/client/src/widgets/type_widgets/attachment_detail.ts
index fe9f750e6..a359c82c4 100644
--- a/apps/client/src/widgets/type_widgets/attachment_detail.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_detail.ts
@@ -12,7 +12,7 @@ const TPL = /*html*/`
     <style>
         .attachment-detail {
             padding-inline-start: 15px;
-            padding-right: 15px;
+            padding-inline-end: 15px;
             height: 100%;
             display: flex;
             flex-direction: column;
diff --git a/apps/client/src/widgets/type_widgets/attachment_list.ts b/apps/client/src/widgets/type_widgets/attachment_list.ts
index 8ce13175b..81d454486 100644
--- a/apps/client/src/widgets/type_widgets/attachment_list.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_list.ts
@@ -10,7 +10,7 @@ const TPL = /*html*/`
     <style>
         .attachment-list {
             padding-inline-start: 15px;
-            padding-right: 15px;
+            padding-inline-end: 15px;
         }
 
         .attachment-list .links-wrapper {

From 1b1bceebfe72d8541dcf03bf8a91fe7aa3f96b07 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:46:59 +0300
Subject: [PATCH 07/52] feat(client/rtl): handle border-left

---
 apps/client/src/stylesheets/calendar.css       |  2 +-
 apps/client/src/stylesheets/style.css          | 18 +++++++++---------
 .../src/stylesheets/theme-next/notes/text.css  |  2 +-
 apps/client/src/widgets/FloatingButtons.css    |  2 +-
 apps/client/src/widgets/icon_list.ts           |  4 ++--
 apps/client/src/widgets/llm_chat/ui.ts         |  2 +-
 apps/client/src/widgets/toc.ts                 |  2 +-
 .../type_widgets/abstract_split_type_widget.ts |  2 +-
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/stylesheets/calendar.css b/apps/client/src/stylesheets/calendar.css
index a3ad89c34..eddcbbc28 100644
--- a/apps/client/src/stylesheets/calendar.css
+++ b/apps/client/src/stylesheets/calendar.css
@@ -60,7 +60,7 @@
     appearance: none;
     text-align: center;
     border: 0;
-    border-left: unset;
+    border-inline-start: unset;
     background-color: var(--menu-background-color);
     font-weight: bold;
     outline: 0;
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index ccf8974eb..185728b81 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -704,7 +704,7 @@ table.promoted-attributes-in-tooltip th {
     border-top-color: var(--main-border-color) !important;
 }
 .bs-tooltip-left .tooltip-arrow::before {
-    border-left-color: var(--main-border-color) !important;
+    border-inline-start-color: var(--main-border-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::before {
     border-right-color: var(--main-border-color) !important;
@@ -717,7 +717,7 @@ table.promoted-attributes-in-tooltip th {
     border-top-color: var(--tooltip-background-color) !important;
 }
 .bs-tooltip-left .tooltip-arrow::after {
-    border-left-color: var(--tooltip-background-color) !important;
+    border-inline-start-color: var(--tooltip-background-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::after {
     border-right-color: var(--tooltip-background-color) !important;
@@ -727,7 +727,7 @@ table.promoted-attributes-in-tooltip th {
 .bs-tooltip-left .tooltip-arrow::before {
     left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-left-color: var(--main-border-color) !important;
+    border-inline-start-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
@@ -755,7 +755,7 @@ table.promoted-attributes-in-tooltip th {
 .bs-tooltip-left .tooltip-arrow::after {
     left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-left-color: var(--tooltip-background-color) !important;
+    border-inline-start-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::after,
@@ -2330,7 +2330,7 @@ footer.webview-footer button {
 /* Style for thinking process in chat responses */
 .thinking-process {
     background-color: rgba(0, 0, 0, 0.05);
-    border-left: 3px solid var(--main-text-color);
+    border-inline-start: 3px solid var(--main-text-color);
     padding: 10px;
     margin: 10px 0;
     border-radius: 4px;
@@ -2342,19 +2342,19 @@ footer.webview-footer button {
 }
 
 .thinking-step.observation {
-    border-left: 2px solid #69c7ff;
+    border-inline-start: 2px solid #69c7ff;
 }
 
 .thinking-step.hypothesis {
-    border-left: 2px solid #9839f7;
+    border-inline-start: 2px solid #9839f7;
 }
 
 .thinking-step.evidence {
-    border-left: 2px solid #40c025;
+    border-inline-start: 2px solid #40c025;
 }
 
 .thinking-step.conclusion {
-    border-left: 2px solid #e2aa03;
+    border-inline-start: 2px solid #e2aa03;
     font-weight: bold;
 }
 
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 52aba262e..b13b5bb17 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -255,7 +255,7 @@
 
 :root .ck.ck-toolbar .ck.ck-toolbar__separator {
     background: transparent;
-    border-left: 1px solid var(--ck-color-toolbar-border);
+    border-inline-start: 1px solid var(--ck-color-toolbar-border);
 }
 
 /* The last separator of the toolbar */
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 6106ff9fc..736209051 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -150,7 +150,7 @@
 }
 
 .backlink-excerpt {
-    border-left: 2px solid var(--main-border-color);
+    border-inline-start: 2px solid var(--main-border-color);
     padding-inline-start: 10px;
     opacity: 80%;
     font-size: 90%;
diff --git a/apps/client/src/widgets/icon_list.ts b/apps/client/src/widgets/icon_list.ts
index 6282d8b60..34d5604d1 100644
--- a/apps/client/src/widgets/icon_list.ts
+++ b/apps/client/src/widgets/icon_list.ts
@@ -2096,8 +2096,8 @@ const icons: Icon[] = [
         type_of_icon: "REGULAR"
     },
     {
-        name: "border-left",
-        slug: "border-left-regular",
+        name: "border-inline-start",
+        slug: "border-inline-start-regular",
         category_id: 111,
         type_of_icon: "REGULAR"
     },
diff --git a/apps/client/src/widgets/llm_chat/ui.ts b/apps/client/src/widgets/llm_chat/ui.ts
index 29bdf8d93..15d4802ca 100644
--- a/apps/client/src/widgets/llm_chat/ui.ts
+++ b/apps/client/src/widgets/llm_chat/ui.ts
@@ -9,7 +9,7 @@ import { formatMarkdown, applyHighlighting } from "./utils.js";
 export const TPL = `
 <div class="note-context-chat h-100 w-100 d-flex flex-column">
     <!-- Move validation warning outside the card with better styling -->
-    <div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-inline-start: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
+    <div class="provider-validation-warning alert alert-warning m-2 border-inline-start border-warning" style="display: none; padding-inline-start: 15px; border-inline-start: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
 
     <div class="note-context-chat-container flex-grow-1 overflow-auto p-3">
         <div class="note-context-chat-messages"></div>
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index cf8858171..b4a61ac68 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -47,7 +47,7 @@ const TPL = /*html*/`<div class="toc-widget">
             content: "";
             position: absolute;
             height: 100%;
-            border-left: 1px solid var(--main-border-color);
+            border-inline-start: 1px solid var(--main-border-color);
             z-index: 10;
         }
 
diff --git a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
index 684aea157..563f7671b 100644
--- a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
@@ -63,7 +63,7 @@ const TPL = /*html*/`\
         /* Horizontal layout */
 
         .note-detail-split.split-horizontal > .note-detail-split-preview-col {
-            border-left: 1px solid var(--main-border-color);
+            border-inline-start: 1px solid var(--main-border-color);
         }
 
         .note-detail-split.split-horizontal > .note-detail-split-editor-col,

From a8e44afd6d62335fd4590a77222884ad62f3afef Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:47:27 +0300
Subject: [PATCH 08/52] feat(client/rtl): handle border-right

---
 apps/client/src/stylesheets/style.css               | 12 ++++++------
 apps/client/src/stylesheets/table.css               |  4 ++--
 apps/client/src/stylesheets/theme-next/shell.css    |  4 ++--
 apps/client/src/widgets/collections/table/index.css |  2 +-
 apps/client/src/widgets/icon_list.ts                |  4 ++--
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 185728b81..2528b1dfe 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -504,7 +504,7 @@ body #context-menu-container .dropdown-item > span {
 
 body .cm-editor .cm-gutters {
     background-color: inherit !important;
-    border-right: none;
+    border-inline-end: none;
 }
 
 body .cm-editor .cm-placeholder {
@@ -671,7 +671,7 @@ pre > button.copy-button:active {
 
 .note-autocomplete-input {
     /* this is for seamless integration of "input clearer" button */
-    border-right: 0;
+    border-inline-end: 0;
 }
 
 table.promoted-attributes-in-tooltip {
@@ -707,7 +707,7 @@ table.promoted-attributes-in-tooltip th {
     border-inline-start-color: var(--main-border-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::before {
-    border-right-color: var(--main-border-color) !important;
+    border-inline-end-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-bottom .tooltip-arrow::after {
@@ -720,7 +720,7 @@ table.promoted-attributes-in-tooltip th {
     border-inline-start-color: var(--tooltip-background-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::after {
-    border-right-color: var(--tooltip-background-color) !important;
+    border-inline-end-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
@@ -741,7 +741,7 @@ table.promoted-attributes-in-tooltip th {
 .bs-tooltip-right .tooltip-arrow::before {
     right: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
-    border-right-color: var(--main-border-color) !important;
+    border-inline-end-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
@@ -769,7 +769,7 @@ table.promoted-attributes-in-tooltip th {
 .bs-tooltip-right .tooltip-arrow::after {
     right: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
-    border-right-color: var(--tooltip-background-color) !important;
+    border-inline-end-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::after,
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 4285194e7..11e401fcb 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -73,7 +73,7 @@
 .tabulator div.tabulator-header .tabulator-col,
 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
     background: var(--col-header-background-color);
-    border-right: var(--col-header-separator-border);
+    border-inline-end: var(--col-header-separator-border);
 }
 
 /* Table body */
@@ -122,7 +122,7 @@
 
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
 .tabulator-row .tabulator-cell {
-    border-right-color: transparent;
+    border-inline-end-color: transparent;
 }
 
 .tabulator-row .tabulator-cell:not(.tabulator-editable) {
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 48f8bf016..1658582bc 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -69,7 +69,7 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container
 
 /* Add a border to the vertical launch bar if collapsed. */
 body.layout-vertical #horizontal-main-container.left-pane-hidden #launcher-pane.vertical {
-    border-right: 2px solid var(--left-pane-collapsed-border-color);
+    border-inline-end: 2px solid var(--left-pane-collapsed-border-color);
 }
 
 body.background-effects.zen #root-widget {
@@ -699,7 +699,7 @@ body.mobile .fancytree-node > span {
     body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper {
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
-        border-right: 1px solid var(--subtle-border-color);
+        border-inline-end: 1px solid var(--subtle-border-color);
     }
 }
 
diff --git a/apps/client/src/widgets/collections/table/index.css b/apps/client/src/widgets/collections/table/index.css
index 48249b0c9..cb082a337 100644
--- a/apps/client/src/widgets/collections/table/index.css
+++ b/apps/client/src/widgets/collections/table/index.css
@@ -33,7 +33,7 @@
 
 .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
-    border-right-width: 1px;
+    border-inline-end-width: 1px;
 }
 
 .tabulator .tabulator-row.archived {
diff --git a/apps/client/src/widgets/icon_list.ts b/apps/client/src/widgets/icon_list.ts
index 34d5604d1..a152e9a34 100644
--- a/apps/client/src/widgets/icon_list.ts
+++ b/apps/client/src/widgets/icon_list.ts
@@ -2090,8 +2090,8 @@ const icons: Icon[] = [
         term: ["keypad"]
     },
     {
-        name: "border-right",
-        slug: "border-right-regular",
+        name: "border-inline-end",
+        slug: "border-inline-end-regular",
         category_id: 111,
         type_of_icon: "REGULAR"
     },

From db1bcfda4559e1032c559a1cb3bdfda3e72339f3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:50:54 +0300
Subject: [PATCH 09/52] feat(client/rtl): handle left

---
 apps/client/src/menus/context_menu.ts         |  6 +--
 apps/client/src/stylesheets/llm_chat.css      |  6 +--
 apps/client/src/stylesheets/print.css         |  2 +-
 apps/client/src/stylesheets/style.css         | 26 +++++------
 .../src/stylesheets/theme-next/base.css       |  6 +--
 .../src/stylesheets/theme-next/dialogs.css    |  4 +-
 .../src/stylesheets/theme-next/forms.css      |  4 +-
 .../src/stylesheets/theme-next/notes/text.css |  6 +--
 .../src/stylesheets/theme-next/shell.css      | 24 +++++-----
 apps/client/src/widgets/FloatingButtons.css   |  2 +-
 apps/client/src/widgets/close_zen_button.css  |  2 +-
 .../widgets/collections/calendar/index.css    |  2 +-
 .../src/widgets/collections/geomap/index.css  |  6 +--
 .../src/widgets/collections/table/index.css   |  4 +-
 .../src/widgets/dialogs/popup_editor.ts       |  2 +-
 .../client/src/widgets/promoted_attributes.ts |  2 +-
 apps/client/src/widgets/quick_search.ts       | 44 +++++++++----------
 apps/client/src/widgets/react/FormToggle.css  |  4 +-
 apps/client/src/widgets/sync_status.ts        |  2 +-
 apps/client/src/widgets/toc.ts                |  2 +-
 .../ckeditor/mobile_editor_toolbar.css        |  4 +-
 21 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/apps/client/src/menus/context_menu.ts b/apps/client/src/menus/context_menu.ts
index 574d3091c..7b8ded20e 100644
--- a/apps/client/src/menus/context_menu.ts
+++ b/apps/client/src/menus/context_menu.ts
@@ -151,7 +151,7 @@ class ContextMenu {
             .css({
                 display: "block",
                 top: top,
-                left: left
+                "inset-inline-start": left
             })
             .addClass("show");
     }
@@ -187,7 +187,7 @@ class ContextMenu {
             }
 
             // Create a new group to avoid column breaks before and after the seaparator / header.
-            // This is a workaround for Firefox not supporting break-before / break-after: avoid 
+            // This is a workaround for Firefox not supporting break-before / break-after: avoid
             // for columns.
             if (shouldStartNewGroup) {
                 $group = $("<div class='dropdown-no-break'>");
@@ -313,7 +313,7 @@ class ContextMenu {
                 }
 
                 $group.append($item);
-                
+
                 // After adding a menu item, if the previous item was a separator or header,
                 // reset the group so that the next item will be appended directly to the parent.
                 if (shouldResetGroup) {
diff --git a/apps/client/src/stylesheets/llm_chat.css b/apps/client/src/stylesheets/llm_chat.css
index 9199d44c7..5bb4ecd1b 100644
--- a/apps/client/src/stylesheets/llm_chat.css
+++ b/apps/client/src/stylesheets/llm_chat.css
@@ -299,7 +299,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
+    inset-inline-start: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
@@ -406,10 +406,10 @@
 
 @keyframes shimmer {
     0% {
-        left: -100%;
+        inset-inline-start: -100%;
     }
     100% {
-        left: 100%;
+        inset-inline-start: 100%;
     }
 }
 
diff --git a/apps/client/src/stylesheets/print.css b/apps/client/src/stylesheets/print.css
index 99f9f2a96..842570bde 100644
--- a/apps/client/src/stylesheets/print.css
+++ b/apps/client/src/stylesheets/print.css
@@ -281,7 +281,7 @@ span[style] {
     position: absolute;
 
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
 }
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 2528b1dfe..670b3a904 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -725,7 +725,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
 .bs-tooltip-left .tooltip-arrow::before {
-    left: -1px;
+    inset-inline-start: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
     border-inline-start-color: var(--main-border-color) !important;
 }
@@ -753,7 +753,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after,
 .bs-tooltip-left .tooltip-arrow::after {
-    left: -1px;
+    inset-inline-start: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
     border-inline-start-color: var(--tooltip-background-color) !important;
 }
@@ -1274,7 +1274,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 #context-menu-cover.show {
     position: fixed;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     bottom: 0;
     z-index: 1000;
@@ -1288,7 +1288,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 body.mobile #context-menu-container.mobile-bottom-menu {
     position: fixed !important;
-    left: 0 !important;
+    inset-inline-start: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     top: unset !important;
@@ -1339,7 +1339,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
 
 .dropdown-submenu > .dropdown-menu {
     top: 0;
-    left: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
+    inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
     margin-top: -10px;
     min-width: 15rem;
     /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */
@@ -1348,7 +1348,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
 }
 
 body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
-    left: calc(-100% + 10px);
+    inset-inline-start: calc(-100% + 10px);
 }
 
 .right-dropdown-widget {
@@ -1533,7 +1533,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed !important;
         bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
         top: unset !important;
-        left: 0 !important;
+        inset-inline-start: 0 !important;
         right: 0 !important;
         transform: unset !important;
     }
@@ -1541,7 +1541,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     #mobile-sidebar-container {
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         right: 0;
         bottom: 0;
         z-index: 1000;
@@ -1557,7 +1557,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     #mobile-sidebar-wrapper {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 85vw;
         padding-top: env(safe-area-inset-top);
@@ -1589,7 +1589,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     body.mobile .modal-dialog {
         position: fixed;
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         right: 0;
         margin: 0 !important;
         max-height: 85vh;        
@@ -2293,7 +2293,7 @@ footer.webview-footer button {
     font-family: boxicons !important;
     position: absolute;
     top: 1em;
-    left: 1em;
+    inset-inline-start: 1em;
 }
 
 .admonition.note { --accent-color: var(--admonition-note-accent-color); }
@@ -2369,12 +2369,12 @@ footer.webview-footer button {
 
 .content-floating-buttons.top-left {
     top: 10px;
-    left: 10px;
+    inset-inline-start: 10px;
 }
 
 .content-floating-buttons.bottom-left {
     bottom: 10px;
-    left: 10px;
+    inset-inline-start: 10px;
 }
 
 .content-floating-buttons.bottom-right {
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index bcadc3517..e1a14df89 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -120,7 +120,7 @@ body.desktop .dropdown-menu::before,
     border-radius: var(--dropdown-border-radius);
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     bottom: 0;
     z-index: -1;
@@ -224,7 +224,7 @@ html body .dropdown-item[disabled] {
     position: absolute;
     content: "";
     top: -1px;
-    left: calc(0px - var(--menu-padding-size));
+    inset-inline-start: calc(0px - var(--menu-padding-size));
     right: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
@@ -264,7 +264,7 @@ html body .dropdown-item[disabled] {
     content: "";
     position: absolute;
     bottom: 8px;
-    left: calc(0px - var(--menu-padding-size));
+    inset-inline-start: calc(0px - var(--menu-padding-size));
     right: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 74c38557b..c03fc98c7 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -259,7 +259,7 @@ div.tn-tool-dialog {
     position: absolute;
     content: "";
     top: var(--connector-top, 0);
-    left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
+    inset-inline-start: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
     bottom: var(--connector-bottom, 0);
     width: var(--timeline-connector-size);
     border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
@@ -291,7 +291,7 @@ div.tn-tool-dialog {
     position: absolute;
     content: "";
     top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
-    left: var(--timeline-left-gap);
+    inset-inline-start: var(--timeline-left-gap);
     width: var(--timeline-bullet-size);
     height: var(--timeline-bullet-size);
     border-radius: 50%;
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index c7c222880..963476578 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -471,7 +471,7 @@ optgroup {
     label.tn-checkbox > input[type="checkbox"] {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: var(--box-size);
         height: 100%;
         margin: unset;
@@ -485,7 +485,7 @@ optgroup {
         content: "";
         position: absolute;
         top: 50%;
-        left: 0;
+        inset-inline-start: 0;
         translate: 0 -50%;
         width: var(--box-size);
         height: var(--box-size);
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index b13b5bb17..0a123d894 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -119,7 +119,7 @@
     top: var(--negative-padding);
     right: var(--negative-padding);
     bottom: var(--negative-padding);
-    left: var(--negative-padding);
+    inset-inline-start: var(--negative-padding);
     border-radius: var(--dropdown-border-radius);
     backdrop-filter: var(--dropdown-backdrop-filter);
     z-index: -1;
@@ -233,7 +233,7 @@
     position: absolute;
     top: 0;
     bottom: var(--negative-padding);
-    left: var(--negative-padding);
+    inset-inline-start: var(--negative-padding);
     right: var(--negative-padding);
     border-top: 1px solid var(--ck-editor-popup-border-color);
     background: var(--menu-section-background-color);
@@ -615,7 +615,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content blockquote:before {
     content: "“";
-    left: 0.2em;
+    inset-inline-start: 0.2em;
 }
 
 .ck-content blockquote:after {
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 1658582bc..308fc2cdb 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -402,7 +402,7 @@ body.layout-horizontal > .horizontal {
     top: var(--vertical-margin);
     right: var(--horiz-margin);
     bottom: var(--vertical-margin);
-    left: var(--horiz-margin);
+    inset-inline-start: var(--horiz-margin);
     border-radius: 6px;
     background: var(--calendar-day-highlight-background);
     z-index: -1;
@@ -496,7 +496,7 @@ div.quick-search::before {
     position: absolute;
     content: "";
     top: var(--padding-top);
-    left: var(--padding-inline-start);
+    inset-inline-start: var(--padding-inline-start);
     bottom: var(--padding-bottom);
     right: var(--padding-inline-end);
     z-index: 0;
@@ -658,7 +658,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     position: absolute;
     content: "";
     top: var(--left-pane-item-selected-shadow-size);
-    left: var(--left-pane-item-selected-shadow-size);
+    inset-inline-start: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
     right: var(--left-pane-item-selected-shadow-size);
     background: var(--left-pane-item-selected-background) !important;
@@ -906,7 +906,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu
     content: "";
     position: absolute;
     bottom: 0;
-    left: -10px;
+    inset-inline-start: -10px;
     right: -10px;
     top: 32px;
     height: 1px;
@@ -918,12 +918,12 @@ body.electron.background-effects.layout-horizontal .tab-row-container .tab-scrol
     position: relative;
 }
 
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-left:after,
+body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after,
 body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after {
     content: "";
     position: absolute;
     bottom: 0;
-    left: 0px;
+    inset-inline-start: 0px;
     right: 0px;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -933,7 +933,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     content: "";
     position: absolute;
     bottom: 0;
-    left: -32768px;
+    inset-inline-start: -32768px;
     top: var(--tab-height);
     right: calc(100% - 1px);
     height: 1px;
@@ -944,7 +944,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     content: "";
     position: absolute;
     bottom: 0;
-    left: 100%;
+    inset-inline-start: 100%;
     top: var(--tab-height);
     right: 0;
     width: 100vw;
@@ -956,7 +956,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-new-
     content: "";
     position: absolute;
     bottom: 0;
-    left: -4px;
+    inset-inline-start: -4px;
     top: calc(var(--tab-height), -1);
     right: 0;
     width: 100vw;
@@ -1045,7 +1045,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     content: "";
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     height: 3px;
     background-color: var(--workspace-tab-background-color);
@@ -1114,7 +1114,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     position: absolute;
     content: "";
     top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
-    left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
+    inset-inline-start: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
     width: var(--new-tab-button-size);
     height: var(--new-tab-button-size);
     background: var(--new-tab-button-background);
@@ -1139,7 +1139,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     display: flex;
     position: absolute;
     content: "\ebc0";
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 100%;
     height: 100%;
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 736209051..fb89cf622 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -16,7 +16,7 @@
 .note-split.rtl .floating-buttons-children,
 .note-split.rtl .show-floating-buttons {
     right: unset;
-    left: 10px;
+    inset-inline-start: 10px;
 }
 
 .note-split.rtl .close-floating-buttons {
diff --git a/apps/client/src/widgets/close_zen_button.css b/apps/client/src/widgets/close_zen_button.css
index 3ec9f9315..64fcf62dd 100644
--- a/apps/client/src/widgets/close_zen_button.css
+++ b/apps/client/src/widgets/close_zen_button.css
@@ -21,6 +21,6 @@ body.zen.mobile .close-zen-container {
 }
 
 body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
-    left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
+    inset-inline-start: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
     right: unset;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
index dd7301a47..26edadf5e 100644
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -13,7 +13,7 @@
 .search-result-widget-content .calendar-view {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     bottom: 0;
 }
diff --git a/apps/client/src/widgets/collections/geomap/index.css b/apps/client/src/widgets/collections/geomap/index.css
index 6b8b27d45..3990ce63e 100644
--- a/apps/client/src/widgets/collections/geomap/index.css
+++ b/apps/client/src/widgets/collections/geomap/index.css
@@ -36,14 +36,14 @@
 .geo-map-container .leaflet-div-icon .icon-shadow {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: -1;
 }
 
 .geo-map-container .leaflet-div-icon .bx {
   position: absolute;
   top: 3px;
-  left: 2px;
+  inset-inline-start: 2px;
   background-color: white;
   color: black;
   padding: 2px;
@@ -55,7 +55,7 @@
   display: block;
   position: absolute;
   top: 100%;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   font-size: 0.75rem;
   height: 1rem;
diff --git a/apps/client/src/widgets/collections/table/index.css b/apps/client/src/widgets/collections/table/index.css
index cb082a337..0bb4439be 100644
--- a/apps/client/src/widgets/collections/table/index.css
+++ b/apps/client/src/widgets/collections/table/index.css
@@ -13,7 +13,7 @@
 .search-result-widget-content .table-view {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     bottom: 0;
 }
@@ -65,7 +65,7 @@
 .tabulator button.tree-collapse span {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     font-size: 1.5em;
     transform: translateY(-50%);
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts
index 3c06dd5df..c145be23a 100644
--- a/apps/client/src/widgets/dialogs/popup_editor.ts
+++ b/apps/client/src/widgets/dialogs/popup_editor.ts
@@ -46,7 +46,7 @@ const TPL = /*html*/`\
         .modal.popup-editor-dialog .classic-toolbar-widget {
             position: sticky;
             top: 0;
-            left: 0;
+            inset-inline-start: 0;
             right: 0;
             background: var(--modal-background-color);
             z-index: 998;
diff --git a/apps/client/src/widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
index db1937264..324d5468f 100644
--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -95,7 +95,7 @@ const TPL = /*html*/`
         content: "";
         position: absolute;
         top: 10px;
-        left: 0px;
+        inset-inline-start: 0px;
         right: 0;
         height: 2px;
         background: rgba(0, 0, 0, 0.5);
diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts
index 33b770a74..1a16349b2 100644
--- a/apps/client/src/widgets/quick_search.ts
+++ b/apps/client/src/widgets/quick_search.ts
@@ -15,12 +15,12 @@ const TPL = /*html*/`
         padding: 10px 10px 10px 0px;
         height: 50px;
     }
-    
+
     .quick-search button, .quick-search input {
         border: 0;
         font-size: 100% !important;
     }
-        
+
     .quick-search .dropdown-menu {
         --quick-search-item-delimiter-color: var(--dropdown-border-color);
 
@@ -32,40 +32,40 @@ const TPL = /*html*/`
         text-overflow: ellipsis;
         box-shadow: -30px 50px 93px -50px black;
     }
-    
+
     .quick-search .dropdown-item {
         white-space: normal;
         padding: 12px 16px;
         line-height: 1.4;
         position: relative;
     }
-    
+
     .quick-search .dropdown-item + .dropdown-item::after {
         content: '';
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         width: 100%;
         height: 1px;
         border-bottom: 1px solid var(--quick-search-item-delimiter-color);
     }
-    
+
     .quick-search .dropdown-item:last-child::after {
         display: none;
     }
-    
+
     .quick-search .dropdown-item.disabled::after {
         display: none;
     }
-    
+
     .quick-search .dropdown-item.show-in-full-search::after {
         display: none;
     }
-    
+
     .quick-search-item.dropdown-item:hover {
         background-color: #f8f9fa;
     }
-    
+
      .quick-search .quick-search-item {
         width: 100%;
     }
@@ -151,7 +151,7 @@ export default class QuickSearchWidget extends BasicWidget {
     private dropdown!: bootstrap.Dropdown;
     private $searchString!: JQuery<HTMLElement>;
     private $dropdownMenu!: JQuery<HTMLElement>;
-    
+
     // State for infinite scrolling
     private allSearchResults: Array<any> = [];
     private allSearchResultNoteIds: string[] = [];
@@ -172,7 +172,7 @@ export default class QuickSearchWidget extends BasicWidget {
         });
 
         this.$widget.find(".input-group-prepend").on("shown.bs.dropdown", () => this.search());
-        
+
         // Add scroll event listener for infinite scrolling
         this.$dropdownMenu.on("scroll", () => {
             this.handleScroll();
@@ -187,7 +187,7 @@ export default class QuickSearchWidget extends BasicWidget {
                 if (originalEvent && isIMEComposing(originalEvent)) {
                     return;
                 }
-                
+
                 if (e.which === 13) {
                     if (this.$dropdownMenu.is(":visible")) {
                         this.search(); // just update already visible dropdown
@@ -293,40 +293,40 @@ export default class QuickSearchWidget extends BasicWidget {
                 if (!noteId) continue;
 
                 const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">');
-                
+
                 // Build the display HTML with content snippet below the title
                 let itemHtml = `<div class="quick-search-item">
                     <div class="quick-search-item-header">
                         <span class="quick-search-item-icon ${result.icon}"></span>
                         <span class="search-result-title">${result.highlightedNotePathTitle}</span>
                     </div>`;
-                
+
                 // Add attribute snippet (tags/attributes) below the title if available
                 if (result.highlightedAttributeSnippet) {
                     // Replace <br> with a blank space to join the atributes on the same single line
                     const snippet = (result.highlightedAttributeSnippet as string).replace(/<br\s?\/?>/g, " ");
                     itemHtml += `<div class="search-result-attributes">${snippet}</div>`;
                 }
-                
+
                 // Add content snippet below the attributes if available
                 if (result.highlightedContentSnippet) {
                     itemHtml += `<div class="search-result-content">${result.highlightedContentSnippet}</div>`;
                 }
-                
+
                 itemHtml += `</div>`;
-                
+
                 $item.html(itemHtml);
-                
+
                 $item.on("click", (e) => {
                     this.dropdown.hide();
                     e.preventDefault();
-                    
+
                     const activeContext = appContext.tabManager.getActiveContext();
                     if (activeContext) {
                         activeContext.setNote(noteId);
                     }
                 });
-                
+
                 shortcutService.bindElShortcut($item, "return", () => {
                     this.dropdown.hide();
 
@@ -390,7 +390,7 @@ export default class QuickSearchWidget extends BasicWidget {
         // Trigger loading more when user scrolls near the bottom (within 50px)
         if (scrollTop + clientHeight >= scrollHeight - 50) {
             const totalResults = this.allSearchResults.length > 0 ? this.allSearchResults.length : this.allSearchResultNoteIds.length;
-            
+
             if (this.currentDisplayedCount < totalResults) {
                 this.displayMoreResults(LOAD_MORE_BATCH_SIZE).then(() => {
                     this.addShowInFullSearchButton();
diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
index f012f8056..7bd1f053c 100644
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -40,7 +40,7 @@
     content: "";
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: var(--switch-thumb-width);
     height: var(--switch-thumb-height);
     background-color: var(--switch-off-thumb-background);
@@ -63,7 +63,7 @@
     /* A hidden check box for accesibility purposes */
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
diff --git a/apps/client/src/widgets/sync_status.ts b/apps/client/src/widgets/sync_status.ts
index d6bd8b675..10a74d766 100644
--- a/apps/client/src/widgets/sync_status.ts
+++ b/apps/client/src/widgets/sync_status.ts
@@ -27,7 +27,7 @@ const TPL = /*html*/`
     .sync-status .sync-status-sub-icon {
         font-size: 40%;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 16px;
     }
 
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index b4a61ac68..a58ea2fa7 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -80,7 +80,7 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc > ol ol::before {
-            left: calc((var(--toc-depth-level) - 2) * 20px + 14px);
+            inset-inline-start: calc((var(--toc-depth-level) - 2) * 20px + 14px);
         }
 
         .toc li {
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
index e60ad2cad..5f7c5737c 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
+++ b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
@@ -12,7 +12,7 @@
 
 #root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     bottom: 0;
 }
@@ -20,7 +20,7 @@
 .classic-toolbar-widget {
     position: absolute;
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     right: 0;
     height: 38px;
     overflow: scroll;

From 87fb3c1e828dc245192a40a123e5a8570cd845b9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:51:58 +0300
Subject: [PATCH 10/52] feat(client/rtl): handle right

---
 apps/client/src/widgets/dialogs/popup_editor.ts        | 2 +-
 apps/client/src/widgets/note_tree.ts                   | 8 ++++----
 apps/client/src/widgets/promoted_attributes.ts         | 2 +-
 apps/client/src/widgets/type_widgets/mind_map.ts       | 2 +-
 apps/client/src/widgets/type_widgets/read_only_text.ts | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts
index c145be23a..1deb584d9 100644
--- a/apps/client/src/widgets/dialogs/popup_editor.ts
+++ b/apps/client/src/widgets/dialogs/popup_editor.ts
@@ -47,7 +47,7 @@ const TPL = /*html*/`\
             position: sticky;
             top: 0;
             inset-inline-start: 0;
-            right: 0;
+            inset-inline-end: 0;
             background: var(--modal-background-color);
             z-index: 998;
         }
diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts
index 4636cd60d..f4f600929 100644
--- a/apps/client/src/widgets/note_tree.ts
+++ b/apps/client/src/widgets/note_tree.ts
@@ -61,7 +61,7 @@ const TPL = /*html*/`
         display: flex;
         align-items: flex-end;
         justify-content: flex-end;
-        right: 17px;
+        inset-inline-end: 17px;
         border-radius: 7px;
         border: 1px solid var(--main-border-color);
     }
@@ -82,15 +82,15 @@ const TPL = /*html*/`
     }
 
     .collapse-tree-button {
-        right: 100px;
+        inset-inline-end: 100px;
     }
 
     .scroll-to-active-note-button {
-        right: 55px;
+        inset-inline-end: 55px;
     }
 
     .tree-settings-button {
-        right: 10px;
+        inset-inline-end: 10px;
     }
 
     .tree-settings-popup {
diff --git a/apps/client/src/widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
index 324d5468f..5853e1d87 100644
--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -96,7 +96,7 @@ const TPL = /*html*/`
         position: absolute;
         top: 10px;
         inset-inline-start: 0px;
-        right: 0;
+        inset-inline-end: 0;
         height: 2px;
         background: rgba(0, 0, 0, 0.5);
         transform: rotate(45deg);
diff --git a/apps/client/src/widgets/type_widgets/mind_map.ts b/apps/client/src/widgets/type_widgets/mind_map.ts
index 59e1a7a3e..a6f299455 100644
--- a/apps/client/src/widgets/type_widgets/mind_map.ts
+++ b/apps/client/src/widgets/type_widgets/mind_map.ts
@@ -29,7 +29,7 @@ const TPL = /*html*/`
         .map-container .node-menu {
             position: absolute;
             top: 60px;
-            right: 20px;
+            inset-inline-end: 20px;
             bottom: 80px;
             overflow: auto;
             background: var(--panel-bgcolor);
diff --git a/apps/client/src/widgets/type_widgets/read_only_text.ts b/apps/client/src/widgets/type_widgets/read_only_text.ts
index 51c83cd5b..2bbd9798e 100644
--- a/apps/client/src/widgets/type_widgets/read_only_text.ts
+++ b/apps/client/src/widgets/type_widgets/read_only_text.ts
@@ -56,7 +56,7 @@ const TPL = /*html*/`
     .edit-text-note-button {
         position: absolute;
         top: 5px;
-        right: 10px;
+        inset-inline-end: 10px;
         font-size: 150%;
         padding: 5px;
         cursor: pointer;

From 20e293f5df7e7a0c9e07e7fdf84bddb9619f1c3d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:52:41 +0300
Subject: [PATCH 11/52] feat(client/rtl): handle float

---
 apps/client/src/stylesheets/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 670b3a904..0e847a227 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -339,7 +339,7 @@ button kbd {
 
 .ui-menu kbd {
     margin-inline-start: 30px;
-    float: right;
+    float: inline-end;
 }
 
 .suppressed {
@@ -841,7 +841,7 @@ table.promoted-attributes-in-tooltip th {
 }
 
 .tooltip-inner figure.image-style-side {
-    float: right;
+    float: inline-end;
 }
 
 .tooltip.show {
@@ -916,7 +916,7 @@ table.promoted-attributes-in-tooltip th {
 }
 
 .help-button {
-    float: right;
+    float: inline-end;
     background: none;
     font-weight: 900;
     color: orange;

From c91a03834d573d2871aba212500786e1a71e024f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:54:40 +0300
Subject: [PATCH 12/52] feat(client/rtl): handle text-align

---
 apps/client/src/stylesheets/style.css                     | 8 ++++----
 .../src/widgets/attribute_widgets/attribute_detail.ts     | 4 ++--
 apps/client/src/widgets/dialogs/bulk_actions.css          | 2 +-
 apps/client/src/widgets/ribbon/style.css                  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 0e847a227..06bc4ac01 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -443,7 +443,7 @@ body #context-menu-container .dropdown-item > span {
 .dropdown-item span.keyboard-shortcut,
 .dropdown-item *:not(.keyboard-shortcut) > kbd {
     flex-grow: 1;
-    text-align: right;
+    text-align: end;
     padding-inline-start: 12px;
 }
 
@@ -788,7 +788,7 @@ table.promoted-attributes-in-tooltip th {
     background-color: var(--tooltip-background-color) !important;
     border: 1px solid var(--main-border-color);
     border-radius: 5px;
-    text-align: left;
+    text-align: start;
     color: var(--main-text-color) !important;
     max-width: 500px;
     box-shadow: 10px 10px 93px -25px #aaaaaa;
@@ -1056,7 +1056,7 @@ svg.ck-icon .note-icon {
     min-width: fit-content;
     position: relative;
     right: 0.2em;
-    text-align: right;
+    text-align: end;
 }
 
 .ck-content .footnote-content {
@@ -1072,7 +1072,7 @@ svg.ck-icon .note-icon {
 }
 
 #options-dialog input[type="number"] {
-    text-align: right;
+    text-align: end;
 }
 
 .help-cards ul {
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
index f39f43fae..2a7a55aef 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -46,7 +46,7 @@ const TPL = /*html*/`
         }
 
         .attr-edit-table th {
-            text-align: left;
+            text-align: start;
         }
 
         .attr-edit-table td input[not(type="checkbox")] {
@@ -150,7 +150,7 @@ const TPL = /*html*/`
             <th title="${t("attribute_detail.precision_title")}">${t("attribute_detail.precision")}</th>
             <td>
                 <div class="input-group">
-                    <input type="number" class="form-control attr-input-number-precision" style="text-align: right">
+                    <input type="number" class="form-control attr-input-number-precision" style="text-align: end">
                     <span class="input-group-text">${t("attribute_detail.digits")}</span>
                 </div>
             </td>
diff --git a/apps/client/src/widgets/dialogs/bulk_actions.css b/apps/client/src/widgets/dialogs/bulk_actions.css
index 6b8400263..d6c8aec20 100644
--- a/apps/client/src/widgets/dialogs/bulk_actions.css
+++ b/apps/client/src/widgets/dialogs/bulk_actions.css
@@ -19,7 +19,7 @@
 .bulk-actions-dialog .bulk-existing-action-list .button-column {
     width: 50px;
     white-space: nowrap;
-    text-align: right;
+    text-align: end;
 }
 
 .bulk-actions-dialog .bulk-existing-action-list .button-column > * {
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index f43e8c111..05709ef93 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -394,7 +394,7 @@
     /* minimal width so that table remains static sized and most space remains for middle column with settings */
     width: 50px;
     white-space: nowrap;
-    text-align: right;
+    text-align: end;
     vertical-align: middle;
 }
 

From 668e1dff4b7b033f452599e4f2664343dd6b46fc Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:56:39 +0300
Subject: [PATCH 13/52] feat(client/rtl): handle transform-origin

---
 apps/client/src/stylesheets/theme-next/shell.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 308fc2cdb..6fa8dea85 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -1436,6 +1436,10 @@ div#center-pane .floating-buttons-children {
                 opacity 250ms ease-out;
 }
 
+body[dir=rtl] div#center-pane .floating-buttons-children {
+    transform-origin: left;
+}
+
  /* Floating buttons container (collapsed) */
  div#center-pane .floating-buttons-children.temporarily-hidden {
     display: flex !important;

From 3d9861f9046ed2d3d2b15db694cc3909a5f29e60 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:58:38 +0300
Subject: [PATCH 14/52] feat(client/rtl): handle transform

---
 apps/client/src/stylesheets/style.css                | 4 ++++
 apps/client/src/stylesheets/theme-next/shell.css     | 4 ++++
 apps/client/src/widgets/collections/geomap/index.css | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 06bc4ac01..95a0a450c 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -586,6 +586,10 @@ button.btn-sm {
     z-index: 1000;
 }
 
+body[dir=rtl] .ck.ck-block-toolbar-button {
+    transform: translateX(-7px);
+}
+
 pre:not(.hljs) {
     color: var(--main-text-color) !important;
     white-space: pre-wrap;
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 6fa8dea85..59b2d0bfe 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -685,6 +685,10 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     border-radius: 50%;
 }
 
+body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
+    transform: translateX(-25%);
+}
+
 body.mobile .fancytree-expander::before,
 body.mobile .fancytree-title,
 body.mobile .fancytree-node > span {
diff --git a/apps/client/src/widgets/collections/geomap/index.css b/apps/client/src/widgets/collections/geomap/index.css
index 3990ce63e..9fc5dee63 100644
--- a/apps/client/src/widgets/collections/geomap/index.css
+++ b/apps/client/src/widgets/collections/geomap/index.css
@@ -68,6 +68,10 @@
   overflow: hidden;
 }
 
+body[dir=rtl] .geo-map-container .leaflet-div-icon .title-label {
+  transform: translateX(50%);
+}
+
 .geo-map-container .leaflet-div-icon .archived {
   opacity: 0.5;
 }

From 1e78dd829686626afdb7009ddba34993fd1f7dd8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:03:48 +0300
Subject: [PATCH 15/52] fix(client/rtl): tree chevron in the wrong direction

---
 apps/client/src/stylesheets/tree.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index df7d00bd7..976b434e2 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -62,6 +62,10 @@ span.fancytree-node.fancytree-hide {
     margin-inline-end: 5px;
 }
 
+body[dir=rtl] .fancytree-node:not(.fancytree-loading):not(.fancytree-expanded) .fancytree-expander:before {
+    content: "\ea4d";   /* bx bx-chevron-left */
+}
+
 .fancytree-loading span.fancytree-expander {
     background-image: none;
     display: inline-block;

From 42b1dcebcd315ac2570808911e0765757d0ab9d6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:04:57 +0300
Subject: [PATCH 16/52] feat(client/rtl): set lang to body as well

---
 apps/client/src/widgets/containers/root_container.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 511a98b14..bd1ae9719 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -33,7 +33,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
-        this.#setRightToLeft(options.get("locale"));
+        this.#setLocaleAndDirection(options.get("locale"));
 
         return super.render();
     }
@@ -71,8 +71,9 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         document.body.classList.toggle("backdrop-effects-disabled", !enabled);
     }
 
-    #setRightToLeft(locale: string) {
+    #setLocaleAndDirection(locale: string) {
         const correspondingLocale = LOCALES.find(l => l.id === locale);
+        document.body.lang = locale;
         document.body.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
     }
 }

From 09c5686cb78369af5d6ef5ba82d33ca252365525 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:12:06 +0300
Subject: [PATCH 17/52] fix(client/rtl): floating buttons on the wrong side

---
 apps/client/src/widgets/FloatingButtons.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index fb89cf622..8c39f4137 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -16,7 +16,7 @@
 .note-split.rtl .floating-buttons-children,
 .note-split.rtl .show-floating-buttons {
     right: unset;
-    inset-inline-start: 10px;
+    inset-inline-end: 10px;
 }
 
 .note-split.rtl .close-floating-buttons {

From b0bb93975a14a09b8efb5342ef9b849a54f485f4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:14:35 +0300
Subject: [PATCH 18/52] fix(client/rtl): toggle buttons out of bounds

---
 apps/client/src/widgets/react/FormToggle.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
index 7bd1f053c..e65002a4a 100644
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -50,6 +50,10 @@
                 background 200ms ease-out;
 }
 
+body[dir=rtl] .switch-widget .switch-button:after {
+    --x: calc(var(--y) * -1);
+}
+
 .switch-widget .switch-button.on:after {
     --x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));
 

From d19d05ec7bf71e615299a2a75953035daf68e32c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:20:45 +0300
Subject: [PATCH 19/52] fix(client/rtl): select arrow in wrong position

---
 apps/client/src/stylesheets/theme-next/forms.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index 963476578..f62970207 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -358,12 +358,19 @@ select.form-control,
     outline: 3px solid transparent;
     outline-offset: 6px;
     padding-inline-end: calc(15px + 1.5rem);
-    background: var(--input-background-color) var(--dropdown-arrow);
+    background: var(--input-background-color) var(--dropdown-arrow);;
     color: var(--input-text-color);
     border: unset;
     border-radius: 0.375rem;
 }
 
+body[dir=rtl] select,
+body[dir=rtl] select.form-select,
+body[dir=rtl] select.form-control,
+body[dir=rtl] .select-button.dropdown-toggle.btn {
+    background-position: left 0.75rem center;
+}
+
 select:hover,
 select.form-select:hover,
 select.form-control:hover,

From 8a8727e6dfa6c3b413270d69af2f8b91b3d950f1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:24:01 +0300
Subject: [PATCH 20/52] fix(client/rtl): toggling not working

---
 apps/client/src/widgets/react/FormToggle.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
index e65002a4a..941839143 100644
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -62,6 +62,10 @@ body[dir=rtl] .switch-widget .switch-button:after {
                 background 100ms ease-in;
 }
 
+body[dir=rtl] .switch-widget .switch-button.on:after {
+    --x: calc((var(--switch-track-width) - var(--switch-thumb-width) - var(--y)) * -1);
+}
+
 
 .switch-widget .switch-button input[type="checkbox"] {
     /* A hidden check box for accesibility purposes */

From d9bfa08672d868b79beaf49460e965fb6eddaecf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:36:10 +0300
Subject: [PATCH 21/52] fix(client/rtl): right positioning not adjusted

---
 apps/client/src/stylesheets/calendar.css      |  2 +-
 apps/client/src/stylesheets/relation_map.css  |  2 +-
 apps/client/src/stylesheets/style.css         | 26 ++++++++--------
 .../src/stylesheets/theme-next/base.css       |  8 ++---
 .../src/stylesheets/theme-next/forms.css      |  2 +-
 .../src/stylesheets/theme-next/notes/text.css |  6 ++--
 .../src/stylesheets/theme-next/ribbon.css     |  2 +-
 .../src/stylesheets/theme-next/shell.css      | 30 +++++++++----------
 apps/client/src/widgets/FloatingButtons.css   |  6 ++--
 apps/client/src/widgets/api_log.css           |  2 +-
 .../src/widgets/buttons/global_menu.css       |  2 +-
 apps/client/src/widgets/close_zen_button.css  |  4 +--
 .../src/widgets/collections/board/index.css   |  4 +--
 .../widgets/collections/calendar/index.css    |  2 +-
 .../src/widgets/collections/table/index.css   |  2 +-
 apps/client/src/widgets/ribbon/style.css      |  4 +--
 .../ckeditor/mobile_editor_toolbar.css        |  4 +--
 17 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/apps/client/src/stylesheets/calendar.css b/apps/client/src/stylesheets/calendar.css
index eddcbbc28..48f01a9b8 100644
--- a/apps/client/src/stylesheets/calendar.css
+++ b/apps/client/src/stylesheets/calendar.css
@@ -102,7 +102,7 @@
     content: '';
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     width: 1px;
     background-color: var(--main-border-color);
diff --git a/apps/client/src/stylesheets/relation_map.css b/apps/client/src/stylesheets/relation_map.css
index 7213da78f..67444e5aa 100644
--- a/apps/client/src/stylesheets/relation_map.css
+++ b/apps/client/src/stylesheets/relation_map.css
@@ -62,7 +62,7 @@
 .note-detail-relation-map .endpoint {
     position: absolute;
     bottom: 37%;
-    right: 5px;
+    inset-inline-end: 5px;
     width: 1em;
     height: 1em;
     background-color: #333;
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 95a0a450c..ff9c30850 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -608,7 +608,7 @@ pre:not(.hljs) {
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
-    right: var(--copy-button-margin-size);
+    inset-inline-end: var(--copy-button-margin-size);
 }
 
 :root pre:has(> button.copy-button) {
@@ -743,7 +743,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
 .bs-tooltip-right .tooltip-arrow::before {
-    right: -1px;
+    inset-inline-end: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
     border-inline-end-color: var(--main-border-color) !important;
 }
@@ -771,7 +771,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::after,
 .bs-tooltip-right .tooltip-arrow::after {
-    right: -1px;
+    inset-inline-end: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
     border-inline-end-color: var(--tooltip-background-color) !important;
 }
@@ -825,7 +825,7 @@ table.promoted-attributes-in-tooltip th {
 
 .note-tooltip-content .open-popup-button {
     position: absolute;
-    right: 15px;
+    inset-inline-end: 15px;
     bottom: 8px;
     font-size: 1.2em;
     color: inherit;
@@ -1059,7 +1059,7 @@ svg.ck-icon .note-icon {
     display: inline-block;
     min-width: fit-content;
     position: relative;
-    right: 0.2em;
+    inset-inline-end: 0.2em;
     text-align: end;
 }
 
@@ -1279,7 +1279,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     position: fixed;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.1);
@@ -1293,7 +1293,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 body.mobile #context-menu-container.mobile-bottom-menu {
     position: fixed !important;
     inset-inline-start: 0 !important;
-    right: 0 !important;
+    inset-inline-end: 0 !important;
     bottom: 0 !important;
     top: unset !important;
     max-height: 70vh;
@@ -1538,7 +1538,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
         top: unset !important;
         inset-inline-start: 0 !important;
-        right: 0 !important;
+        inset-inline-end: 0 !important;
         transform: unset !important;
     }
 
@@ -1546,7 +1546,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed;
         top: 0;
         inset-inline-start: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 0;
         z-index: 1000;
         transition: background-color 250ms ease-in-out;
@@ -1594,7 +1594,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed;
         bottom: 0;
         inset-inline-start: 0;
-        right: 0;
+        inset-inline-end: 0;
         margin: 0 !important;
         max-height: 85vh;        
         display: flex;
@@ -2042,7 +2042,7 @@ body.zen .split-note-container-widget > .gutter {
 body.zen #launcher-pane {
     position: absolute !important;
     top: 0 !important;
-    right: 0 !important;
+    inset-inline-end: 0 !important;
     width: 64px !important;
     height: 64px !important;
     background: transparent !important;
@@ -2062,7 +2062,7 @@ body.zen .floating-buttons {
 }
 
 body.zen .floating-buttons-children {
-    right: 0;
+    inset-inline-end: 0;
 }
 
 body.zen .floating-buttons-children .button-widget {
@@ -2383,7 +2383,7 @@ footer.webview-footer button {
 
 .content-floating-buttons.bottom-right {
     bottom: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
 }
 
 .content-floating-buttons button.bx {
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index e1a14df89..8be096202 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -121,7 +121,7 @@ body.desktop .dropdown-menu::before,
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: -1;
 }
@@ -225,7 +225,7 @@ html body .dropdown-item[disabled] {
     content: "";
     top: -1px;
     inset-inline-start: calc(0px - var(--menu-padding-size));
-    right: calc(0px - var(--menu-padding-size));
+    inset-inline-end: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 
@@ -237,7 +237,7 @@ html body .dropdown-item[disabled] {
     align-items: center;
     justify-content: center;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     margin: unset !important;
     border: unset !important;
     padding: 0 4px;
@@ -265,7 +265,7 @@ html body .dropdown-item[disabled] {
     position: absolute;
     bottom: 8px;
     inset-inline-start: calc(0px - var(--menu-padding-size));
-    right: calc(0px - var(--menu-padding-size));
+    inset-inline-end: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index f62970207..31144eaa2 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -451,7 +451,7 @@ optgroup {
     content: "\eae1";
     width: 2em;
     height: 100%;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     font-size: 1.2em;
     font-family: boxicons;
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 0a123d894..a16afb8aa 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -117,7 +117,7 @@
     content: "";
     position: absolute;
     top: var(--negative-padding);
-    right: var(--negative-padding);
+    inset-inline-end: var(--negative-padding);
     bottom: var(--negative-padding);
     inset-inline-start: var(--negative-padding);
     border-radius: var(--dropdown-border-radius);
@@ -234,7 +234,7 @@
     top: 0;
     bottom: var(--negative-padding);
     inset-inline-start: var(--negative-padding);
-    right: var(--negative-padding);
+    inset-inline-end: var(--negative-padding);
     border-top: 1px solid var(--ck-editor-popup-border-color);
     background: var(--menu-section-background-color);
 }
@@ -620,7 +620,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content blockquote:after {
     content: "”";
-    right: 0.35em;
+    inset-inline-end: 0.35em;
 }
 
 .ck-content h2,
diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css
index e9af8df88..192cfa6f4 100644
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -142,7 +142,7 @@ ul.editability-dropdown li.dropdown-item > div {
 }
 
 .attribute-list .save-attributes-button {
-    right: 30px;
+    inset-inline-end: 30px;
 }
 
 /* Note path in attribute detail dialog */
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 59b2d0bfe..6e8beb777 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -284,7 +284,7 @@ body.layout-horizontal > .horizontal {
 }
 
 #launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
-    right: -23px;
+    inset-inline-end: -23px;
     bottom: -22px;
     transform: scale(0.85);
 }
@@ -400,7 +400,7 @@ body.layout-horizontal > .horizontal {
     content: "";
     position: absolute;
     top: var(--vertical-margin);
-    right: var(--horiz-margin);
+    inset-inline-end: var(--horiz-margin);
     bottom: var(--vertical-margin);
     inset-inline-start: var(--horiz-margin);
     border-radius: 6px;
@@ -498,7 +498,7 @@ div.quick-search::before {
     top: var(--padding-top);
     inset-inline-start: var(--padding-inline-start);
     bottom: var(--padding-bottom);
-    right: var(--padding-inline-end);
+    inset-inline-end: var(--padding-inline-end);
     z-index: 0;
     border: 2px solid transparent;
     border-radius: 6px;
@@ -660,7 +660,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     top: var(--left-pane-item-selected-shadow-size);
     inset-inline-start: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
-    right: var(--left-pane-item-selected-shadow-size);
+    inset-inline-end: var(--left-pane-item-selected-shadow-size);
     background: var(--left-pane-item-selected-background) !important;
     box-shadow: var(--left-pane-item-selected-shadow);
     border-radius: 6px;
@@ -676,7 +676,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
     position: absolute;
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     font-size: 14px;
     content: "\eb4a";
     font-family: "boxicons";
@@ -772,7 +772,7 @@ body.mobile .fancytree-node > span {
 /* Toolbar container (collapsed state) */
 #left-pane .tree-actions {
     max-width: var(--tree-actions-toolbar-collapsed-width);
-    right: var(--tree-actions-toolbar-horizontal-margin);
+    inset-inline-end: var(--tree-actions-toolbar-horizontal-margin);
     bottom: var(--tree-actions-toolbar-vertical-margin);
     overflow: hidden;
     border: 1px solid transparent;
@@ -821,7 +821,7 @@ body.mobile .fancytree-node > span {
     justify-content: center;
     align-items: center;
     top: 50%;
-    right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
+    inset-inline-end: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
     width: var(--tree-actions-toolbar-expand-button-size);
     height: var(--tree-actions-toolbar-expand-button-size);
     box-shadow: 2px 2px 6px var(--left-pane-background-color);
@@ -911,7 +911,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu
     position: absolute;
     bottom: 0;
     inset-inline-start: -10px;
-    right: -10px;
+    inset-inline-end: -10px;
     top: 32px;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -923,12 +923,12 @@ body.electron.background-effects.layout-horizontal .tab-row-container .tab-scrol
 }
 
 body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after,
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after {
+body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-end:after {
     content: "";
     position: absolute;
     bottom: 0;
     inset-inline-start: 0px;
-    right: 0px;
+    inset-inline-end: 0px;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
@@ -939,7 +939,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     bottom: 0;
     inset-inline-start: -32768px;
     top: var(--tab-height);
-    right: calc(100% - 1px);
+    inset-inline-end: calc(100% - 1px);
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
@@ -950,7 +950,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     bottom: 0;
     inset-inline-start: 100%;
     top: var(--tab-height);
-    right: 0;
+    inset-inline-end: 0;
     width: 100vw;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -962,7 +962,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-new-
     bottom: 0;
     inset-inline-start: -4px;
     top: calc(var(--tab-height), -1);
-    right: 0;
+    inset-inline-end: 0;
     width: 100vw;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -1050,7 +1050,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     height: 3px;
     background-color: var(--workspace-tab-background-color);
 }
@@ -1676,7 +1676,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     .find-widget-close-button {
         position: absolute;
         top: .85em;
-        right: .5em;
+        inset-inline-end: .5em;
     }
 
     .find-widget-box > * {
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 8c39f4137..1d839d140 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -7,7 +7,7 @@
 .show-floating-buttons {
     position: absolute;
     top: var(--floating-buttons-vert-offset, 10px);
-    right: var(--floating-buttons-horiz-offset, 10px);
+    inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
     display: flex;
     flex-direction: row;
     z-index: 100;
@@ -15,7 +15,7 @@
 
 .note-split.rtl .floating-buttons-children,
 .note-split.rtl .show-floating-buttons {
-    right: unset;
+    inset-inline-end: unset;
     inset-inline-end: 10px;
 }
 
@@ -140,7 +140,7 @@
     z-index: 10;
     position: absolute;
     top: 50px;
-    right: 10px;
+    inset-inline-end: 10px;
     width: 400px;
     border-radius: 10px;
     background-color: var(--accented-background-color);
diff --git a/apps/client/src/widgets/api_log.css b/apps/client/src/widgets/api_log.css
index ba874cab8..c370adbbc 100644
--- a/apps/client/src/widgets/api_log.css
+++ b/apps/client/src/widgets/api_log.css
@@ -23,6 +23,6 @@
     color: var(--button-text-color);
     position: absolute;
     top: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/buttons/global_menu.css b/apps/client/src/widgets/buttons/global_menu.css
index 8ffbc2ae1..0d14456e1 100644
--- a/apps/client/src/widgets/buttons/global_menu.css
+++ b/apps/client/src/widgets/buttons/global_menu.css
@@ -55,7 +55,7 @@ button.global-menu-button {
 
 .global-menu-button-update-available {
     position: absolute;
-    right: -30px;
+    inset-inline-end: -30px;
     bottom: -30px;
     width: 100%;
     height: 100%;
diff --git a/apps/client/src/widgets/close_zen_button.css b/apps/client/src/widgets/close_zen_button.css
index 64fcf62dd..52bbbc086 100644
--- a/apps/client/src/widgets/close_zen_button.css
+++ b/apps/client/src/widgets/close_zen_button.css
@@ -11,7 +11,7 @@ body.zen .close-zen-container {
     display: block;
     position: fixed;
     top: 2px;
-    right: 2px;
+    inset-inline-end: 2px;
     z-index: 9999;
     -webkit-app-region: no-drag;
 }
@@ -22,5 +22,5 @@ body.zen.mobile .close-zen-container {
 
 body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
     inset-inline-start: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
-    right: unset;
+    inset-inline-end: unset;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index 1cc663354..581408cf6 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -153,7 +153,7 @@
 .board-view-container .board-note > .edit-icon {
   position: absolute;
   top: 8px;
-  right: 4px;
+  inset-inline-end: 4px;
   padding: 2px;
   background-color: var(--main-background-color);
 }
@@ -165,7 +165,7 @@
 .board-view-container .board-note:hover > .edit-icon {
   position: absolute;
   top: 8px;
-  right: 4px;
+  inset-inline-end: 4px;
   color: var(--main-text-color);
   background-color: var(--main-background-color);
   padding-inline-start: 6px;
diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
index 26edadf5e..e6649e53f 100644
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -14,7 +14,7 @@
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 
diff --git a/apps/client/src/widgets/collections/table/index.css b/apps/client/src/widgets/collections/table/index.css
index 0bb4439be..ff24dda26 100644
--- a/apps/client/src/widgets/collections/table/index.css
+++ b/apps/client/src/widgets/collections/table/index.css
@@ -14,7 +14,7 @@
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 05709ef93..9adcad69a 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -262,7 +262,7 @@
 
 .note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
     position: absolute;
-    right: 5px;
+    inset-inline-end: 5px;
     bottom: 5px;
     z-index: 1000;
 }
@@ -294,7 +294,7 @@
     display: flex;
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     align-items: center;
     gap: 10px;
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
index 5f7c5737c..db469fcbd 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
+++ b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
@@ -13,7 +13,7 @@
 #root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios {
     position: absolute;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 
@@ -21,7 +21,7 @@
     position: absolute;
     bottom: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     height: 38px;
     overflow: scroll;
     display: flex;

From 9d1e89268f8e37d700f856ef27d3feb497de97e0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 18:50:27 +0300
Subject: [PATCH 22/52] fix(client/rtl): bootstrap not in RTL mode

---
 apps/client/src/desktop.ts                             |  1 -
 apps/client/src/login.ts                               |  2 --
 apps/client/src/mobile.ts                              |  1 -
 apps/client/src/runtime.ts                             | 10 ++++++++++
 apps/client/src/set_password.ts                        |  1 -
 apps/client/src/setup.ts                               |  1 -
 apps/client/src/types.d.ts                             |  1 +
 apps/server/src/assets/views/partials/windowGlobal.ejs |  3 ++-
 apps/server/src/routes/index.ts                        |  4 +++-
 9 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/desktop.ts b/apps/client/src/desktop.ts
index 6fa428656..cca6c8c0f 100644
--- a/apps/client/src/desktop.ts
+++ b/apps/client/src/desktop.ts
@@ -10,7 +10,6 @@ import { t } from "./services/i18n.js";
 import options from "./services/options.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "bootstrap/dist/css/bootstrap.min.css";
 import "boxicons/css/boxicons.min.css";
 import "autocomplete.js/index_jquery.js";
 
diff --git a/apps/client/src/login.ts b/apps/client/src/login.ts
index 351ed4c1e..e70767840 100644
--- a/apps/client/src/login.ts
+++ b/apps/client/src/login.ts
@@ -1,5 +1,3 @@
-import "bootstrap/dist/css/bootstrap.min.css";
-
 // @ts-ignore - module = undefined
 // Required for correct loading of scripts in Electron
 if (typeof module === 'object') {window.module = module; module = undefined;}
diff --git a/apps/client/src/mobile.ts b/apps/client/src/mobile.ts
index 507b9ff5a..f4daedc16 100644
--- a/apps/client/src/mobile.ts
+++ b/apps/client/src/mobile.ts
@@ -1,7 +1,6 @@
 import appContext from "./components/app_context.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
-import "bootstrap/dist/css/bootstrap.min.css";
 import "boxicons/css/boxicons.min.css";
 import "autocomplete.js/index_jquery.js";
 
diff --git a/apps/client/src/runtime.ts b/apps/client/src/runtime.ts
index 50c385778..9de27af18 100644
--- a/apps/client/src/runtime.ts
+++ b/apps/client/src/runtime.ts
@@ -1,5 +1,15 @@
 import $ from "jquery";
+
+async function loadBootstrap() {
+    if (glob.isRtl) {
+        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
+    } else {
+        await import("bootstrap/dist/css/bootstrap.min.css");
+    }
+}
+
 (window as any).$ = $;
 (window as any).jQuery = $;
+await loadBootstrap();
 
 $("body").show();
diff --git a/apps/client/src/set_password.ts b/apps/client/src/set_password.ts
index 47e02f1d1..13be761ec 100644
--- a/apps/client/src/set_password.ts
+++ b/apps/client/src/set_password.ts
@@ -1,4 +1,3 @@
-import "bootstrap/dist/css/bootstrap.min.css";
 import "./stylesheets/auth.css";
 
 // @TriliumNextTODO: is this even needed anymore?
diff --git a/apps/client/src/setup.ts b/apps/client/src/setup.ts
index d5659645e..29fbd15c0 100644
--- a/apps/client/src/setup.ts
+++ b/apps/client/src/setup.ts
@@ -1,7 +1,6 @@
 import "jquery";
 import utils from "./services/utils.js";
 import ko from "knockout";
-import "bootstrap/dist/css/bootstrap.min.css";
 
 // TriliumNextTODO: properly make use of below types
 // type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
diff --git a/apps/client/src/types.d.ts b/apps/client/src/types.d.ts
index fedad1662..36b56b9a6 100644
--- a/apps/client/src/types.d.ts
+++ b/apps/client/src/types.d.ts
@@ -46,6 +46,7 @@ interface CustomGlobals {
     platform?: typeof process.platform;
     linter: typeof lint;
     hasNativeTitleBar: boolean;
+    isRtl: boolean;
 }
 
 type RequireMethod = (moduleName: string) => any;
diff --git a/apps/server/src/assets/views/partials/windowGlobal.ejs b/apps/server/src/assets/views/partials/windowGlobal.ejs
index 1258030d1..33b42c5f9 100644
--- a/apps/server/src/assets/views/partials/windowGlobal.ejs
+++ b/apps/server/src/assets/views/partials/windowGlobal.ejs
@@ -18,6 +18,7 @@
         appPath: "<%= appPath %>",
         platform: "<%= platform %>",
         hasNativeTitleBar: <%= hasNativeTitleBar %>,
-        TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>
+        TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>,
+        isRtl: <%= isRtl %>
     };
 </script>
\ No newline at end of file
diff --git a/apps/server/src/routes/index.ts b/apps/server/src/routes/index.ts
index 430c27d0f..2f579edaf 100644
--- a/apps/server/src/routes/index.ts
+++ b/apps/server/src/routes/index.ts
@@ -14,6 +14,7 @@ import { generateToken as generateCsrfToken } from "./csrf_protection.js";
 
 import type { Request, Response } from "express";
 import type BNote from "../becca/entities/bnote.js";
+import { LOCALES } from "@triliumnext/commons";
 
 function index(req: Request, res: Response) {
     const options = optionService.getOptionMap();
@@ -57,7 +58,8 @@ function index(req: Request, res: Response) {
         maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
         triliumVersion: packageJson.version,
         assetPath: assetPath,
-        appPath: appPath
+        appPath: appPath,
+        isRtl: LOCALES.find(l => l.id === options.locale)?.rtl
     });
 }
 

From b5f73874cbf51e2c24f6bfd466f12be114634554 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 19:06:19 +0300
Subject: [PATCH 23/52] fix(client/rtl): tooltips not inverted

---
 apps/client/src/services/utils.ts                    | 12 ++++++++++++
 apps/client/src/widgets/buttons/abstract_button.ts   |  6 ++++--
 .../src/widgets/buttons/right_dropdown_button.ts     |  5 +++--
 apps/client/src/widgets/quick_search.ts              |  4 ++--
 apps/client/src/widgets/react/FormList.tsx           | 10 +++++-----
 apps/client/src/widgets/sync_status.ts               |  6 +++---
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index 3c83d3e86..0f17bdc79 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -869,6 +869,18 @@ export function getErrorMessage(e: unknown) {
     }
 }
 
+/**
+ * Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected.
+ * @param placement a string optionally containing a "left" or "right" value.
+ * @returns a left/right value swapped if needed, or the same as input otherwise.
+ */
+export function handleRightToLeftPlacement<T extends string>(placement: T) {
+    if (!glob.isRtl) return placement;
+    if (placement === "left") return "right";
+    if (placement === "right") return "left";
+    return placement;
+}
+
 export default {
     reloadFrontendApp,
     restartDesktopApp,
diff --git a/apps/client/src/widgets/buttons/abstract_button.ts b/apps/client/src/widgets/buttons/abstract_button.ts
index 7e0923b41..308009fa6 100644
--- a/apps/client/src/widgets/buttons/abstract_button.ts
+++ b/apps/client/src/widgets/buttons/abstract_button.ts
@@ -1,5 +1,6 @@
 import { Tooltip } from "bootstrap";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import { handleRightToLeftPlacement } from "../../services/utils.js";
 
 const TPL = /*html*/`<button class="button-widget bx"
       data-bs-toggle="tooltip"
@@ -26,13 +27,14 @@ export default class AbstractButtonWidget<SettingsT extends AbstractButtonWidget
 
     doRender() {
         this.$widget = $(TPL);
+
         this.tooltip = new Tooltip(this.$widget[0], {
             html: true,
             // in case getTitle() returns null -> use empty string as fallback
             title: () => this.getTitle() || "",
             trigger: "hover",
-            placement: this.settings.titlePlacement,
-            fallbackPlacements: [this.settings.titlePlacement]
+            placement: handleRightToLeftPlacement(this.settings.titlePlacement),
+            fallbackPlacements: [ handleRightToLeftPlacement(this.settings.titlePlacement) ]
         });
 
         if (this.settings.onContextMenu) {
diff --git a/apps/client/src/widgets/buttons/right_dropdown_button.ts b/apps/client/src/widgets/buttons/right_dropdown_button.ts
index 7442ebdfd..6d896eae2 100644
--- a/apps/client/src/widgets/buttons/right_dropdown_button.ts
+++ b/apps/client/src/widgets/buttons/right_dropdown_button.ts
@@ -1,3 +1,4 @@
+import { handleRightToLeftPlacement } from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
 import { Tooltip, Dropdown } from "bootstrap";
 type PopoverPlacement = Tooltip.PopoverPlacement;
@@ -48,8 +49,8 @@ export default class RightDropdownButtonWidget extends BasicWidget {
 
         this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
         this.tooltip = new Tooltip(this.$tooltip[0], {
-            placement: this.settings.titlePlacement,
-            fallbackPlacements: [this.settings.titlePlacement]
+            placement: handleRightToLeftPlacement(this.settings.titlePlacement),
+            fallbackPlacements: [ handleRightToLeftPlacement(this.settings.titlePlacement) ]
         });
 
         this.$widget
diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts
index 1a16349b2..cc326df98 100644
--- a/apps/client/src/widgets/quick_search.ts
+++ b/apps/client/src/widgets/quick_search.ts
@@ -2,7 +2,7 @@ import BasicWidget from "./basic_widget.js";
 import server from "../services/server.js";
 import linkService from "../services/link.js";
 import froca from "../services/froca.js";
-import utils from "../services/utils.js";
+import utils, { handleRightToLeftPlacement } from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import shortcutService, { isIMEComposing } from "../services/shortcuts.js";
 import { t } from "../services/i18n.js";
@@ -248,7 +248,7 @@ export default class QuickSearchWidget extends BasicWidget {
             let tooltip = new Tooltip(this.$searchString[0], {
                 trigger: "manual",
                 title: `Search error: ${error}`,
-                placement: "right"
+                placement: handleRightToLeftPlacement("right")
             });
 
             tooltip.show();
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index 6e7c7ab51..c79d63619 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact
 import "./FormList.css";
 import { CommandNames } from "../../components/app_context";
 import { useStaticTooltip } from "./hooks";
-import { isMobile } from "../../services/utils";
+import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
 
 interface FormListOpts {
     children: ComponentChildren;
@@ -22,7 +22,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
         if (!triggerRef.current || !wrapperRef.current) {
             return;
         }
-        
+
         const $wrapperRef = $(wrapperRef.current);
         const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
         $wrapperRef.on("hide.bs.dropdown", (e) => e.preventDefault());
@@ -93,8 +93,8 @@ interface FormListItemOpts {
 }
 
 const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
-    placement: "right",
-    fallbackPlacements: [ "right" ]
+    placement: handleRightToLeftPlacement("right"),
+    fallbackPlacements: [ handleRightToLeftPlacement("right") ]
 }
 
 export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
@@ -178,4 +178,4 @@ export function FormDropdownSubmenu({ icon, title, children }: { icon: string, t
             </ul>
         </li>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/sync_status.ts b/apps/client/src/widgets/sync_status.ts
index 10a74d766..3ce671034 100644
--- a/apps/client/src/widgets/sync_status.ts
+++ b/apps/client/src/widgets/sync_status.ts
@@ -3,7 +3,7 @@ import BasicWidget from "./basic_widget.js";
 import ws from "../services/ws.js";
 import options from "../services/options.js";
 import syncService from "../services/sync.js";
-import { escapeQuotes } from "../services/utils.js";
+import { escapeQuotes, handleRightToLeftPlacement } from "../services/utils.js";
 import { Tooltip } from "bootstrap";
 import { WebSocketMessage } from "@triliumnext/commons";
 
@@ -109,8 +109,8 @@ export default class SyncStatusWidget extends BasicWidget {
 
         Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`)[0], {
             html: true,
-            placement: this.settings.titlePlacement,
-            fallbackPlacements: [this.settings.titlePlacement]
+            placement: handleRightToLeftPlacement(this.settings.titlePlacement),
+            fallbackPlacements: [ handleRightToLeftPlacement(this.settings.titlePlacement) ]
         });
 
         this.$widget.show();

From b8ffb004ceb37c635887b34bf333cd660ca4283a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:09:49 +0300
Subject: [PATCH 24/52] fix(client/rtl): minor padding issue

---
 apps/client/src/stylesheets/theme-next/dialogs.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index c03fc98c7..c3b1d5238 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -392,7 +392,7 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-inline-start: 8px;
+    padding-inline-end: 8px;
 }
 
 /*

From c4358d52d572774655489a8cc51d2a8c787c941b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:28:41 +0300
Subject: [PATCH 25/52] fix(server): crash in prod due to RTL

---
 apps/server/src/routes/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/server/src/routes/index.ts b/apps/server/src/routes/index.ts
index 2f579edaf..bd753d3af 100644
--- a/apps/server/src/routes/index.ts
+++ b/apps/server/src/routes/index.ts
@@ -59,7 +59,7 @@ function index(req: Request, res: Response) {
         triliumVersion: packageJson.version,
         assetPath: assetPath,
         appPath: appPath,
-        isRtl: LOCALES.find(l => l.id === options.locale)?.rtl
+        isRtl: !!LOCALES.find(l => l.id === options.locale)?.rtl
     });
 }
 

From d35f97d99a89c0840709f48d74a5498669f5bbe1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:35:57 +0300
Subject: [PATCH 26/52] feat(client/rtl): hide English RTL from production

---
 .../src/widgets/type_widgets/options/i18n.tsx    | 16 ++++++++++------
 packages/commons/src/lib/i18n.ts                 | 10 +++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index 309f164bb..d69e2a395 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -24,9 +24,13 @@ export default function InternationalizationOptions() {
 
 function LocalizationOptions() {
     const { uiLocales, formattingLocales: contentLocales } = useMemo(() => {
-        const allLocales = getAvailableLocales();        
+        const allLocales = getAvailableLocales();
         return {
-            uiLocales: allLocales.filter(locale => !locale.contentOnly),
+            uiLocales: allLocales.filter(locale => {
+                if (locale.contentOnly) return false;
+                if (locale.devOnly && !glob.isDev) return false;
+                return true;
+            }),
             formattingLocales: allLocales.filter(locale => locale.electronLocale),
         }
     }, []);
@@ -53,7 +57,7 @@ function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string;
     return <FormSelect
         id={id}
         values={locales}
-        keyProperty="id" titleProperty="name"                
+        keyProperty="id" titleProperty="name"
         currentValue={currentValue} onChange={onChange}
     />;
 }
@@ -74,7 +78,7 @@ function DateSettings() {
                     ]}
                     currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
                 />
-            </OptionsRow>  
+            </OptionsRow>
 
             <OptionsRow name="first-week-of-year" label={t("i18n.first-week-of-the-year")}>
                 <FormRadioGroup
@@ -93,7 +97,7 @@ function DateSettings() {
                     keyProperty="days"
                     currentValue={minDaysInFirstWeek} onChange={setMinDaysInFirstWeek}
                     values={Array.from(
-                        { length: 7 }, 
+                        { length: 7 },
                         (_, i) => ({ days: String(i + 1) }))} />
             </OptionsRow>}
 
@@ -139,4 +143,4 @@ export function ContentLanguagesList() {
             columnWidth="300px"
         />
     );
-}
\ No newline at end of file
+}
diff --git a/packages/commons/src/lib/i18n.ts b/packages/commons/src/lib/i18n.ts
index a6679f542..4941c2db7 100644
--- a/packages/commons/src/lib/i18n.ts
+++ b/packages/commons/src/lib/i18n.ts
@@ -5,6 +5,8 @@ export interface Locale {
     rtl?: boolean;
     /** `true` if the language is not supported by the application as a display language, but it is selectable by the user for the content. */
     contentOnly?: boolean;
+    /** `true` if the language should only be visible while in development mode, and not in production. */
+    devOnly?: boolean;
     /** The value to pass to `--lang` for the Electron instance in order to set it as a locale. Not setting it will hide it from the list of supported locales. */
     electronLocale?: "en" | "de" | "es" | "fr" | "zh_CN" | "zh_TW" | "ro" | "af" | "am" | "ar" | "bg" | "bn" | "ca" | "cs" | "da" | "el" | "en_GB" | "es_419" | "et" | "fa" | "fi" | "fil" | "gu" | "he" | "hi" | "hr" | "hu" | "id" | "it" | "ja" | "kn" | "ko" | "lt" | "lv" | "ml" | "mr" | "ms" | "nb" | "nl" | "pl" | "pt_BR" | "pt_PT" | "ru" | "sk" | "sl" | "sr" | "sv" | "sw" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "vi";
 }
@@ -28,7 +30,13 @@ const UNSORTED_LOCALES: Locale[] = [
      *
      * These are only displayed while in dev mode, to test some language particularities (such as RTL) more easily.
      */
-    { id: "en_rtl", name: "English (right-to-left) [dev]", electronLocale: "en", rtl: true },
+    {
+        id: "en_rtl",
+        name: "English (right-to-left) [dev]",
+        electronLocale: "en",
+        rtl: true,
+        devOnly: true
+    },
 
     /*
      * Right to left languages

From 06d87dc94bdd78d58e51c6eb648e0a1fafb3dd02 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:41:48 +0300
Subject: [PATCH 27/52] fix(client/rtl): sidebar always displayed on mobile

---
 .../src/widgets/mobile_widgets/sidebar_container.ts    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
index b01d5ff12..5a8510c08 100644
--- a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
+++ b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
@@ -149,7 +149,15 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
         }
 
         this.sidebarEl.classList.toggle("show", isOpen);
-        this.sidebarEl.style.transform = isOpen ? "translateX(0)" : "translateX(-100%)";
+        if (isOpen) {
+            this.sidebarEl.style.transform = "translateX(0)";
+        } else {
+            if (glob.isRtl) {
+                this.sidebarEl.style.transform = "translateX(100%)"
+            } else {
+                this.sidebarEl.style.transform = "translateX(-100%)";
+            }
+        }
         this.sidebarEl.style.transition = this.originalSidebarTransition;
 
         this.backdropEl.classList.toggle("show", isOpen);

From 3e54e0fc422b9808d6040a03dcff4503f981b1e6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:46:26 +0300
Subject: [PATCH 28/52] fix(client/rtl): sidebar not draggable

---
 .../src/widgets/mobile_widgets/sidebar_container.ts       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
index 5a8510c08..1219ee799 100644
--- a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
+++ b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
@@ -66,7 +66,7 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
         }
 
         const x = "touches" in e ? e.touches[0].clientX : e.clientX;
-        const deltaX = x - this.startX;
+        const deltaX = glob.isRtl ? this.startX - x : x - this.startX;
         if (this.dragState === DRAG_STATE_INITIAL_DRAG) {
             if (this.currentTranslate === -100 ? deltaX > DRAG_CLOSED_START_THRESHOLD : deltaX < -DRAG_OPENED_START_THRESHOLD) {
                 /* Disable the transitions since they affect performance, they are going to reenabled once drag ends. */
@@ -87,7 +87,11 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
             const width = this.sidebarEl.offsetWidth;
             const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
             this.translatePercentage = translatePercentage;
-            this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+            if (glob.isRtl) {
+                this.sidebarEl.style.transform = `translateX(${-translatePercentage}%)`;
+            } else {
+                this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+            }
             this.backdropEl.style.opacity = String(Math.max(0, 1 + translatePercentage / 100));
         }
 

From b8f0fc722c06df0513aa0c77246c15f213c15e0c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 21:54:39 +0300
Subject: [PATCH 29/52] chore(client/rtl): use different mechanism for
 calculating drag state

---
 .../src/widgets/mobile_widgets/sidebar_container.ts  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
index 1219ee799..68ce2b8d9 100644
--- a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
+++ b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
@@ -85,14 +85,14 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
             }
         } else if (this.dragState === DRAG_STATE_DRAGGING) {
             const width = this.sidebarEl.offsetWidth;
-            const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
-            this.translatePercentage = translatePercentage;
+            let translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
+            const backdropOpacity = Math.max(0, 1 + translatePercentage / 100);
             if (glob.isRtl) {
-                this.sidebarEl.style.transform = `translateX(${-translatePercentage}%)`;
-            } else {
-                this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+                translatePercentage *= -1;
             }
-            this.backdropEl.style.opacity = String(Math.max(0, 1 + translatePercentage / 100));
+            this.translatePercentage = translatePercentage;
+            this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+            this.backdropEl.style.opacity = String(backdropOpacity);
         }
 
         // Consume the event to prevent the user from doing the back to previous page gesture on iOS.

From 13d2721696b962c6c6a55f7f157fbc422ebb4444 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 22:03:56 +0300
Subject: [PATCH 30/52] chore(client/rtl): normalize values between RTL and LTR

---
 .../src/widgets/mobile_widgets/sidebar_container.ts      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
index 68ce2b8d9..682eb23fa 100644
--- a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
+++ b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
@@ -87,11 +87,12 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
             const width = this.sidebarEl.offsetWidth;
             let translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
             const backdropOpacity = Math.max(0, 1 + translatePercentage / 100);
-            if (glob.isRtl) {
-                translatePercentage *= -1;
-            }
             this.translatePercentage = translatePercentage;
-            this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+            if (glob.isRtl) {
+                this.sidebarEl.style.transform = `translateX(${-translatePercentage}%)`;
+            } else {
+                this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
+            }
             this.backdropEl.style.opacity = String(backdropOpacity);
         }
 

From ea3cf8078ea3cc79551fb351a8cd687d9510714d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 22:13:52 +0300
Subject: [PATCH 31/52] fix(client/rtl): initial drag of mobile tree not
 working

---
 apps/client/src/widgets/mobile_widgets/sidebar_container.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
index 682eb23fa..ef719d36a 100644
--- a/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
+++ b/apps/client/src/widgets/mobile_widgets/sidebar_container.ts
@@ -27,6 +27,7 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
     private backdropEl!: HTMLElement;
     private originalSidebarTransition: string;
     private originalBackdropTransition: string;
+    private screenWidth: number;
 
     constructor(screenName: Screen, direction: FlexDirection) {
         super(direction);
@@ -37,6 +38,7 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
         this.dragState = DRAG_STATE_NONE;
         this.originalSidebarTransition = "";
         this.originalBackdropTransition = "";
+        this.screenWidth = document.body.getBoundingClientRect().width;
     }
 
     doRender() {
@@ -51,7 +53,9 @@ export default class SidebarContainer extends FlexContainer<BasicWidget> {
         const x = "touches" in e ? e.touches[0].clientX : e.clientX;
         this.startX = x;
 
-        if (x > 30 && this.currentTranslate === -100) {
+        // Prevent dragging if too far from the edge of the screen and the menu is closed.
+        let dragRefX = glob.isRtl ? this.screenWidth - x : x;
+        if (dragRefX > 30 && this.currentTranslate === -100) {
             return;
         }
 

From a377a0ef1577b88fff5e5ac4c365d2870445d0f8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 22:24:05 +0300
Subject: [PATCH 32/52] chore(i18n): translate a missing string

---
 apps/client/src/translations/en/translation.json              | 1 +
 apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index c6565fdfc..49090efa7 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -736,6 +736,7 @@
   "mobile_detail_menu": {
     "insert_child_note": "Insert child note",
     "delete_this_note": "Delete this note",
+    "note_revisions": "Note revisions",
     "error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'",
     "error_unrecognized_command": "Unrecognized command {{command}}"
   },
diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
index a9e88246e..255ac8c99 100644
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
@@ -25,7 +25,7 @@ export default function MobileDetailMenu() {
                         { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
                         { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
                         { kind: "separator" },
-                        { title: "Note revisions", command: "showRevisions", uiIcon: "bx bx-history" }
+                        { title: t("mobile_detail_menu.note_revisions"), command: "showRevisions", uiIcon: "bx bx-history" }
                     ],
                     selectMenuItemHandler: async ({ command }) => {
                         if (command === "insertChildNote") {

From f9a841245c25b438200c85495dd21cca17f235c2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 22:26:43 +0300
Subject: [PATCH 33/52] fix(client/rtl): mobile detail menu appearing on the
 wrong side

---
 apps/client/src/menus/context_menu.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/menus/context_menu.ts b/apps/client/src/menus/context_menu.ts
index 7b8ded20e..9efdac65f 100644
--- a/apps/client/src/menus/context_menu.ts
+++ b/apps/client/src/menus/context_menu.ts
@@ -150,8 +150,8 @@ class ContextMenu {
         this.$widget
             .css({
                 display: "block",
-                top: top,
-                "inset-inline-start": left
+                top,
+                left
             })
             .addClass("show");
     }

From f880aa769c468ab0c7afe382ddf5c25bab4a3c10 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 17:45:48 +0300
Subject: [PATCH 34/52] fix(client/rtl): wrong order of tabs

---
 apps/client/src/stylesheets/theme-next/shell.css | 2 +-
 apps/client/src/widgets/tab_row.ts               | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 6e8beb777..bbae31685 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -1055,7 +1055,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     background-color: var(--workspace-tab-background-color);
 }
 
-.tab-row-widget .note-tab:nth-child(1) {
+body:not([dir=rtl]) .tab-row-widget .note-tab:nth-child(1) {
     transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0);
 }
 
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index 84c96378b..c2405aaed 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -500,6 +500,9 @@ export default class TabRowWidget extends BasicWidget {
         position -= MARGIN_WIDTH; // the last margin should not be applied
 
         const anchorPosition = position;
+        if (glob.isRtl) {
+            tabPositions.reverse();
+        }
 
         return { tabPositions, anchorPosition };
     }

From 3ab8627db8ce73cf921344555ab5c327a790d1ed Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 17:55:05 +0300
Subject: [PATCH 35/52] feat(client/rtl): enable Arabic as dev-only language
 for now

---
 packages/commons/src/lib/i18n.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/commons/src/lib/i18n.ts b/packages/commons/src/lib/i18n.ts
index 4941c2db7..d036fcf29 100644
--- a/packages/commons/src/lib/i18n.ts
+++ b/packages/commons/src/lib/i18n.ts
@@ -47,7 +47,7 @@ const UNSORTED_LOCALES: Locale[] = [
         id: "ar",
         name: "اَلْعَرَبِيَّةُ",
         rtl: true,
-        contentOnly: true
+        devOnly: true
     },
     { // Hebrew
         id: "he",

From 2c71a563244721de4cde8909b8d9503f2e8293c0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 17:55:17 +0300
Subject: [PATCH 36/52] chore(client/rtl): revert dropdown arrow

---
 apps/client/src/stylesheets/theme-next/base.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 8be096202..6c4042599 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -246,6 +246,10 @@ html body .dropdown-item[disabled] {
     color: var(--menu-item-arrow-color) !important;
 }
 
+body[dir=rtl] .dropdown-menu .dropdown-toggle::after {
+    content: "\ea4d" !important;
+}
+
 /* Menu item group heading */
 
 /* The heading body */

From 74d7191222c968bc92a7eed4fdb43f63fed6d450 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 17:57:58 +0300
Subject: [PATCH 37/52] chore(client/rtl): fix alignment of global menu in
 horizontal layout

---
 apps/client/src/stylesheets/theme-next/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 6c4042599..a167c08b5 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -246,7 +246,7 @@ html body .dropdown-item[disabled] {
     color: var(--menu-item-arrow-color) !important;
 }
 
-body[dir=rtl] .dropdown-menu .dropdown-toggle::after {
+body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdown-toggle::after {
     content: "\ea4d" !important;
 }
 

From f4df7c1eec3bb904714b4699c7edf89653317369 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 18:34:32 +0300
Subject: [PATCH 38/52] feat(client/rtl): improve alignment of the attribute
 editor

---
 .../src/widgets/ribbon/components/AttributeEditor.tsx       | 6 ++++--
 apps/client/src/widgets/ribbon/style.css                    | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
index 337636265..380241df8 100644
--- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -4,7 +4,7 @@ import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete";
 import CKEditor, { CKEditorApi } from "../../react/CKEditor";
-import { useLegacyImperativeHandlers, useLegacyWidget, useTooltip, useTriliumEvent } from "../../react/hooks";
+import { useLegacyImperativeHandlers, useLegacyWidget, useTooltip, useTriliumEvent, useTriliumOption } from "../../react/hooks";
 import FAttribute from "../../../entities/fattribute";
 import attribute_renderer from "../../../services/attribute_renderer";
 import FNote from "../../../entities/fnote";
@@ -100,6 +100,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
     const currentValueRef = useRef(currentValue);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const editorRef = useRef<CKEditorApi>();
+    const [ locale ] = useTriliumOption("locale");
 
     const { showTooltip, hideTooltip } = useTooltip(wrapperRef, {
         trigger: "focus",
@@ -308,7 +309,8 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                         toolbar: { items: [] },
                         placeholder: t("attribute_editor.placeholder"),
                         mention: { feeds: mentionSetup },
-                        licenseKey: "GPL"
+                        licenseKey: "GPL",
+                        language: "en"
                     }}
                     onChange={(currentValue) => {
                         currentValueRef.current = currentValue ?? "";
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 9adcad69a..495032457 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -285,6 +285,11 @@
     transition: opacity .1s linear;
 }
 
+body[dir=rtl] .attribute-list-editor {
+    padding: 0 5px 0 100px !important;
+    text-align: right !important;
+}
+
 .attribute-list-editor.ck-content .mention {
     color: var(--muted-text-color) !important;
     background: transparent !important;

From 3c2642e822ac9769163cb35baadf9cca6a661841 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 18:44:35 +0300
Subject: [PATCH 39/52] feat(client/i18n): enable formatting locale on browser
 as well & use for date formatting

---
 apps/client/src/utils/formatters.ts                   | 6 ++++--
 apps/client/src/widgets/type_widgets/options/i18n.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/utils/formatters.ts b/apps/client/src/utils/formatters.ts
index d3209be7b..664580c65 100644
--- a/apps/client/src/utils/formatters.ts
+++ b/apps/client/src/utils/formatters.ts
@@ -1,3 +1,5 @@
+import options from "../services/options";
+
 type DateTimeStyle = "full" | "long" | "medium" | "short" | "none" | undefined;
 
 /**
@@ -8,7 +10,7 @@ export function formatDateTime(date: string | Date | number | null | undefined,
         return "";
     }
 
-    const locale = navigator.language;
+    const locale = options.get("formattingLocale") ?? options.get("locale") ?? navigator.language;
 
     let parsedDate;
     if (typeof date === "string" || typeof date === "number") {
@@ -24,7 +26,7 @@ export function formatDateTime(date: string | Date | number | null | undefined,
 
     if (timeStyle !== "none" && dateStyle !== "none") {
         // Format the date and time
-        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle, timeStyle });
+        const formatter = new Intl.DateTimeFormat(locale, { dateStyle, timeStyle });
         return formatter.format(parsedDate);
     } else if (timeStyle === "none" && dateStyle !== "none") {
         // Format only the date
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index d69e2a395..9ebca626b 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -44,7 +44,7 @@ function LocalizationOptions() {
                 <LocaleSelector locales={uiLocales} currentValue={locale} onChange={setLocale} />
             </OptionsRow>
 
-            {isElectron() && <OptionsRow name="formatting-locale" label={t("i18n.formatting-locale")}>
+            {<OptionsRow name="formatting-locale" label={t("i18n.formatting-locale")}>
                 <LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
             </OptionsRow>}
 

From 6d9bdd5c6fe1e24268f101041117fa691e55ed95 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 18:47:10 +0300
Subject: [PATCH 40/52] feat(client/rtl): support formatting locale for Arabic

---
 packages/commons/src/lib/i18n.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/commons/src/lib/i18n.ts b/packages/commons/src/lib/i18n.ts
index d036fcf29..4de84afeb 100644
--- a/packages/commons/src/lib/i18n.ts
+++ b/packages/commons/src/lib/i18n.ts
@@ -47,7 +47,8 @@ const UNSORTED_LOCALES: Locale[] = [
         id: "ar",
         name: "اَلْعَرَبِيَّةُ",
         rtl: true,
-        devOnly: true
+        devOnly: true,
+        electronLocale: "ar"
     },
     { // Hebrew
         id: "he",

From ea4fe3f2902b8afb3f60a1768c6477f56e1d2c0e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 18:54:55 +0300
Subject: [PATCH 41/52] feat(i18n): add an option to automatically match
 formatting locale to set locale

---
 apps/client/src/translations/en/translation.json      | 3 ++-
 apps/client/src/utils/formatters.ts                   | 2 +-
 apps/client/src/widgets/type_widgets/options/i18n.tsx | 7 +++++--
 apps/desktop/src/main.ts                              | 2 +-
 apps/server/src/services/options_init.ts              | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 49090efa7..0d962270d 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1424,7 +1424,8 @@
     "min-days-in-first-week": "Minimum days in first week",
     "first-week-info": "First week contains first Thursday of the year is based on <a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a> standard.",
     "first-week-warning": "Changing first week options may cause duplicate with existing Week Notes and the existing Week Notes will not be updated accordingly.",
-    "formatting-locale": "Date & number format"
+    "formatting-locale": "Date & number format",
+    "formatting-locale-auto": "Based on the application's language"
   },
   "backup": {
     "automatic_backup": "Automatic backup",
diff --git a/apps/client/src/utils/formatters.ts b/apps/client/src/utils/formatters.ts
index 664580c65..40f97e673 100644
--- a/apps/client/src/utils/formatters.ts
+++ b/apps/client/src/utils/formatters.ts
@@ -10,7 +10,7 @@ export function formatDateTime(date: string | Date | number | null | undefined,
         return "";
     }
 
-    const locale = options.get("formattingLocale") ?? options.get("locale") ?? navigator.language;
+    const locale = options.get("formattingLocale") || options.get("locale") || navigator.language;
 
     let parsedDate;
     if (typeof date === "string" || typeof date === "number") {
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index 9ebca626b..1084a05a8 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -23,7 +23,7 @@ export default function InternationalizationOptions() {
 }
 
 function LocalizationOptions() {
-    const { uiLocales, formattingLocales: contentLocales } = useMemo(() => {
+    const { uiLocales, formattingLocales: contentLocales } = useMemo<{ uiLocales: Locale[], formattingLocales: Locale[] }>(() => {
         const allLocales = getAvailableLocales();
         return {
             uiLocales: allLocales.filter(locale => {
@@ -31,7 +31,10 @@ function LocalizationOptions() {
                 if (locale.devOnly && !glob.isDev) return false;
                 return true;
             }),
-            formattingLocales: allLocales.filter(locale => locale.electronLocale),
+            formattingLocales: [
+                { id: "", name: t("i18n.formatting-locale-auto") },
+                ...allLocales.filter(locale => locale.electronLocale)
+            ]
         }
     }, []);
 
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index 000d4c458..52ebe458b 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -30,7 +30,7 @@ async function main() {
 
     // needed for excalidraw export https://github.com/zadam/trilium/issues/4271
     app.commandLine.appendSwitch("enable-experimental-web-platform-features");
-    app.commandLine.appendSwitch("lang", options.getOptionOrNull("formattingLocale") ?? "en");
+    app.commandLine.appendSwitch("lang", options.getOptionOrNull("formattingLocale") || options.getOptionOrNull("locale") || "en");
 
     // Disable smooth scroll if the option is set
     const smoothScrollEnabled = options.getOptionOrNull("smoothScrollEnabled");
diff --git a/apps/server/src/services/options_init.ts b/apps/server/src/services/options_init.ts
index 0908a0512..c6e0231c5 100644
--- a/apps/server/src/services/options_init.ts
+++ b/apps/server/src/services/options_init.ts
@@ -159,7 +159,7 @@ const defaultOptions: DefaultOption[] = [
 
     // Internationalization
     { name: "locale", value: "en", isSynced: true },
-    { name: "formattingLocale", value: "en", isSynced: true },
+    { name: "formattingLocale", value: "", isSynced: true }, // no value means auto-detect
     { name: "firstDayOfWeek", value: "1", isSynced: true },
     { name: "firstWeekOfYear", value: "0", isSynced: true },
     { name: "minDaysInFirstWeek", value: "4", isSynced: true },

From 6f51d82f82092ae7aee8649731a3e89427fc995e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 18:59:38 +0300
Subject: [PATCH 42/52] fix(login): layout shift due to bootstrap loading later

---
 apps/server/src/assets/views/login.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/server/src/assets/views/login.ejs b/apps/server/src/assets/views/login.ejs
index 4cd3c6a00..1c09c0718 100644
--- a/apps/server/src/assets/views/login.ejs
+++ b/apps/server/src/assets/views/login.ejs
@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
     <style>
-        .login-page {
+        body {
             /* Prevent the content from being rendered before the main stylesheet loads */
             display: none;
         }

From 2936a537cf2357601e0fe5b14d1302994d2ba633 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:12:46 +0300
Subject: [PATCH 43/52] feat(rtl): apply same mechanism for
 login/desktop/mobile

---
 apps/client/src/runtime.ts                             | 2 +-
 apps/server/src/assets/views/desktop.ejs               | 6 +++++-
 apps/server/src/assets/views/login.ejs                 | 2 +-
 apps/server/src/assets/views/mobile.ejs                | 5 ++++-
 apps/server/src/assets/views/partials/windowGlobal.ejs | 2 +-
 apps/server/src/routes/index.ts                        | 4 ++--
 apps/server/src/routes/login.ts                        | 2 ++
 apps/server/src/services/i18n.ts                       | 7 +++++++
 8 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/runtime.ts b/apps/client/src/runtime.ts
index 9de27af18..4c82481b1 100644
--- a/apps/client/src/runtime.ts
+++ b/apps/client/src/runtime.ts
@@ -1,7 +1,7 @@
 import $ from "jquery";
 
 async function loadBootstrap() {
-    if (glob.isRtl) {
+    if (document.body.dir === "rtl") {
         await import("bootstrap/dist/css/bootstrap.rtl.min.css");
     } else {
         await import("bootstrap/dist/css/bootstrap.min.css");
diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs
index 6ebe751ae..5ff145a8d 100644
--- a/apps/server/src/assets/views/desktop.ejs
+++ b/apps/server/src/assets/views/desktop.ejs
@@ -9,7 +9,11 @@
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
     <title>Trilium Notes</title>
 </head>
-<body id="trilium-app" class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>">
+<body
+  id="trilium-app"
+  class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>"
+  lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
+>
 <noscript><%= t("javascript-required") %></noscript>
 
 <script>
diff --git a/apps/server/src/assets/views/login.ejs b/apps/server/src/assets/views/login.ejs
index 1c09c0718..eaa606f5d 100644
--- a/apps/server/src/assets/views/login.ejs
+++ b/apps/server/src/assets/views/login.ejs
@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
 </head>
-<body>
+<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
 <div class="container login-page">
     <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto pt-4">
         <img class="img-fluid d-block mx-auto" style="height: 8rem;" src="<%= assetPathFragment %>/images/icon-color.svg" aria-hidden="true" draggable="false" >
diff --git a/apps/server/src/assets/views/mobile.ejs b/apps/server/src/assets/views/mobile.ejs
index d210c5ca7..98eae46df 100644
--- a/apps/server/src/assets/views/mobile.ejs
+++ b/apps/server/src/assets/views/mobile.ejs
@@ -97,7 +97,10 @@
         }
     </style>
 </head>
-<body class="mobile heading-style-<%= headingStyle %>">
+<body
+    class="mobile heading-style-<%= headingStyle %>"
+    lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
+>
 <noscript><%= t("javascript-required") %></noscript>
 
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
diff --git a/apps/server/src/assets/views/partials/windowGlobal.ejs b/apps/server/src/assets/views/partials/windowGlobal.ejs
index 33b42c5f9..184e90a5d 100644
--- a/apps/server/src/assets/views/partials/windowGlobal.ejs
+++ b/apps/server/src/assets/views/partials/windowGlobal.ejs
@@ -19,6 +19,6 @@
         platform: "<%= platform %>",
         hasNativeTitleBar: <%= hasNativeTitleBar %>,
         TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>,
-        isRtl: <%= isRtl %>
+        isRtl: <%= !!currentLocale.isRtl %>
     };
 </script>
\ No newline at end of file
diff --git a/apps/server/src/routes/index.ts b/apps/server/src/routes/index.ts
index bd753d3af..6bede94d7 100644
--- a/apps/server/src/routes/index.ts
+++ b/apps/server/src/routes/index.ts
@@ -14,7 +14,7 @@ import { generateToken as generateCsrfToken } from "./csrf_protection.js";
 
 import type { Request, Response } from "express";
 import type BNote from "../becca/entities/bnote.js";
-import { LOCALES } from "@triliumnext/commons";
+import { getCurrentLocale } from "../services/i18n.js";
 
 function index(req: Request, res: Response) {
     const options = optionService.getOptionMap();
@@ -59,7 +59,7 @@ function index(req: Request, res: Response) {
         triliumVersion: packageJson.version,
         assetPath: assetPath,
         appPath: appPath,
-        isRtl: !!LOCALES.find(l => l.id === options.locale)?.rtl
+        currentLocale: getCurrentLocale()
     });
 }
 
diff --git a/apps/server/src/routes/login.ts b/apps/server/src/routes/login.ts
index 2acb3a4d5..107fb1494 100644
--- a/apps/server/src/routes/login.ts
+++ b/apps/server/src/routes/login.ts
@@ -11,6 +11,7 @@ import totp from '../services/totp.js';
 import recoveryCodeService from '../services/encryption/recovery_codes.js';
 import openID from '../services/open_id.js';
 import openIDEncryption from '../services/encryption/open_id_encryption.js';
+import { getCurrentLocale } from "../services/i18n.js";
 
 function loginPage(req: Request, res: Response) {
     // Login page is triggered twice. Once here, and another time if the password is failed.
@@ -24,6 +25,7 @@ function loginPage(req: Request, res: Response) {
         assetPath: assetPath,
         assetPathFragment: assetUrlFragment,
         appPath: appPath,
+        currentLocale: getCurrentLocale()
     });
 }
 
diff --git a/apps/server/src/services/i18n.ts b/apps/server/src/services/i18n.ts
index 1199bd796..a23ff7ea2 100644
--- a/apps/server/src/services/i18n.ts
+++ b/apps/server/src/services/i18n.ts
@@ -76,3 +76,10 @@ export async function changeLanguage(locale: string) {
     await i18next.changeLanguage(locale);
     hidden_subtree.checkHiddenSubtree(true, { restoreNames: true });
 }
+
+export function getCurrentLocale() {
+    const localeId = options.getOptionOrNull("locale") ?? "en";
+    const currentLocale = LOCALES.find(l => l.id === localeId);
+    if (!currentLocale) return LOCALES.find(l => l.id === "en")!;
+    return currentLocale;
+}

From 90524d99dc019c760400e59be4179997b8a38d40 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:16:12 +0300
Subject: [PATCH 44/52] refactor(server): remove template-level loading of
 bootstrap

---
 apps/server/src/assets/views/desktop.ejs      | 1 -
 apps/server/src/assets/views/login.ejs        | 2 --
 apps/server/src/assets/views/mobile.ejs       | 1 -
 apps/server/src/assets/views/set_password.ejs | 2 --
 apps/server/src/assets/views/setup.ejs        | 3 ---
 5 files changed, 9 deletions(-)

diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs
index 5ff145a8d..1c0d3401c 100644
--- a/apps/server/src/assets/views/desktop.ejs
+++ b/apps/server/src/assets/views/desktop.ejs
@@ -40,7 +40,6 @@
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-<link href="<%= appPath %>/bootstrap.css" rel="stylesheet">
 <link href="<%= assetPath %>/stylesheets/ckeditor-theme.css" rel="stylesheet">
 <link href="api/fonts" rel="stylesheet">
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet">
diff --git a/apps/server/src/assets/views/login.ejs b/apps/server/src/assets/views/login.ejs
index eaa606f5d..32d976cfe 100644
--- a/apps/server/src/assets/views/login.ejs
+++ b/apps/server/src/assets/views/login.ejs
@@ -12,8 +12,6 @@
             display: none;
         }
     </style>
-    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
-    <link rel="stylesheet" href="<%= appPath %>/bootstrap.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
diff --git a/apps/server/src/assets/views/mobile.ejs b/apps/server/src/assets/views/mobile.ejs
index 98eae46df..a13bf0a6e 100644
--- a/apps/server/src/assets/views/mobile.ejs
+++ b/apps/server/src/assets/views/mobile.ejs
@@ -115,7 +115,6 @@
 <script src="<%= appPath %>/mobile.js" crossorigin type="module"></script>
 
 <link href="api/fonts" rel="stylesheet">
-<link rel="stylesheet" href="<%= appPath %>/bootstrap.css">
 <link href="<%= assetPath %>/stylesheets/ckeditor-theme.css" rel="stylesheet">
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet">
 <% if (themeCssUrl) { %>
diff --git a/apps/server/src/assets/views/set_password.ejs b/apps/server/src/assets/views/set_password.ejs
index 9dddfca50..c0deae401 100644
--- a/apps/server/src/assets/views/set_password.ejs
+++ b/apps/server/src/assets/views/set_password.ejs
@@ -6,8 +6,6 @@
     <title><%= t("set_password.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
-    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
-    <link rel="stylesheet" href="<%= appPath %>/bootstrap.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
diff --git a/apps/server/src/assets/views/setup.ejs b/apps/server/src/assets/views/setup.ejs
index c11368867..b9d4deac3 100644
--- a/apps/server/src/assets/views/setup.ejs
+++ b/apps/server/src/assets/views/setup.ejs
@@ -6,9 +6,6 @@
     <meta id="syncInProgress" content="<%= syncInProgress ? 1 : 0 %>" />
     <title><%= t("setup.title") %></title>
 
-    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
-    <link rel="stylesheet" href="<%= appPath %>/bootstrap.css">
-
     <style>
         .lds-ring {
             display: inline-block;

From 519ada3a48e3c0e1b8fcb365bd992eb25ec311ca Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:18:28 +0300
Subject: [PATCH 45/52] refactor(server): loading runtime JS as early as
 possible

---
 apps/server/src/assets/views/desktop.ejs      | 2 +-
 apps/server/src/assets/views/login.ejs        | 2 +-
 apps/server/src/assets/views/mobile.ejs       | 3 ++-
 apps/server/src/assets/views/set_password.ejs | 2 +-
 apps/server/src/assets/views/setup.ejs        | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs
index 1c0d3401c..a86b7e7a0 100644
--- a/apps/server/src/assets/views/desktop.ejs
+++ b/apps/server/src/assets/views/desktop.ejs
@@ -8,6 +8,7 @@
 	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
     <title>Trilium Notes</title>
+    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
 <body
   id="trilium-app"
@@ -60,7 +61,6 @@
 <link href="<%= assetPath %>/src/boxicons.css" rel="stylesheet">
 <link href="<%= assetPath %>/stylesheets/print.css" rel="stylesheet" media="print">
 
-<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/desktop.js" crossorigin type="module"></script>
 
 </body>
diff --git a/apps/server/src/assets/views/login.ejs b/apps/server/src/assets/views/login.ejs
index 32d976cfe..4ffab5101 100644
--- a/apps/server/src/assets/views/login.ejs
+++ b/apps/server/src/assets/views/login.ejs
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
+    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
 <body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
 <div class="container login-page">
@@ -74,7 +75,6 @@
     </div>
 </div>
 
-<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/login.js" crossorigin type="module"></script>
 
 </body>
diff --git a/apps/server/src/assets/views/mobile.ejs b/apps/server/src/assets/views/mobile.ejs
index a13bf0a6e..b5ea77a16 100644
--- a/apps/server/src/assets/views/mobile.ejs
+++ b/apps/server/src/assets/views/mobile.ejs
@@ -96,6 +96,8 @@
             }
         }
     </style>
+
+    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
 <body
     class="mobile heading-style-<%= headingStyle %>"
@@ -111,7 +113,6 @@
 
 <%- include("./partials/windowGlobal.ejs", locals) %>
 
-<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/mobile.js" crossorigin type="module"></script>
 
 <link href="api/fonts" rel="stylesheet">
diff --git a/apps/server/src/assets/views/set_password.ejs b/apps/server/src/assets/views/set_password.ejs
index c0deae401..e861af0d2 100644
--- a/apps/server/src/assets/views/set_password.ejs
+++ b/apps/server/src/assets/views/set_password.ejs
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
+    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
 <body>
 <div class="container set-password">
@@ -44,7 +45,6 @@
     </div>
 </div>
 
-<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/set_password.js" crossorigin type="module"></script>
 
 </body>
diff --git a/apps/server/src/assets/views/setup.ejs b/apps/server/src/assets/views/setup.ejs
index b9d4deac3..b477a6bc9 100644
--- a/apps/server/src/assets/views/setup.ejs
+++ b/apps/server/src/assets/views/setup.ejs
@@ -43,6 +43,7 @@
             }
         }
     </style>
+    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
 <body>
 <noscript><%= t("javascript-required") %></noscript>
@@ -165,7 +166,6 @@
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
 <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />

From e08a9e1915339e027d66b853f07812fe0c510446 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:28:05 +0300
Subject: [PATCH 46/52] chore(client): add Arabic to full calendar

---
 apps/client/src/services/i18n.spec.ts                  | 2 +-
 apps/client/src/widgets/collections/calendar/index.tsx | 7 ++++---
 packages/commons/src/lib/i18n.ts                       | 5 ++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/services/i18n.spec.ts b/apps/client/src/services/i18n.spec.ts
index e64605949..e40881643 100644
--- a/apps/client/src/services/i18n.spec.ts
+++ b/apps/client/src/services/i18n.spec.ts
@@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest";
 describe("i18n", () => {
     it("translations are valid JSON", () => {
         for (const locale of LOCALES) {
-            if (locale.contentOnly) {
+            if (locale.contentOnly || locale.id === "en_rtl") {
                 continue;
             }
 
diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index c22155585..2d7d77b2e 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -3,8 +3,8 @@ import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import "./index.css";
-import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTouchBar, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
-import { LOCALE_IDS } from "@triliumnext/commons";
+import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { DISPLAYABLE_LOCALE_IDS, LOCALE_IDS } from "@triliumnext/commons";
 import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
 import dialog from "../../../services/dialog";
@@ -62,7 +62,7 @@ const CALENDAR_VIEWS = [
 const SUPPORTED_CALENDAR_VIEW_TYPE = CALENDAR_VIEWS.map(v => v.type);
 
 // Here we hard-code the imports in order to ensure that they are embedded by webpack without having to load all the languages.
-export const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput }>) | null> = {
+export const LOCALE_MAPPINGS: Record<DISPLAYABLE_LOCALE_IDS, (() => Promise<{ default: LocaleInput }>) | null> = {
     de: () => import("@fullcalendar/core/locales/de"),
     es: () => import("@fullcalendar/core/locales/es"),
     fr: () => import("@fullcalendar/core/locales/fr"),
@@ -76,6 +76,7 @@ export const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: Local
     uk: () => import("@fullcalendar/core/locales/uk"),
     en: null,
     "en_rtl": null,
+    ar: () => import("@fullcalendar/core/locales/ar")
 };
 
 export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
diff --git a/packages/commons/src/lib/i18n.ts b/packages/commons/src/lib/i18n.ts
index 4de84afeb..8e408f2e6 100644
--- a/packages/commons/src/lib/i18n.ts
+++ b/packages/commons/src/lib/i18n.ts
@@ -11,7 +11,7 @@ export interface Locale {
     electronLocale?: "en" | "de" | "es" | "fr" | "zh_CN" | "zh_TW" | "ro" | "af" | "am" | "ar" | "bg" | "bn" | "ca" | "cs" | "da" | "el" | "en_GB" | "es_419" | "et" | "fa" | "fi" | "fil" | "gu" | "he" | "hi" | "hr" | "hu" | "id" | "it" | "ja" | "kn" | "ko" | "lt" | "lv" | "ml" | "mr" | "ms" | "nb" | "nl" | "pl" | "pt_BR" | "pt_PT" | "ru" | "sk" | "sl" | "sr" | "sv" | "sw" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "vi";
 }
 
-const UNSORTED_LOCALES: Locale[] = [
+const UNSORTED_LOCALES = [
     { id: "cn", name: "简体中文", electronLocale: "zh_CN" },
     { id: "de", name: "Deutsch", electronLocale: "de" },
     { id: "en", name: "English", electronLocale: "en" },
@@ -73,4 +73,7 @@ const UNSORTED_LOCALES: Locale[] = [
 export const LOCALES: Locale[] = Array.from(UNSORTED_LOCALES)
     .sort((a, b) => a.name.localeCompare(b.name));
 
+/** A type containing a string union of all the supported locales, including those that are content-only. */
 export type LOCALE_IDS = typeof UNSORTED_LOCALES[number]["id"];
+/** A type containing a string union of all the supported locales that are not content-only (i.e. can be used as the UI language). */
+export type DISPLAYABLE_LOCALE_IDS = Exclude<typeof UNSORTED_LOCALES[number], { contentOnly: true }>["id"];

From b34fbff6d194e46af0155c3f5fd5b65bb0218d44 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:30:55 +0300
Subject: [PATCH 47/52] test(server): failing i18n test due to dev language

---
 apps/server/src/services/i18n.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/server/src/services/i18n.spec.ts b/apps/server/src/services/i18n.spec.ts
index a77368249..00dfd113b 100644
--- a/apps/server/src/services/i18n.spec.ts
+++ b/apps/server/src/services/i18n.spec.ts
@@ -6,7 +6,7 @@ import { DAYJS_LOADER } from "./i18n";
 describe("i18n", () => {
     it("translations are valid JSON", () => {
         for (const locale of LOCALES) {
-            if (locale.contentOnly) {
+            if (locale.contentOnly || locale.id === "en_rtl") {
                 continue;
             }
 

From 63a08c4bd398efd72ec0c185a7a61f56a0324122 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:33:21 +0300
Subject: [PATCH 48/52] fix(login): failure to load if password was failed

---
 apps/server/src/routes/login.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/server/src/routes/login.ts b/apps/server/src/routes/login.ts
index 107fb1494..873562cd0 100644
--- a/apps/server/src/routes/login.ts
+++ b/apps/server/src/routes/login.ts
@@ -14,7 +14,7 @@ import openIDEncryption from '../services/encryption/open_id_encryption.js';
 import { getCurrentLocale } from "../services/i18n.js";
 
 function loginPage(req: Request, res: Response) {
-    // Login page is triggered twice. Once here, and another time if the password is failed.
+    // Login page is triggered twice. Once here, and another time (see sendLoginError) if the password is failed.
     res.render('login', {
         wrongPassword: false,
         wrongTotp: false,
@@ -177,6 +177,7 @@ function sendLoginError(req: Request, res: Response, errorType: 'password' | 'to
         assetPath: assetPath,
         assetPathFragment: assetUrlFragment,
         appPath: appPath,
+        currentLocale: getCurrentLocale()
     });
 }
 

From b84010318d3e2b6385af0647e80ef2c553adb204 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 19:44:22 +0300
Subject: [PATCH 49/52] fix(server): RTL not reported correctly to JS

---
 apps/server/src/assets/views/partials/windowGlobal.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/server/src/assets/views/partials/windowGlobal.ejs b/apps/server/src/assets/views/partials/windowGlobal.ejs
index 184e90a5d..3536d5265 100644
--- a/apps/server/src/assets/views/partials/windowGlobal.ejs
+++ b/apps/server/src/assets/views/partials/windowGlobal.ejs
@@ -19,6 +19,6 @@
         platform: "<%= platform %>",
         hasNativeTitleBar: <%= hasNativeTitleBar %>,
         TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>,
-        isRtl: <%= !!currentLocale.isRtl %>
+        isRtl: <%= !!currentLocale.rtl %>
     };
 </script>
\ No newline at end of file

From 00b215c0931f059024568406d6567dcf73616719 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 20:46:10 +0300
Subject: [PATCH 50/52] chore(rtl): address requested changes

---
 apps/client/src/widgets/FloatingButtons.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 1d839d140..88257cd67 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -15,7 +15,6 @@
 
 .note-split.rtl .floating-buttons-children,
 .note-split.rtl .show-floating-buttons {
-    inset-inline-end: unset;
     inset-inline-end: 10px;
 }
 

From 492f48199959b33df1f27845ae733de9d2d4af80 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 20:48:30 +0300
Subject: [PATCH 51/52] chore(rtl): address 2nd set of requested changes

---
 apps/server/src/assets/views/set_password.ejs | 2 +-
 apps/server/src/assets/views/setup.ejs        | 2 +-
 apps/server/src/routes/login.ts               | 6 ++++--
 apps/server/src/routes/setup.ts               | 6 ++++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/server/src/assets/views/set_password.ejs b/apps/server/src/assets/views/set_password.ejs
index e861af0d2..56d4ef111 100644
--- a/apps/server/src/assets/views/set_password.ejs
+++ b/apps/server/src/assets/views/set_password.ejs
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
-<body>
+<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
 <div class="container set-password">
     <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto pt-4">
         <h1><%= t("set_password.heading") %></h1>
diff --git a/apps/server/src/assets/views/setup.ejs b/apps/server/src/assets/views/setup.ejs
index b477a6bc9..869542644 100644
--- a/apps/server/src/assets/views/setup.ejs
+++ b/apps/server/src/assets/views/setup.ejs
@@ -45,7 +45,7 @@
     </style>
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
-<body>
+<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
 <noscript><%= t("javascript-required") %></noscript>
 <div class="container">
     <div id="setup-dialog" class="col-md-12 col-lg-8 col-xl-6 mx-auto" style="padding-top: 25px; font-size: larger; display: none;">
diff --git a/apps/server/src/routes/login.ts b/apps/server/src/routes/login.ts
index 873562cd0..1126d9a7f 100644
--- a/apps/server/src/routes/login.ts
+++ b/apps/server/src/routes/login.ts
@@ -33,7 +33,8 @@ function setPasswordPage(req: Request, res: Response) {
     res.render("set_password", {
         error: false,
         assetPath,
-        appPath
+        appPath,
+        currentLocale: getCurrentLocale()
     });
 }
 
@@ -58,7 +59,8 @@ function setPassword(req: Request, res: Response) {
         res.render("set_password", {
             error,
             assetPath,
-            appPath
+            appPath,
+            currentLocale: getCurrentLocale()
         });
         return;
     }
diff --git a/apps/server/src/routes/setup.ts b/apps/server/src/routes/setup.ts
index 5bb0f56c9..4a2a8699a 100644
--- a/apps/server/src/routes/setup.ts
+++ b/apps/server/src/routes/setup.ts
@@ -6,6 +6,7 @@ import { isElectron } from "../services/utils.js";
 import assetPath from "../services/asset_path.js";
 import appPath from "../services/app_path.js";
 import type { Request, Response } from "express";
+import { getCurrentLocale } from "../services/i18n.js";
 
 function setupPage(req: Request, res: Response) {
     if (sqlInit.isDbInitialized()) {
@@ -30,7 +31,8 @@ function setupPage(req: Request, res: Response) {
     res.render("setup", {
         syncInProgress: syncInProgress,
         assetPath: assetPath,
-        appPath: appPath
+        appPath: appPath,
+        currentLocale: getCurrentLocale()
     });
 }
 
@@ -39,7 +41,7 @@ async function handleElectronRedirect() {
     const { app } = await import("electron");
 
     // Wait for the main window to be created before closing the setup window to prevent triggering `window-all-closed`.
-    await windowService.createMainWindow(app); 
+    await windowService.createMainWindow(app);
     windowService.closeSetupWindow();
 
     const tray = (await import("../services/tray.js")).default;

From 4ea2fdf471b54acb90faaa9b25ff3437d9deac38 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 9 Oct 2025 21:02:18 +0300
Subject: [PATCH 52/52] chore(server): hide body in set_password and setup too

---
 apps/server/src/assets/views/set_password.ejs | 6 ++++++
 apps/server/src/assets/views/setup.ejs        | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/apps/server/src/assets/views/set_password.ejs b/apps/server/src/assets/views/set_password.ejs
index 56d4ef111..261071647 100644
--- a/apps/server/src/assets/views/set_password.ejs
+++ b/apps/server/src/assets/views/set_password.ejs
@@ -10,6 +10,12 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
+    <style>
+        body {
+            /* Prevent the content from being rendered before the main stylesheet loads */
+            display: none;
+        }
+    </style>
 </head>
 <body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
 <div class="container set-password">
diff --git a/apps/server/src/assets/views/setup.ejs b/apps/server/src/assets/views/setup.ejs
index 869542644..68ee58b51 100644
--- a/apps/server/src/assets/views/setup.ejs
+++ b/apps/server/src/assets/views/setup.ejs
@@ -7,6 +7,10 @@
     <title><%= t("setup.title") %></title>
 
     <style>
+        body {
+            /* Prevent the content from being rendered before the main stylesheet loads */
+            display: none;
+        }
         .lds-ring {
             display: inline-block;
             position: relative;