Skip to content

Commit c534e37

Browse files
author
kojiishi
committed
[css-ruby] ruby-merge property first try
1 parent 936118e commit c534e37

2 files changed

Lines changed: 229 additions & 10 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 144 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,10 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
202202
<li><a href="#rubypos"><span class=secno>3.1. </span> Ruby positioning:
203203
the ‘<code class=property>ruby-position</code>’ property</a>
204204

205-
<li><a href="#rubyalign"><span class=secno>3.2. </span> Ruby alignment:
205+
<li><a href="#rubymerge"><span class=secno>3.2. </span>Ruby merge: the
206+
‘<code class=property>ruby-merge</code>’ property</a>
207+
208+
<li><a href="#rubyalign"><span class=secno>3.3. </span> Ruby alignment:
206209
the ‘<code class=property>ruby-align</code>’ property</a>
207210
</ul>
208211

@@ -932,7 +935,111 @@ <h3 id=rubypos><span class=secno>3.1. </span> Ruby positioning: the ‘<a
932935
example both 'before'), the relative position of the two elements is
933936
undefined. This setting should not be used.
934937

935-
<h3 id=rubyalign><span class=secno>3.2. </span> Ruby alignment: the ‘<a
938+
<h3 id=rubymerge><span class=secno>3.2. </span>Ruby merge: the ‘<a
939+
href="#ruby-merge"><code class=property>ruby-merge</code></a>’
940+
property</h3>
941+
942+
<table class=propdef>
943+
<tbody>
944+
<tr>
945+
<th>Name:
946+
947+
<td><dfn id=ruby-merge>ruby-merge</dfn>
948+
949+
<tr>
950+
<th><a href="#values">Value</a>:
951+
952+
<td>separate | collapse | auto
953+
954+
<tr>
955+
<th>Initial:
956+
957+
<td>separate
958+
959+
<tr>
960+
<th>Applies to:
961+
962+
<td>all elements and generated content
963+
964+
<tr>
965+
<th>Inherited:
966+
967+
<td>yes
968+
969+
<tr>
970+
<th>Percentages:
971+
972+
<td>N/A
973+
974+
<tr>
975+
<th>Media:
976+
977+
<td>visual
978+
979+
<tr>
980+
<th>Computed value:
981+
982+
<td>specified value (except for initial and inherit)
983+
</table>
984+
985+
<p> This property controls how ruby annotation boxes should be rendered
986+
when there are more than one in a ruby container box.
987+
988+
<p>Possible values:
989+
990+
<dl>
991+
<dt><dfn id=separate title="ruby-merge:separate">‘<code
992+
class=css>separate</code>’</dfn>
993+
994+
<dd>
995+
<p> Each ruby annotation box is rendered in the same column as its
996+
corresponding base box. This style is called Mono-ruby in <a
997+
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
998+
999+
<div class=example>
1000+
<p>The following two markups render the same:
1001+
1002+
<pre>&lt;ruby&gt;ç„¡&lt;rt&gt;ã‚€&lt;/ruby&gt;&lt;ruby&gt;常&lt;rt&gt;じょãlt;/ruby&gt;</pre>
1003+
1004+
<p>and:
1005+
1006+
<pre>&lt;ruby style="ruby-merge:separate"&gt;&lt;rb&gt;ç„¡&lt;rb&gt;常&lt;rt&gt;ã‚€&lt;rt&gt;じょãlt;/ruby&gt;</pre>
1007+
</div>
1008+
1009+
<dt><dfn id=collapse title="ruby-merge:collapse">‘<code
1010+
class=css>collapse</code>’</dfn>
1011+
1012+
<dd>
1013+
<p> All ruby annotation boxes are concatenated, and rendered to the
1014+
concatenated ruby base boxes. This style is called Group-ruby in <a
1015+
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
1016+
1017+
<div class=example>
1018+
<p>The following two markups render the same:
1019+
1020+
<pre>&lt;ruby&gt;無常&lt;rt&gt;むじょãlt;/ruby&gt;</pre>
1021+
1022+
<p>and:
1023+
1024+
<pre>&lt;ruby style="ruby-merge:collapse"&gt;&lt;rb&gt;ç„¡&lt;rb&gt;常&lt;rt&gt;ã‚€&lt;rt&gt;じょãlt;/ruby&gt;</pre>
1025+
</div>
1026+
1027+
<dt><dfn id=auto title="ruby-merge:auto">‘<code
1028+
class=css>auto</code>’</dfn>
1029+
1030+
<dd>
1031+
<p> The user agent may use any algorithm to determine how each ruby
1032+
annotation box is rendered to its corresponding base box.
1033+
1034+
<p> One possible algorithm is described as Jukugo-ruby in <a
1035+
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
1036+
1037+
<p> Another, more simplified algorithm of Jukugo-ruby is to render as
1038+
Mono-ruby if all ruby annotation boxes fit within advances of their
1039+
corresponding base boxes, and render as Group-ruby otherwise.
1040+
</dl>
1041+
1042+
<h3 id=rubyalign><span class=secno>3.3. </span> Ruby alignment: the ‘<a
9361043
href="#ruby-align"><code class=property>ruby-align</code></a>’
9371044
property</h3>
9381045

