From 0bf23494a051a44e188b4351d8edbae72fd1951b Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sun, 20 Oct 2024 17:19:40 +0200
Subject: [PATCH] more adjustments for html dir=rtl + show sidebar on the left
 (configurable)

---
 core/language/en-GB/Misc.multids              |  2 +
 core/language/en-GB/ThemeTweaks.multids       |  3 +-
 core/ui/PageTemplateClassFilters.tid          |  4 ++
 core/wiki/macros/sidebar-resizer.tid          |  4 +-
 themes/tiddlywiki/centralised/styles.tid      | 12 +++--
 themes/tiddlywiki/tight/base.tid              | 10 ++--
 themes/tiddlywiki/vanilla/ThemeTweaks.tid     |  3 +-
 themes/tiddlywiki/vanilla/base.tid            | 51 ++++++++++++++++---
 themes/tiddlywiki/vanilla/options.multids     |  7 +--
 themes/tiddlywiki/vanilla/sidebar-resizer.tid |  4 +-
 10 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 core/ui/PageTemplateClassFilters.tid

diff --git a/core/language/en-GB/Misc.multids b/core/language/en-GB/Misc.multids
index d8c091375..eb295000c 100644
--- a/core/language/en-GB/Misc.multids
+++ b/core/language/en-GB/Misc.multids
@@ -47,6 +47,7 @@ InternalJavaScriptError/Title: Internal JavaScript Error
 InternalJavaScriptError/Hint: Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser
 LayoutSwitcher/Description: Open the layout switcher
 LazyLoadingWarning: <p>Trying to load external content from ''<$text text={{!!_canonical_uri}}/>''</p><p>If this message doesn't disappear, either the tiddler content type doesn't match the type of the external content, or you may be using a browser that doesn't support external content for wikis loaded as standalone files. See https://tiddlywiki.com/#ExternalText</p>
+Left: Left
 LoginToTiddlySpace: Login to TiddlySpace
 Manager/Controls/FilterByTag/None: (none)
 Manager/Controls/FilterByTag/Prompt: Filter by tag:
@@ -73,6 +74,7 @@ PageTemplate/Description: the default ~TiddlyWiki layout
 PageTemplate/Name: Standard Layout
 PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect
 RecentChanges/DateFormat: DDth MMM YYYY
+Right: Right
 Shortcuts/Input/AdvancedSearch/Hint: Open the ~AdvancedSearch panel from within the sidebar search field
 Shortcuts/Input/Accept/Hint: Accept the selected item
 Shortcuts/Input/AcceptVariant/Hint: Accept the selected item (variant)
diff --git a/core/language/en-GB/ThemeTweaks.multids b/core/language/en-GB/ThemeTweaks.multids
index 7c7cd4bd4..249fb7f3d 100644
--- a/core/language/en-GB/ThemeTweaks.multids
+++ b/core/language/en-GB/ThemeTweaks.multids
@@ -6,6 +6,8 @@ Options: Options
 Options/SidebarLayout: Sidebar layout
 Options/SidebarLayout/Fixed-Fluid: Fixed story, fluid sidebar
 Options/SidebarLayout/Fluid-Fixed: Fluid story, fixed sidebar
+Options/SidebarPosition: Sidebar position
+Options/SidebarResizer: Sidebar resizer
 Options/StickyTitles: Sticky titles
 Options/StickyTitles/Hint: Causes tiddler titles to "stick" to the top of the browser window
 Options/CodeWrapping: Wrap long lines in code blocks
@@ -21,7 +23,6 @@ Settings/BackgroundImageSize: Page background image size
 Settings/BackgroundImageSize/Auto: Auto
 Settings/BackgroundImageSize/Cover: Cover
 Settings/BackgroundImageSize/Contain: Contain
-Settings/SidebarResizer: Sidebar resizer
 Metrics: Sizes
 Metrics/FontSize: Font size
 Metrics/LineHeight: Line height
