From 09379abd5d58e48707de07c0d5cc43bb1f8050e0 Mon Sep 17 00:00:00 2001
From: XLBilly <LeiYiXia29@outlook.com>
Date: Sun, 4 Jan 2026 20:02:28 +0800
Subject: [PATCH] Bidirectional improvements for core classes (#9148)

* Bidirectional improvements for core classes

* Fix Control Panel table text direction

* Switch to logical properties

* Add -webkit-margin-* properties

* Improve backward compatibility

* Use supports CSS at-rule for fallback

* Tiddler controls, alert, TOC update.

* tc-tree & testcase update

* .tc-sidebar-scrollable use new syntax

* Snow white use standard value

* Update divider

* Avoid negative logic

* Remove :dir rules at the moment

* Use property procedures

* Add change note

* Update blockquote

* Update unfold banner

* Update tiddlerinfo close button

* Group supports rule

* Update tiddler title icon

* Fix wrong float and margin
---
 core/ui/TiddlerInfo.tid                       |   2 +-
 core/wiki/macros/CSS-property.tid             |  39 ++++
 .../tiddlers/releasenotes/5.4.0/#9148.tid     |  10 +
 themes/tiddlywiki/snowwhite/base.tid          |  14 ++
 themes/tiddlywiki/vanilla/base.tid            | 171 +++++++++++++-----
 5 files changed, 187 insertions(+), 49 deletions(-)
 create mode 100644 core/wiki/macros/CSS-property.tid
 create mode 100644 editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid

diff --git a/core/ui/TiddlerInfo.tid b/core/ui/TiddlerInfo.tid
index 045fe8dec7..abab5374a9 100644
--- a/core/ui/TiddlerInfo.tid
+++ b/core/ui/TiddlerInfo.tid
@@ -2,7 +2,7 @@ title: $:/core/ui/TiddlerInfo
 
 \whitespace trim
 <div style="position:relative;">
-<div class="tc-tiddler-controls" style="position:absolute;right:0;">
+<div class="tc-tiddler-controls tc-tiddler-info-controls">
 <$reveal state="$:/config/TiddlerInfo/Mode" type="match" text="sticky">
 <$button set=<<tiddlerInfoState>> setTo="" tooltip={{$:/language/Buttons/Info/Hint}} aria-label={{$:/language/Buttons/Info/Caption}} class="tc-btn-invisible">
 {{$:/core/images/close-button}}
diff --git a/core/wiki/macros/CSS-property.tid b/core/wiki/macros/CSS-property.tid
new file mode 100644
index 0000000000..574885f71f
--- /dev/null
+++ b/core/wiki/macros/CSS-property.tid
@@ -0,0 +1,39 @@
+title: $:/core/macros/CSS/property
+
+<!-- CSS property macros -->
+
+<!-- TODO: Deprecate the following CSS macros once 2020 baseline is supported -->
+
+\procedure margin-start(size)
+	-webkit-margin-start: <<size>>;
+	margin-inline-start: <<size>>;
+\end
+
+\procedure margin-end(size)
+	-webkit-margin-end: <<size>>;
+	margin-inline-end: <<size>>;
+\end
+
+\procedure padding-start(size)
+	-webkit-padding-start: <<size>>;
+	padding-inline-start: <<size>>;
+\end
+
+\procedure padding-end(size)
+	-webkit-padding-end: <<size>>;
+	padding-inline-end: <<size>>;
+\end
+
+\procedure margin-inline(start,end)
+	-webkit-margin-start: <<start>>;
+	margin-inline-start: <<start>>;
+	-webkit-margin-end: <<end>>;
+	margin-inline-end: <<end>>;
+\end
+
+\procedure padding-inline(start,end)
+	-webkit-padding-start: <<start>>;
+	padding-inline-start: <<start>>;
+	-webkit-padding-end: <<end>>;
+	padding-inline-end: <<end>>;
+\end
diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid
new file mode 100644
index 0000000000..d74f2c9f80
--- /dev/null
+++ b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid
@@ -0,0 +1,10 @@
+title: $:/changenotes/5.4.0/#9148
+description: Bidirectional improvements for core classes
+release: 5.4.0
+tags: $:/tags/ChangeNote
+change-type: enhancement
+change-category: theme
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9148
+github-contributors: Leilei332
+
+Make some core classes display properly when Tiddlywiki's language uses bidrectional scripts.
\ No newline at end of file
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 1d12a858c1..2e6d568fec 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -97,6 +97,12 @@ canvas.tc-edit-bitmapeditor  {
 	background-image: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%); 
 }
 