@@ -1001,7 +1108,7 @@ <h3 id=rubyalign><span class=secno>3.2. </span> Ruby alignment: the ‘<a
10011108
ruby-alignment property. And that ruby-align become a shorthand.
10021109

10031110
<dl>
1004-
<dt><dfn id=auto title="ruby-align:auto">‘<code
1111+
<dt><dfn id=auto0 title="ruby-align:auto">‘<code
10051112
class=css>auto</code>’</dfn>
10061113

10071114
<dd>
@@ -1685,22 +1792,22 @@ <h2 class=no-num id=index> Index</h2>
16851792
<li>Ruby, <a href="#ruby" title="section 1.4."><strong>1.4.</strong></a>
16861793

16871794
<li>ruby-align, <a href="#ruby-align"
1688-
title="section 3.2."><strong>3.2.</strong></a>
1795+
title="section 3.3."><strong>3.3.</strong></a>
16891796

1690-
<li>ruby-align:auto, <a href="#auto"
1691-
title="section 3.2."><strong>3.2.</strong></a>
1797+
<li>ruby-align:auto, <a href="#auto0"
1798+
title="section 3.3."><strong>3.3.</strong></a>
16921799

16931800
<li>ruby-align:center, <a href="#center"
1694-
title="section 3.2."><strong>3.2.</strong></a>
1801+
title="section 3.3."><strong>3.3.</strong></a>
16951802

16961803
<li>ruby-align:distribute-letter, <a href="#distribute-letter"
1697-
title="section 3.2."><strong>3.2.</strong></a>
1804+
title="section 3.3."><strong>3.3.</strong></a>
16981805

16991806
<li>ruby-align:distribute-space, <a href="#distribute-space"
1700-
title="section 3.2."><strong>3.2.</strong></a>
1807+
title="section 3.3."><strong>3.3.</strong></a>
17011808

17021809
<li>ruby-align:start, <a href="#start"
1703-
title="section 3.2."><strong>3.2.</strong></a>
1810+
title="section 3.3."><strong>3.3.</strong></a>
17041811

17051812
<li>ruby annotation, <a href="#ruby-annotation"
17061813
title="section 2."><strong>2.</strong></a>
@@ -1724,6 +1831,18 @@ <h2 class=no-num id=index> Index</h2>
17241831
<li>ruby container box, <a href="#ruby-container-box"
17251832
title="section 2.1."><strong>2.1.</strong></a>
17261833

1834+
<li>ruby-merge, <a href="#ruby-merge"
1835+
title="section 3.2."><strong>3.2.</strong></a>
1836+
1837+
<li>ruby-merge:auto, <a href="#auto"
1838+
title="section 3.2."><strong>3.2.</strong></a>
1839+
1840+
<li>ruby-merge:collapse, <a href="#collapse"
1841+
title="section 3.2."><strong>3.2.</strong></a>
1842+
1843+
<li>ruby-merge:separate, <a href="#separate"
1844+
title="section 3.2."><strong>3.2.</strong></a>
1845+
17271846
<li>ruby-position, <a href="#ruby-position"
17281847
title="section 3.1."><strong>3.1.</strong></a>
17291848

@@ -1787,6 +1906,21 @@ <h2 class=no-num id=property-index> Property index</h2>
17871906

17881907
<td>visual
17891908