diff --git a/core/ui/PageTemplateClassFilters.tid b/core/ui/PageTemplateClassFilters.tid
new file mode 100644
index 000000000..fbe2660cd
--- /dev/null
+++ b/core/ui/PageTemplateClassFilters.tid
@@ -0,0 +1,4 @@
+title: $:/core/ui/PageTemplateClassFilters
+tags: $:/tags/ClassFilters/PageTemplate
+
+[{$:/themes/tiddlywiki/vanilla/options/sidebarposition}match[left]then[tc-sidebar-left]]
\ No newline at end of file
diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
index f75141eab..7b0bd918a 100644
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -186,9 +186,11 @@ title: $:/core/macros/sidebar-resizer
 </$let>
 \end
 
+\function get.drag.diff() [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!start-posx}] :map[{$:/themes/tiddlywiki/vanilla/options/sidebarposition}match[left]then<currentTiddler>multiply[-1]else<currentTiddler>]
+
 \procedure sidebar-resizer-pointermove-actions()
 <%if [[$:/state/sidebar/resizing]!is[missing]] %>
-	<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff={{{ [<html-direction>!match[rtl]then<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!start-posx}] :else[<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!start-posx}multiply[-1]] }}} startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
+	<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff=<<get.drag.diff>> startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
 		<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
 			<<set_theme_throttling metrics/storyright>>
 			<<set_theme_throttling metrics/tiddlerwidth>>
diff --git a/themes/tiddlywiki/centralised/styles.tid b/themes/tiddlywiki/centralised/styles.tid
index 308273591..eeb35cafa 100644
--- a/themes/tiddlywiki/centralised/styles.tid
+++ b/themes/tiddlywiki/centralised/styles.tid
@@ -17,13 +17,16 @@ tags: [[$:/tags/Stylesheet]]
 		text-align: left;
 	}
 
-	html[dir="rtl"] .tc-story-river {
-		text-align: right;
+	html body.tc-body .tc-sidebar-left .tc-story-river {
 		margin: 0 auto;
 		padding-right: {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}};
 		padding-left: {{$:/themes/tiddlywiki/centralised/metrics/storypaddingleft}};
 	}
 
+	html[dir="rtl"] .tc-story-river, html[dir="rtl"] .tc-sidebar-scrollable {
+		text-align: right;
+	}
+
 	html .tc-sidebar-scrollable {
 		text-align: left;
 		left: 50%;
@@ -32,8 +35,7 @@ tags: [[$:/tags/Stylesheet]]
 		width: auto;
 	}
 
-	html[dir="rtl"] .tc-sidebar-scrollable {
-		text-align: right;
+	body.tc-body .tc-sidebar-left .tc-sidebar-scrollable {
 		margin-left: 0;
 		right: 50%;
 		left: 0;
@@ -50,7 +52,7 @@ tags: [[$:/tags/Stylesheet]]
 		left: min(calc(50% + ({{$:/themes/tiddlywiki/centralised/metrics/storywidth}} / 2) - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)));
 	}
 
-	html[dir="rtl"] .tc-sidebar-resizer {
+	html body.tc-body .tc-sidebar-left .tc-sidebar-resizer {
 		left: auto;
 		right: min(calc(50% + ({{$:/themes/tiddlywiki/centralised/metrics/storywidth}} / 2) - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)));
 	}
diff --git a/themes/tiddlywiki/tight/base.tid b/themes/tiddlywiki/tight/base.tid
index 43a950291..38c5e9933 100644
--- a/themes/tiddlywiki/tight/base.tid
+++ b/themes/tiddlywiki/tight/base.tid
@@ -44,7 +44,7 @@ tags: [[$:/tags/Stylesheet]]
 			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 42px),calc({{$:/themes/tiddlywiki/tight/metrics/storyright}} + 42px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 42px));
 		}
 
-		html[dir="rtl"] body.tc-body div.tc-sidebar-scrollable {
+		html body.tc-body .tc-sidebar-left div.tc-sidebar-scrollable {
 			left: 0;
 			right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 42px),calc({{$:/themes/tiddlywiki/tight/metrics/storyright}} + 42px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 42px));
 		}
