[css-ruby-1] Add pairing diagram.

Author: fantasai

css-ruby-1/Overview.bs

@@ -22,6 +22,16 @@ Abstract: This module describes the rendering model and formatting controls rela
 spec:css-text-3; type:dfn; text:character
 spec:css-box-4; type:dfn; text:content area
 </pre>
+<style>
+  /* ASCII diagram colors */
+  .base { color: blue; }
+  .annot { color: red; }
+  .column { color: gray; }
+  .flagtxt1 { color: green; }
+  .flagtxt2 { color: #ae4a00; }
+  .flagbg1 { background: green; opacity: 0.3; }
+  .flagbg2 { background: orange; opacity: 0.3; }
+</style>
 
 
 <!--
@@ -557,7 +567,27 @@ Unit Pairing and Spanning Annotations</h4>
 			an anonymous empty [=intra-level white space=] box assumed to exist between them.
 	</ul>
 
-	Issue: Insert diagram
+
+	<div class="example">
+		The following diagram shows the pairing of
+		regular [=base=] and [=annotation=] boxes
+		as well as the pairing of [=intra-ruby white space=] (represented as <tt>ws</tt>):
+
+		<pre class=highlight>
+			<span class=column>|</span><span class=annot>[</span>  s p a n n i n g   a n n o t a t i o n <span class=annot>]</span><span class=column>|</span>
+			<span class=column>|</span><span class=annot>[</span> a1 <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>ws<span class=annot>]</span><span class=column>|</span><span class=annot>[</span> a2 <span class=annot>]</span><span class=column>|</span> <span class=annot>[</span><span class=annot>]</span> <span class=column>|</span><span class=annot>[</span> a3 <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>ws<span class=annot>]</span><span class=column>|</span><span class=annot>[</span> a4 <span class=annot>]</span><span class=column>|</span>
+			<span class=column>|</span><span class=base>[</span> b1 <span class=base>]</span><span class=column>|</span><span class=base>[</span>ws<span class=base>]</span><span class=column>|</span><span class=base>[</span> b2<span class=base>]</span><span class=base>]</span><span class=column>|</span><span class=base>[</span>ws<span class=base>]</span><span class=column>|</span><span class=base>[</span> b3 <span class=base>]</span><span class=column>|</span> <span class=base>[</span><span class=base>]</span> <span class=column>|</span><span class=base>[</span> b4 <span class=base>]</span><span class=column>|</span>
+		</pre>
+
+		Blue brackets (<tt class=base>[ ]</tt>) represent [=base boxes=],
+		red brackets (<tt class=annot>[ ]</tt>) represent [=annotation boxes=],
+		gray bars (<tt class=column>|</tt>) represent the limits of [=ruby columns=],
+		<tt class=ws>[ws]</tt> represents [=intra-ruby white space=],
+		and <tt>[]</tt> represents an empty anonymous base or annotation
+		automatcally generated to pair with [=intra-ruby white space=] in another level.
+		[=Ruby containers=], [=base containers=], and [=annotation containers=] are omitted.
+
+	</div>
 
 <!--
 	No longer needed now that the layout model is better defined,
@@ -807,17 +837,17 @@ Inline-axis Interlinear Layout</h4>
 		[=base boxes=] and [=annotation boxes=] are assumed to have ''ruby-align: center'',
 		while <!--[=base containers=] and --> [=annotation containers=] are assumed to have ''ruby-align: space-between''.
 
-		Blue brackets (<span style=color:blue>[ ]</span>) represent [=base boxes=],
-		red brackets (<span style=color:red>[ ]</span>) represent [=annotation boxes=],
-		and gray bars (<span style=color:gray>|</span>) represent the limits of [=ruby columns=].
+		Blue brackets (<tt class=base>[ ]</tt>) represent [=base boxes=],
+		red brackets (<tt class=annot>[ ]</tt>) represent [=annotation boxes=],
+		and gray bars (<tt class=column>|</tt>) represent the limits of [=ruby columns=].
 		[=Ruby containers=], [=base containers=], and [=annotation containers=] are omitted.
 
 		<dl>
