[css-gaps-1] Clarify application of writing-mode and direction to gap decorations. #13648, #13649

css-gaps-1/Overview.bs

@@ -169,6 +169,17 @@ Gap decorations</h2>
 	note that while the border and background of the container aren't scrolled,
 	the decorations need to scroll along with items in the container.
 
+	[=Gap decorations=] follow the definitions of "column" and "row" laid out by the container to which the properties are applied.
+	They depend on the container type taking writing mode and text direction into account when determining the meanings of these terms.
+	For examples, see:
+	[[CSS-MULTICOL-2#the-multi-column-model]],
+	[[CSS-FLEXBOX-1#flex-direction-property]],
+	and
+	[[CSS-GRID-1#grid-concepts]].
+
+	Properties in this specification whose names begin with "column" apply to [=column gaps=],
+	and properties in this specification whose names begin with "row" apply to [=row gaps=].
+
 <!--
 	<div class="example">
 		<pre>
@@ -227,8 +238,8 @@ Segment endpoints</h4>
 	may start or end.
 	There are two endpoint types:
 	<ul>
-		<li><dfn>start segment endpoint</dfn>: Point at which a segment begins.
-		<li><dfn>end segment endpoint</dfn>: Point at which a segment ends.
+		<li><dfn>start segment endpoint</dfn>: Point closest to the [=start=] side of the [=gap=].
+		<li><dfn>end segment endpoint</dfn>: Point closest to the [=end=] side of the [=gap=].
 	</ul>
 
 	<div algorithm="create segment endpoints">
@@ -851,7 +862,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 		<dd>
 			The [=crossing gap width=] is the size of the [=gap junction=]
 			in the same dimension as the [=gap=] in which the [=segment endpoint=] lies
-			(the horizontal dimension for row gaps and the vertical dimension for column gaps).
+			(the row dimension for [=row gaps=] and the column dimension for [=column gaps=]).
 
 			Note: Typically, this will be the used value of the 'column-gap' or 'row-gap' property,
 			whichever applies to the intersecting or abutting gap,
@@ -864,14 +875,31 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 	<p>
 		The 'column-rule-edge-inset-start' and 'row-rule-edge-inset-start' properties apply to [=start segment endpoints=] that are [=edge segment endpoints=].
 		The 'column-rule-interior-inset-start' and 'row-rule-interior-inset-start' properties apply to [=start segment endpoints=] that are [=interior segment endpoints=].
-		For these properties, positive values offset in the forward direction, and negative values offset in the reverse direction, along the axis of the gap.
+		For these properties, positive values offset in the [=end=] direction, and negative values offset in the [=start=] direction, along the axis of the gap.
 	</p>
 	<p>
 		The 'column-rule-edge-inset-end' and 'row-rule-edge-inset-end' properties apply to [=end segment endpoints=] that are [=edge segment endpoints=].
 		The 'column-rule-interior-inset-end' and 'row-rule-interior-inset-end' properties apply to [=end segment endpoints=] that are [=interior segment endpoints=].
-		For these properties, positive values offset in the reverse direction, and negative values offset in the forward direction, along the axis of the gap.
+		For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.
 	</p>
 
+	<div class="example">
+		<pre>
+			.inset-end {
+				row-rule: 3px solid red;
+				row-rule-break: intersection;
+				row-rule-inset-end: 10px;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-inset-direction.png">
+			<figcaption>
+				Row-direction decorations with asymmetric insets
+				in LTR and RTL directions and vertical writing-mode.
+			</figcaption>
+		</figure>
+	</div>
+
 	<wpt>
 		parsing/rule-edge-start-end-inset-computed.html
 		parsing/rule-edge-start-end-inset-invalid.html
@@ -2315,6 +2343,9 @@ Changes since the <a href="https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/">2
 	<ul class="non-normative">
 		<li>Added the ''column-rule-visibility-items/normal'' value to [[#visibility|*-rule-visibility-items]] and made it the new initial value.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/13477">Issue 13477</a>)
+		<li>Clarified applicability of writing mode and text decoration to gap decorations.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/13648">Issue 13648</a>,
+			<a href="https://github.com/w3c/csswg-drafts/issues/13649">Issue 13649</a>)
 		<li>Updated with links to additional WPTs.
 	</ul>