@@ -108,23 +108,23 @@ tags: [[$:/tags/Stylesheet]]
 		margin-top: -4px;
 	}
 
-	html .tc-sidebar-resizer {
+	html body.tc-body .tc-sidebar-resizer {
 		width: 12px;
 		left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),clamp(calc({{$:/themes/tiddlywiki/tight/metrics/storywidth}}),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/tight/metrics/storywidth}}),calc({{$:/themes/tiddlywiki/tight/metrics/storyright}})),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/tight/metrics/storywidth}} - {{$:/themes/tiddlywiki/tight/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 	}
 
-	html[dir="rtl"] .tc-sidebar-resizer {
+	html body.tc-body .tc-sidebar-left .tc-sidebar-resizer {
 		left: auto;
 		right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),clamp(calc({{$:/themes/tiddlywiki/tight/metrics/storywidth}}),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/tight/metrics/storywidth}}),calc({{$:/themes/tiddlywiki/tight/metrics/storyright}})),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/tight/metrics/storywidth}} - {{$:/themes/tiddlywiki/tight/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 	}
 
 	<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
 
-		html .tc-sidebar-resizer {
+		html body.tc-body .tc-sidebar-resizer {
 			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/tight/metrics/sidebarwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 		}
 
-		html[dir="rtl"] .tc-sidebar-resizer {
+		html body.tc-body .tc-sidebar-left .tc-sidebar-resizer {
 			left: auto;
 			right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/tight/metrics/sidebarwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 		}
diff --git a/themes/tiddlywiki/vanilla/ThemeTweaks.tid b/themes/tiddlywiki/vanilla/ThemeTweaks.tid
index 27d3d6537..ccaff266c 100644
--- a/themes/tiddlywiki/vanilla/ThemeTweaks.tid
+++ b/themes/tiddlywiki/vanilla/ThemeTweaks.tid
@@ -54,7 +54,8 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
 |<$link to="$:/themes/tiddlywiki/vanilla/options/sidebarlayout"><<lingo Options/SidebarLayout>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarlayout"><option value="fixed-fluid"><<lingo Options/SidebarLayout/Fixed-Fluid>></option><option value="fluid-fixed"><<lingo Options/SidebarLayout/Fluid-Fixed>></option></$select> |
 |<$link to="$:/themes/tiddlywiki/vanilla/options/stickytitles"><<lingo Options/StickyTitles>></$link><br>//<<lingo Options/StickyTitles/Hint>>// |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/stickytitles"><option value="no">{{$:/language/No}}</option><option value="yes">{{$:/language/Yes}}</option></$select> |
 |<$link to="$:/themes/tiddlywiki/vanilla/options/codewrapping"><<lingo Options/CodeWrapping>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/codewrapping"><option value="pre">{{$:/language/No}}</option><option value="pre-wrap">{{$:/language/Yes}}</option></$select> |
-|<$link to="$:/themes/tiddlywiki/vanilla/options/sidebarresizer"><<lingo Settings/SidebarResizer>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarresizer"><option value="hide">{{$:/language/No}}</option><option value="show">{{$:/language/Yes}}</option></$select> |
+|<$link to="$:/themes/tiddlywiki/vanilla/options/sidebarposition"><<lingo Options/SidebarPosition>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarposition"><option value="right">{{$:/language/Right}}</option><option value="left">{{$:/language/Left}}</option></$select> |
+|<$link to="$:/themes/tiddlywiki/vanilla/options/sidebarresizer"><<lingo Options/SidebarResizer>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarresizer"><option value="hide">{{$:/language/No}}</option><option value="show">{{$:/language/Yes}}</option></$select> |
 
 ! <<lingo Settings>>
 
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 65c2dd236..f7f954d1c 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -1039,24 +1039,38 @@ button.tc-btn-invisible.tc-remove-tag-button {
 		padding: 71px 0 28px 42px;
 	}
 
-	html[dir="rtl"] .tc-sidebar-scrollable {
-		left: auto;
+	.tc-sidebar-left .tc-sidebar-scrollable {
+		left: 0;
 		right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),<<get.theme.metric metrics/storyright>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
+		margin: 0 0 0 0;
+	}
+
+	html[dir="rtl"] .tc-sidebar-scrollable {
+		padding-left: 0;
+	}
+
+	html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) {
+		padding-right: 42px;
+		padding-left: 0;
 	}
 
 	.tc-story-river {
-		position: relative;
 		left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
+		right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - <<get.theme.metric metrics/storywidth>> - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
 		width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},<<get.theme.metric metrics/storywidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 		padding: 42px {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} 42px {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingleft}};
 	}
 