1909+
<tr>
1910+
<th><a class=property href="#ruby-merge">ruby-merge</a>
1911+
1912+
<td>separate | collapse | auto
1913+
1914+
<td>separate
1915+
1916+
<td>all elements and generated content
1917+
1918+
<td>yes
1919+
1920+
<td>N/A
1921+
1922+
<td>visual
1923+
17901924
<tr>
17911925
<th><a class=property href="#ruby-position">ruby-position</a>
17921926

‎css-ruby/Overview.src.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -618,6 +618,91 @@ <h3 id="rubypos">
618618
both &#39;before&#39;), the relative position of the two elements is undefined. This
619619
setting should not be used.</p>
620620

621+
<h3 id="rubymerge">Ruby merge: the 'ruby-merge' property</h3>
622+
623+
<table class="propdef">
624+
<tr>
625+
<th>Name:
626+
<td><dfn>ruby-merge</dfn>
627+
<tr>
628+
<th><a href="#values">Value</a>:
629+
<td>separate | collapse | auto
630+
<tr>
631+
<th>Initial:
632+
<td>separate
633+
<tr>
634+
<th>Applies to:
635+
<td>all elements and generated content
636+
<tr>
637+
<th>Inherited:
638+
<td>yes
639+
<tr>
640+
<th>Percentages:
641+
<td>N/A
642+
<tr>
643+
<th>Media:
644+
<td>visual
645+
<tr>
646+
<th>Computed value:
647+
<td>specified value (except for initial and inherit)
648+
</table>
649+
650+
<p>
651+
This property controls how ruby annotation boxes should be rendered
652+
when there are more than one in a ruby container box.
653+
</p>
654+
655+
<p>Possible values:</p>
656+
<dl>
657+
<dt><dfn title="ruby-merge:separate">''separate''</dfn></dt>
658+
<dd>
659+
<p>
660+
Each ruby annotation box is rendered in the same column as its corresponding base box.
661+
This style is called Mono-ruby in [[JLREQ]].
662+
</p>
663+
664+
<div class="example">
665+
<p>The following two markups render the same:</p>
666+
<pre>&lt;ruby&gt;ç„¡&lt;rt&gt;ã‚€&lt;/ruby&gt;&lt;ruby&gt;常&lt;rt&gt;じょãlt;/ruby&gt;</pre>
667+
<p>and:</p>
668+
<pre>&lt;ruby style="ruby-merge:separate"&gt;&lt;rb&gt;ç„¡&lt;rb&gt;常&lt;rt&gt;ã‚€&lt;rt&gt;じょãlt;/ruby&gt;</pre>
669+
</div>
670+
</dd>
671+
672+
<dt><dfn title="ruby-merge:collapse">''collapse''</dfn></dt>
673+
<dd>
674+
<p>
675+
All ruby annotation boxes are concatenated,
676+
and rendered to the concatenated ruby base boxes.
677+
This style is called Group-ruby in [[JLREQ]].
678+
</p>
679+
680+
<div class="example">
681+
<p>The following two markups render the same:</p>
682+
<pre>&lt;ruby&gt;無常&lt;rt&gt;むじょãlt;/ruby&gt;</pre>
683+
<p>and:</p>
684+
<pre>&lt;ruby style="ruby-merge:collapse"&gt;&lt;rb&gt;ç„¡&lt;rb&gt;常&lt;rt&gt;ã‚€&lt;rt&gt;じょãlt;/ruby&gt;</pre>
685+
</div>
686+
</dd>
687+
688+
<dt><dfn title="ruby-merge:auto">''auto''</dfn></dt>
689+
<dd>
690+
<p>
691+
The user agent may use any algorithm to determine how each ruby annotation box
692+
is rendered to its corresponding base box.
693+
</p>
694+
<p>
695+
One possible algorithm is described as Jukugo-ruby in [[JLREQ]].
696+
</p>
697+
<p>
698+
Another, more simplified algorithm of Jukugo-ruby is
699+
to render as Mono-ruby if all ruby annotation boxes fit within
700+
advances of their corresponding base boxes,
701+
and render as Group-ruby otherwise.
702+
</p>
703+
</dd>
704+
</dl>
705+
621706
<h3 id="rubyalign">
622707
Ruby alignment: the 'ruby-align' property</h3>
623708

0 commit comments

Comments
 (0)