Skip to content

Commit 77fcd77

Browse files
fantasaifantasai
committed
[css-ruby-1] Add pairing diagram.
1 parent 5751cbb commit 77fcd77

1 file changed

Lines changed: 54 additions & 24 deletions

File tree

‎css-ruby-1/Overview.bs‎

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ Abstract: This module describes the rendering model and formatting controls rela
2222
spec:css-text-3; type:dfn; text:character
2323
spec:css-box-4; type:dfn; text:content area
2424
</pre>
25+
<style>
26+
/* ASCII diagram colors */
27+
.base { color: blue; }
28+
.annot { color: red; }
29+
.column { color: gray; }
30+
.flagtxt1 { color: green; }
31+
.flagtxt2 { color: #ae4a00; }
32+
.flagbg1 { background: green; opacity: 0.3; }
33+
.flagbg2 { background: orange; opacity: 0.3; }
34+
</style>
2535

2636

2737
<!--
@@ -557,7 +567,27 @@ Unit Pairing and Spanning Annotations</h4>
557567
an anonymous empty [=intra-level white space=] box assumed to exist between them.
558568
</ul>
559569

560-
Issue: Insert diagram
570+
571+
<div class="example">
572+
The following diagram shows the pairing of
573+
regular [=base=] and [=annotation=] boxes
574+
as well as the pairing of [=intra-ruby white space=] (represented as <tt>ws</tt>):
575+
576+
<pre class=highlight>
577+
<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>
578+
<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>
579+
<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>
580+
</pre>
581+
582+
Blue brackets (<tt class=base>[ ]</tt>) represent [=base boxes=],
583+
red brackets (<tt class=annot>[ ]</tt>) represent [=annotation boxes=],
584+
gray bars (<tt class=column>|</tt>) represent the limits of [=ruby columns=],
585+
<tt class=ws>[ws]</tt> represents [=intra-ruby white space=],
586+
and <tt>[]</tt> represents an empty anonymous base or annotation
587+
automatcally generated to pair with [=intra-ruby white space=] in another level.
588+
[=Ruby containers=], [=base containers=], and [=annotation containers=] are omitted.
589+
590+
</div>
561591

562592
<!--
563593
No longer needed now that the layout model is better defined,
@@ -807,17 +837,17 @@ Inline-axis Interlinear Layout</h4>
807837
[=base boxes=] and [=annotation boxes=] are assumed to have ''ruby-align: center'',
808838
while <!--[=base containers=] and --> [=annotation containers=] are assumed to have ''ruby-align: space-between''.
809839

810-
Blue brackets (<span style=color:blue>[ ]</span>) represent [=base boxes=],
811-
red brackets (<span style=color:red>[ ]</span>) represent [=annotation boxes=],
812-
and gray bars (<span style=color:gray>|</span>) represent the limits of [=ruby columns=].
840+
Blue brackets (<tt class=base>[ ]</tt>) represent [=base boxes=],
841+
red brackets (<tt class=annot>[ ]</tt>) represent [=annotation boxes=],
842+
and gray bars (<tt class=column>|</tt>) represent the limits of [=ruby columns=].
813843
[=Ruby containers=], [=base containers=], and [=annotation containers=] are omitted.
814844

815845
<dl>
816-
<dt id=ex-separate>Separate / non spanning:
846+
<dt id=ex-separate>Separate / non-spanning:
817847
<dd>
818848
<pre class=highlight>
819-
<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>
820-
<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>
849+
<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>
850+
<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>
821851
</pre>
822852

823853
Boxes within each [=column=] are sized to match the widest box of that [=column=].
@@ -827,8 +857,8 @@ Inline-axis Interlinear Layout</h4>
827857
<dt id=ex-short-span>Spanning (short):
828858
<dd>
829859
<pre class=highlight>
830-
<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>
831-
<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>
860+
<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>
861+
<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>
832862
</pre>
833863

834864
When a [=spanning annotation=] is shorter than the spanned [=bases=],
@@ -840,8 +870,8 @@ Inline-axis Interlinear Layout</h4>
840870
<dt id=ex-long-span>Spanning (long):
841871
<dd>
842872
<pre class=highlight>
843-
<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>
844-
<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>
873+
<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>
874+
<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>
845875
</pre>
846876

847877
When the [=spanning annotation=] is longer than the spanned [=base boxes=],
@@ -850,8 +880,8 @@ Inline-axis Interlinear Layout</h4>
850880
<dt id=ex-short-merge>Merged (short):
851881
<dd>
852882
<pre class=highlight>
853-
<span style=color:gray>|</span><span style=color:red>[</span>merged annotation<span style=color:red>]</span><span style=color:gray>|</span>
854-
<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>
883+
<span class=column>|</span><span class=annot>[</span>merged annotation<span class=annot>]</span><span class=column>|</span>
884+
<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>
855885
</pre>
856886

857887
A [=merged annotation=] behaves similarly to a [=spanning=] one,
@@ -872,14 +902,14 @@ Inline-axis Interlinear Layout</h4>
872902
<dt id=ex-multi-level-span>Several levels, with spanning annotation:
873903
<dd>
874904
<pre class=highlight>
875-
<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>
876-
<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>
877-
<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>
905+
<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>
906+
<span class=column>|</span><span class=annot>[</span>long annotation spanning all content<span class=annot>]</span><span class=column>|</span>
907+
<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>
878908
</pre>
879909
<pre class=highlight>
880-
<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>
881-
<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>
882-
<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>
910+
<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>
911+
<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>
912+
<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>
883913
</pre>
884914

885915
In these two examples with multiple [=levels=],
@@ -892,10 +922,10 @@ Inline-axis Interlinear Layout</h4>
892922
<dt id=ex-multi-level-mutli-span>Several levels, with multiple spanning annotations:
893923
<dd>
894924
<pre class=highlight>
895-
<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>
896-
<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>
897-
<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>
898-
<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>
925+
<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>
926+
<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>
927+
<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>
928+
<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>
899929
</pre>
900930

901931
When there are multiple [=spanning annotations=],
@@ -1686,7 +1716,7 @@ Overhanging Ruby: the 'ruby-overhang' property</h3>
16861716
<dd>
16871717
When a [=ruby annotation container=] is longer than
16881718
its corresponding [=ruby base container=],
1689-
the [=ruby annotation container=] may
1719+
the [=ruby annotation container=] may
16901720
partially overlap adjacent boxes.
16911721

16921722
Whether, how much, and under which conditions to overhang

0 commit comments

Comments
 (0)