-	html[dir="rtl"] .tc-story-river {
-		left: auto;
+	.tc-sidebar-left .tc-story-river {
+		left: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},calc(100% - <<get.theme.metric metrics/storywidth>> - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
 		right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
 	}
 
+	html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
+
+	}
+
 <<if-no-sidebar "
 
 	.tc-story-river {
@@ -1168,10 +1182,17 @@ button.tc-btn-invisible.tc-remove-tag-button {
 		border-radius: 2px;
 	}
 
+	.tc-sidebar-left .tc-tiddler-frame {
+		left: auto;
+		right: 0;
+	}
+
 <<if-no-sidebar "
 
 	.tc-tiddler-frame {
 		width: 100%;
+		left: auto;
+		right: auto;
 	}
 
 ">>
@@ -1491,13 +1512,20 @@ html body.tc-body.tc-single-tiddler-window {
 		margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric metrics/sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
 	}
 
-	html[dir="rtl"] .tc-story-river {
+	.tc-sidebar-left .tc-story-river {
 		margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
 		margin-left: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric metrics/sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
+		left: auto;
+		right: 0;
 		padding-right: <<get.theme.metric metrics/storypaddingright>>;
 		padding-left: 0;
 	}
 
+	html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
+		left: auto;
+		right: 0;
+	}
+
 	.tc-tiddler-frame {
 		width: 100%;
 	}
@@ -1509,11 +1537,20 @@ html body.tc-body.tc-single-tiddler-window {
 		width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric metrics/sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
 	}
 
-	html[dir="rtl"] .tc-sidebar-scrollable {
+	.tc-sidebar-left .tc-sidebar-scrollable {
 		left: 0;
 		right: auto;
 	}
 
+	html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable {
+		padding-right: 42px;
+	}
+
+	html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) {
+		padding-right: 42px;
+		padding-left: 0;
+	}
+
 	body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
 		width: 100%;
 		width: calc(100% - 42px);
diff --git a/themes/tiddlywiki/vanilla/options.multids b/themes/tiddlywiki/vanilla/options.multids
index 361546a81..cfcd41ca8 100644
--- a/themes/tiddlywiki/vanilla/options.multids
+++ b/themes/tiddlywiki/vanilla/options.multids
@@ -1,6 +1,7 @@
 title: $:/themes/tiddlywiki/vanilla/options/
 
-stickytitles: no
-sidebarlayout: fixed-fluid
-sidebarresizer: hide
 codewrapping: pre-wrap
+sidebarlayout: fixed-fluid
+sidebarposition: right
+sidebarresizer: hide
+stickytitles: no
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
index 47eb59fef..142887e89 100644
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -88,7 +88,7 @@ code-body: yes
 			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
 		}
 
-		html[dir="rtl"] .tc-sidebar-resizer {
+		.tc-sidebar-left .tc-sidebar-resizer {
 			left: auto;
 			right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
 		}
@@ -99,7 +99,7 @@ code-body: yes
 				left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
 			}
 
-			html[dir="rtl"] .tc-sidebar-resizer {
+			.tc-sidebar-left .tc-sidebar-resizer {
 				left: auto;
 				right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
 			}