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>
     )