[css-ruby] Adjust writing-mode computation on inter-character ruby

See w3c#1773

Author: Florian Rivoal

css-ruby-1/Overview.bs

@@ -1423,7 +1423,11 @@ Ruby Positioning: the 'ruby-position' property</h3>
 
 			Otherwise, the ruby annotation becomes an <dfn dfn local-lt=inter-character>inter-character annotation</dfn>.
 			The annotation appears on the right of the base in horizontal text.
-			This forces the computed value of 'writing-mode' of the [=ruby annotation container=] to be ''vertical-rl''.
+			This forces the computed value of 'writing-mode' of the [=ruby annotation=] children of this [=ruby annotation container=] to be ''vertical-rl''.
+
+			Note: The computed value of 'writing-mode' on the [=ruby annotation container=] itself is not affected.
+			This is to avoid circular dependencies between computed values
+			on the 'writing-mode', 'display', and 'ruby-position' properties on the same element.
 
 			This value is provided for the special case of traditional Chinese
 			as used especially in Taiwan:
@@ -1437,6 +1441,39 @@ Ruby Positioning: the 'ruby-position' property</h3>
 					<p class="caption">“Bopomofo” ruby in traditional Chinese
 					(ruby annotation shown in blue for clarity) in horizontal layout
 				</div>
+
+			<div class=note>
+				Note: As inheritance works on the element tree without accounting for anonymous boxes created for ruby layout,
+				when using [=inter-character annotations=]
+				authors need to be careful to avoid markup patterns involving
+				an element-based [=ruby annotation container=],
+				an anonymous [=ruby annotation=],
+				and further descendant elements,
+				as those descendants would inherit their writing mode from the [=ruby annotation container=],
+				and not from the [=ruby annotation=] whose 'writing-mode' has been changed to ''vertical-rl''.
+
+				<div class=example>
+					<pre highlight=css>ruby { ruby-position: inter-character; }</pre>
+					<xmp highlight=html><ruby>base<rtc><em>problematic</em> annotation</ruby></xmp>
+
+					In the above markup, an anonymous [=ruby annotation=] box is created as a child of the <code>&lt;rtc></code> element
+					to wrap the whole “problematic annotation”.
+					Since it is a child of an [=annotation container=] whose 'ruby-position' is ''inter-character'',
+					its 'writing-mode' will be ''vertical-rl'', which is expected.
+					However, the <code>&lt;em></code> element inherits its 'writing-mode' directly from the <code>&lt;rtc></code> element,
+					which has not been forced to ''vertical-rl''.
+
+					In this example, the explicit [=ruby annotation container=] element was not necessary,
+					so using a [=ruby annotation=] element instead would avoid the problem:
+
+					<xmp highlight=html><ruby>base<rt><em>problematic</em> annotation</ruby></xmp>
+
+					If an explicit [=ruby annotation container=] element is needed,
+					then using a [=ruby annotation=] element as well would also address the problem:
+					<xmp highlight=html><ruby>base<rtc><rt><em>problematic</em> annotation</ruby></xmp>
+				</div>
+			</div>
+
 		</dd>
 	</dl>
 
@@ -2221,7 +2258,10 @@ Changes</h2>
 <h3 id="changes-20211202">
 Changes since the 2 December 2021 WD</h3>
 
-None yet.
+	<ul>
+		<li>Made the computed-value adjustement of 'writing-mode' on [=inter-character annotations=]
+			apply to the [=ruby annotation box=] rather than the [=ruby annotation container box=].
+	</ul>
 
 <h3 id="changes-20200429">
 Changes since the 29 April 2020 WD</h3>