+/* HACK: :dir should be used here. html[dir="rtl"] rules are used to support browsers released before 2023 */
+
+html[dir="rtl"] .tc-sidebar-lists .tc-tab-set .tc-tab-divider {
+	background-image: linear-gradient(to left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
+}
+
 .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
 	background-image: linear-gradient(to right, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%);
 }
@@ -105,6 +111,14 @@ canvas.tc-edit-bitmapeditor  {
 	background-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%);
 }
 
+html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
+    background-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.01) 100%);
+}
+
+html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
+    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%)
+}
+
 .tc-message-box img {
 	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
 }
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 28348fc251..c20aa94abb 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -63,6 +63,7 @@ $else$
 </$set>
 \end
 
+\import [[$:/core/macros/CSS/property]]
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
 
 /*
@@ -175,9 +176,9 @@ code {
 }
 
 blockquote {
-	border-left: 5px solid <<colour blockquote-bar>>;
-	margin-left: 25px;
-	padding-left: 10px;
+	border-inline-start: 5px solid <<colour blockquote-bar>>;
+	<<margin-start 25px>>
+	<<padding-start 10px>>
 	quotes: "\201C""\201D""\2018""\2019";
 }
 
@@ -190,9 +191,8 @@ blockquote.tc-big-quote {
 	font-family: Georgia, serif;
 	position: relative;
 	background: <<colour pre-background>>;
-	border-left: none;
-	margin-left: 50px;
-	margin-right: 50px;
+	border-inline-start: none;
+	<<margin-inline 50px>>
 	padding: 10px;
 	border-radius: 8px;
 }
@@ -262,7 +262,9 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 svg.tc-image-button {
-	padding: 0px 1px 1px 0px;
+	padding-top: 0px;
+	padding-bottom: 1px;
+	<<padding-inline 0px 1px>>
 }
 
 .tc-icon-wrapper > svg {
@@ -659,7 +661,7 @@ html body.tc-body .tc-btn-rounded svg {
 
 
 .tc-btn-text {
-	margin-left: 7px;
+	<<margin-start 7px>>
 }
 
 /* used for documentation "fake" buttons */