-			<dt id=ex-separate>Separate / non spanning:
+			<dt id=ex-separate>Separate / non-spanning:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>  a2  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>annotation-3<span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>   base 3   <span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>  a1  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>  a2  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>annotation-3<span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span>base 1<span class=base>]</span><span class=column>|</span><span class=base>[</span>base 2<span class=base>]</span><span class=column>|</span><span class=base>[</span>   base 3   <span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				Boxes within each [=column=] are sized to match the widest box of that [=column=].
@@ -827,8 +857,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-short-span>Spanning (short):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   short span  <span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 3<span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>  a1  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>   short span  <span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span>base 1<span class=base>]</span><span class=column>|</span><span class=base>[</span>base 2<span class=base>]</span><span class=column>|</span><span class=base>[</span>base 3<span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				When a [=spanning annotation=] is shorter than the spanned [=bases=],
@@ -840,8 +870,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-long-span>Spanning (long):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>spanning annotation<span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 2 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>  a1  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>spanning annotation<span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span>base 1<span class=base>]</span><span class=column>|</span><span class=base>[</span> base 2 <span class=base>]</span><span class=column>|</span><span class=base>[</span> base 3 <span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				When the [=spanning annotation=] is longer than the spanned [=base boxes=],
@@ -850,8 +880,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-short-merge>Merged (short):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>merged        annotation<span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 3<span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>merged        annotation<span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span>base 1<span class=base>]</span><span class=column>|</span><span class=base>[</span>base 2<span class=base>]</span><span class=column>|</span><span class=base>[</span>base 3<span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				A [=merged annotation=] behaves similarly to a [=spanning=] one,
@@ -872,14 +902,14 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-multi-level-span>Several levels, with spanning annotation:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>   a1   <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> annotation-2 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   a3   <span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>long annotation spanning all content<span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span> base 1 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>    base 2    <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>   a1   <span class=annot>]</span><span class=column>|</span><span class=annot>[</span> annotation-2 <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>   a3   <span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=annot>[</span>long annotation spanning all content<span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span> base 1 <span class=base>]</span><span class=column>|</span><span class=base>[</span>    base 2    <span class=base>]</span><span class=column>|</span><span class=base>[</span> base 3 <span class=base>]</span><span class=column>|</span>
 				</pre>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span>  xx  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>annotation spanning bases<span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> annotation-2 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   a3   <span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>    base 2    <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span>  xx  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>annotation spanning bases<span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=annot>[</span>  a1  <span class=annot>]</span><span class=column>|</span><span class=annot>[</span> annotation-2 <span class=annot>]</span><span class=column>|</span><span class=annot>[</span>   a3   <span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span>base 1<span class=base>]</span><span class=column>|</span><span class=base>[</span>    base 2    <span class=base>]</span><span class=column>|</span><span class=base>[</span> base 3 <span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				In these two examples with multiple [=levels=],
@@ -892,10 +922,10 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-multi-level-mutli-span>Several levels, with multiple spanning annotations:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span>  xx  <span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3>  </span><span style=color:green>annotation spanning bases</span><span style=background:orange;opacity:0.3>  </span><span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span>  a1  <span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>annotation-2<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>  a3  <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span><span style=color:#ae4a00>lengthy annotation spanning base content</span><span style=color:red>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span>base 1<span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>   base 2   <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>base 3<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span>
+				<span class=column>|</span><span class=annot>[</span><span class=flagbg2> </span>  xx  <span class=flagbg2> </span><span class=annot>]</span><span class=column>|</span><span class=annot>[</span><span class=flagbg2>  </span><span class=flagtxt1>annotation spanning bases</span><span class=flagbg2>  </span><span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=annot>[</span><span class=flagbg2> </span>  a1  <span class=flagbg2> </span><span class=annot>]</span><span class=column>|</span><span class=annot>[</span><span class=flagbg2> </span><span class=flagbg1> </span>annotation-2<span class=flagbg1> </span><span class=flagbg2> </span><span class=annot>]</span><span class=column>|</span><span class=annot>[</span><span class=flagbg2> </span><span class=flagbg1> </span>  a3  <span class=flagbg1> </span><span class=flagbg2> </span><span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=annot>[</span><span class=flagtxt2>lengthy annotation spanning base content</span><span class=annot>]</span><span class=column>|</span>
+				<span class=column>|</span><span class=base>[</span><span class=flagbg2> </span>base 1<span class=flagbg2> </span><span class=base>]</span><span class=column>|</span><span class=base>[</span><span class=flagbg2> </span><span class=flagbg1> </span>   base 2   <span class=flagbg1> </span><span class=flagbg2> </span><span class=base>]</span><span class=column>|</span><span class=base>[</span><span class=flagbg2> </span><span class=flagbg1> </span>base 3<span class=flagbg1> </span><span class=flagbg2> </span><span class=base>]</span><span class=column>|</span>
 				</pre>
 
 				When there are multiple [=spanning annotations=],
@@ -1686,7 +1716,7 @@ Overhanging Ruby: the 'ruby-overhang' property</h3>
 		<dd>
 			When a [=ruby annotation container=] is longer than
 			its corresponding [=ruby base container=],
-			the [=ruby annotation container=] may 
+			the [=ruby annotation container=] may
 			partially overlap adjacent boxes.
 
 			Whether, how much, and under which conditions to overhang