@@ -729,7 +731,7 @@ button svg.tc-image-button, button .tc-image-button img {
 	border: none;
 	width: 100%;
 	width: calc(100% + 2px);
-	margin-left: -43px;
+	<<margin-start -43px>>
 	text-align: center;
 	border-top: 2px solid <<colour tiddler-info-background>>;
 	margin-top: 4px;
@@ -757,7 +759,7 @@ button svg.tc-image-button, button .tc-image-button img {
 	border: none;
 	width: 23px;
 	text-align: center;
-	margin-left: -35px;
+	<<margin-start -35px>>
 	top: 6px;
 	bottom: 6px;
 }
@@ -775,7 +777,7 @@ button svg.tc-image-button, button .tc-image-button img {
 
 	.tc-fold-banner {
 		width: 16px;
-		margin-left: -16px;
+		<<margin-start -16px>>
 		font-size: 0.75em;
 	}
 
@@ -1024,9 +1026,9 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	.tc-sidebar-scrollable {
 		position: fixed;
 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
-		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+		inset-inline-start: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
 		bottom: 0;
-		right: 0;
+		inset-inline-end: 0;
 		overflow-y: auto;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
@@ -1034,9 +1036,16 @@ button.tc-btn-invisible.tc-remove-tag-button {
 		padding: 71px 0 28px 42px;
 	}
 
-	html[dir="rtl"] .tc-sidebar-scrollable {
-		left: auto;
-		right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+	@supports not (inset-inline-start: 0) {
+		.tc-sidebar-scrollable {
+			left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+			right: 0;
+		}
+
+		html[dir="rtl"] .tc-sidebar-scrollable {
+			left: auto;
+			right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+		}
 	}
 
 	.tc-story-river {
@@ -1123,6 +1132,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 }
 
+.tc-tiddler-info-controls {
+	position: absolute;
+	inset-inline-end: 0;
+}
+
 .tc-view-field-table {
 	width: 100%;
 }
@@ -1185,7 +1199,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-title-icon {
 	vertical-align: middle;
-	margin-right: .1em;
+	<<margin-end ".1em">>
 }
 
 .tc-tiddler-title-icon svg {
@@ -1236,7 +1250,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-tiddler-frame .tc-tiddler-controls {
-	float: right;
+	float: inline-end;
 	padding: 3px; /* make space for outline */
 }
 
@@ -1777,7 +1791,7 @@ html body.tc-body.tc-single-tiddler-window {
 */
 
 .tc-viewswitcher .tc-image-button {
-	margin-right: .3em;
+	<<margin-end ".3em">>
 }
 
 .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
@@ -1860,7 +1874,7 @@ html body.tc-body.tc-single-tiddler-window {
 	display: block;
 	padding: 0 14px 0 14px;
 	width: 100%;
-	text-align: left;
+	text-align: start;
 	color: <<colour foreground>>;
 	line-height: 1.4;
 }
@@ -2164,7 +2178,7 @@ html body.tc-body.tc-single-tiddler-window {
 	display: block;
 	padding-top: 14px;
 	vertical-align: top;
-	text-align: right;
+	text-align: end;
 	margin-bottom: inherit;
 	margin-right: -1px;
 	max-width: 33%;
@@ -2202,20 +2216,20 @@ html body.tc-body.tc-single-tiddler-window {
 	width: 100%;
 	margin-top: 3px;
 	margin-right: 0;
-	text-align: right;
+	text-align: end;
 	background-color: <<colour tab-background>>;
-	border-left: 1px solid <<colour tab-border>>;
+	border-inline-start: 1px solid <<colour tab-border>>;
 	border-bottom: 1px solid <<colour tab-border>>;
-	border-right: none;
-	border-top-left-radius: 2px;
-	border-bottom-left-radius: 2px;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
+	border-inline-end: none;
+	border-start-start-radius: 2px;
+	border-end-start-radius: 2px;
+	border-start-end-radius: 0;
+	border-end-end-radius: 0;
 }
 
 .tc-tab-buttons.tc-vertical button.tc-tab-selected {
 	background-color: <<colour tab-background-selected>>;
-	border-right: 1px solid <<colour tab-background-selected>>;
+	border-inline-end: 1px solid <<colour tab-background-selected>>;
 }
 
 .tc-tab-divider {
@@ -2234,8 +2248,8 @@ html body.tc-body.tc-single-tiddler-window {
 	display: inline-block;
 	vertical-align: top;
 	padding-top: 0;
-	padding-left: 14px;
-	border-left: 1px solid <<colour tab-border>>;
+	<<padding-start 14px>>
+	border-inline-start: 1px solid <<colour tab-border>>;
 	-webkit-flex: 1 0 70%;
 	flex: 1 0 70%;
 	overflow: auto;
@@ -2455,7 +2469,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-alert-toolbar {
 	position: absolute;
 	top: 7px;
-	right: 7px;
+	inset-inline-end: 7px;
 	line-height: 0;
 }
 
@@ -2539,6 +2553,10 @@ html body.tc-body.tc-single-tiddler-window {
 	padding: 4px;
 }
 
+.tc-control-panel table > tbody > tr > td {
+	text-align: start;
+}
+
 .tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea {
 	width: 100%;
 }
@@ -2828,7 +2846,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 .tc-chooser-item {
 	border-bottom: 1px solid <<colour table-header-background>>;
 	border-top: 1px solid <<colour table-header-background>>;
-	padding: 2px 4px 2px 14px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	<<padding-inline 14px 4px>>
 }
 
 .tc-drop-down .tc-chooser-item {
@@ -2861,7 +2881,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 }
 
 .tc-chosen > .tc-tiddlylink:before {
-	margin-left: -10px;
+	<<margin-start "-10px">>
 	position: relative;
 	content: "» ";
 }
@@ -2926,11 +2946,11 @@ input.tc-palette-manager-colour-input {
 
 .tc-table-of-contents ol {
 	list-style-type: none;
-	padding-left: 0;
+	<<padding-start 0>>
 }
 
 .tc-table-of-contents ol ol {
-	padding-left: 1em;
+	<<padding-start 1em>>
 }
 
 .tc-table-of-contents li {
@@ -2971,7 +2991,7 @@ input.tc-palette-manager-colour-input {
 .tc-tabbed-table-of-contents .tc-table-of-contents {
 	z-index: 100;
 	display: inline-block;
-	padding-left: 1em;
+	<<padding-start 1em>>
 	max-width: 50%;
 	-webkit-flex: 0 0 auto;
 	flex: 0 0 auto;
@@ -3219,17 +3239,17 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
 */
 
 .tc-tree div {
-	padding-left: 14px;
+	<<padding-start: "14px">>
 }
 
 .tc-tree ol {
 	list-style-type: none;
-	padding-left: 0;
+	<<padding-start: 0>>
 	margin-top: 0;
 }
 
 .tc-tree ol ol {
-	padding-left: 1em;
+	<<padding-start: 1em>>
 }
 
 .tc-tree button {
@@ -3359,7 +3379,7 @@ span.tc-translink > a:first-child {
 	line-height: 0;
 	border-radius: 1em;
 	vertical-align: text-bottom;
-	margin-right: 0.25em;
+	<<margin-end "0.25em">>
 }
 
 .tc-test-case-result-icon svg {
@@ -3395,7 +3415,7 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-toolbar {
-	float: right;
+	float: inline-end;
 }
 
 .tc-test-case-toolbar svg {
@@ -3529,11 +3549,11 @@ span.tc-translink > a:first-child {
 }
 
 .tc-tiny-gap-left {
-	margin-left: .25em;
+	<<margin-start ".25em">>
 }
 
 .tc-tiny-gap-right {
-	margin-right: .25em;
+	<<margin-end ".25em">>
 }
 
 .tc-small-gap {
@@ -3542,11 +3562,11 @@ span.tc-translink > a:first-child {
 }
 
 .tc-small-gap-left {
-	margin-left: .5em;
+	<<margin-start ".5em">>
 }
 
 .tc-small-gap-right {
-	margin-right: .5em;
+	<<margin-end ".5em">>
 }
 
 .tc-big-gap {
@@ -3555,11 +3575,11 @@ span.tc-translink > a:first-child {
 }
 
 .tc-big-gap-left {
-	margin-left: 1em;
+	<<margin-start 1em>>
 }
 
 .tc-big-gap-right {
-	margin-right: 1em;
+	<<margin-end 1em>>
 }
 
 .tc-word-break {
@@ -3572,3 +3592,58 @@ span.tc-translink > a:first-child {
 	margin-bottom: 3px;
 }
 
+/* TODO: Remove the following rule once 2020 baseline is supported */
+@supports not (border-inline-start: 1px solid #000000) {
+	blockquote {
+		border-left: 5px solid <<colour blockquote-bar>>;
+	}
+
+	blockquote.tc-big-quote {
+		border-left: none;
+	}
+
+	.tc-tab-buttons.tc-vertical button {
+		border-left: 1px solid <<colour tab-border>>;
+		border-right: none;
+	}
+
+	.tc-tab-buttons.tc-vertical button.tc-tab-selected {
+		border-right: 1px solid <<colour tab-background-selected>>;
+	}
+
+	.tc-tab-content.tc-vertical {
+		border-left: 1px solid <<colour tab-border>>;
+	}
+}
+
+/* TODO: Remove the following rule once 2021 baseline is supported */
+@supports not (border-start-start-radius: 0px) {
+	.tc-tab-buttons.tc-vertical button {
+		border-top-left-radius: 2px;
+		border-bottom-left-radius: 2px;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+/* TODO: Remove the following rule once 2021 baseline is supported */
+@supports not (inset-inline-start: 0) {
+	.tc-tiddler-info-controls {
+		right: 0;
+	}
+
+	.tc-alert-toolbar {
+		right: 7px;
+	}
+}
+
+/* TODO: Remove the following rule once 2023 baseline is supported */
+@supports not (float: inline-end) {
+	.tc-test-case-toolbar {
+		float: right;
+	}
+
+	.tc-tiddler-frame .tc-tiddler-controls {
+		float: right;
+	}
+}
\ No newline at end of file