8000 [css-ruby] Ruby Overhang and Edge Effects · xfq/csswg-drafts@62f40eb · GitHub
Skip to content

Commit 62f40eb

Browse files
author
kojiishi
committed
[css-ruby] Ruby Overhang and Edge Effects
1 parent 07a651a commit 62f40eb

2 files changed

Lines changed: 98 additions & 18 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,9 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
209209
the ‘<code class=property>ruby-align</code>’ property</a>
210210
</ul>
211211

212+
<li><a href="#rubyover"><span class=secno>4. </span> Ruby Overhang and
213+
Edge Effects</a>
214+
212215
<li class=no-num><a href="#default-stylesheet"> Appendix A: Default Style
213216
Sheet</a>
214217
<ul class=toc>
@@ -220,23 +223,23 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
220223
<li class=no-num><a href="#default-parens"> Generating Parentheses</a>
221224
</ul>
222225

223-
<li><a href="#glossary"><span class=secno>4. </span> Glossary</a>
226+
<li><a href="#glossary"><span class=secno>5. </span> Glossary</a>
224227

225-
<li><a href="#conformance"><span class=secno>5. </span> Conformance</a>
228+
<li><a href="#conformance"><span class=secno>6. </span> Conformance</a>
226229
<ul class=toc>
227-
<li><a href="#conventions"><span class=secno>5.1. </span> Document
230+
<li><a href="#conventions"><span class=secno>6.1. </span> Document
228231
conventions</a>
229232

230-
<li><a href="#conformance-classes"><span class=secno>5.2. </span>
233+
<li><a href="#conformance-classes"><span class=secno>6.2. </span>
231234
Conformance classes</a>
232235

233-
<li><a href="#partial"><span class=secno>5.3. </span> Partial
236+
<li><a href="#partial"><span class=secno>6.3. </span> Partial
234237
implementations</a>
235238

236-
<li><a href="#experimental"><span class=secno>5.4. </span> Experimental
239+
<li><a href="#experimental"><span class=secno>6.4. </span> Experimental
237240
implementations</a>
238241

239-
<li><a href= 77F4 "#testing"><span class=secno>5.5. </span> Non-experimental
242+
<li><a href="#testing"><span class=secno>6.5. </span> Non-experimental
240243
implementations</a>
241244
</ul>
242245

@@ -1270,7 +1273,46 @@ <h3 id=rubyalign><span class=secno>3.3. </span> Ruby alignment: the ‘<a
12701273
class=property>spanned</code>’ elements, a ratio must be determined
12711274
among the ‘<code class=property>columns</code>’ of spanned elements.
12721275
This ratio is computed by taking into consideration the widest element
1273-
within each column.</p>
1276+
within each column.
1277+
1278+
<h2 id=rubyover><span class=secno>4. </span> Ruby Overhang and Edge
1279+
Effects</h2>
1280+
1281+
<p> When <a href="#ruby-annotation-box"><i>ruby annotation box</i></a> is
1282+
longer than its corresponding <a href="#ruby-base-box"><i>ruby base
1283+
box</i></a>, the <a href="#ruby-annotation-box"><i>ruby annotation
1284+
box</i></a> may partially overhang adjacent boxes.
1285+
1286+
<p> This level of the specificaiton does not define how much the overhang
1287+
may be allowed under what conditions.
1288+
1289+
<div class=example>
1290+
<p> The user agent may use <a href="#JIS4051"
1291+
rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> recommendation of using
1292+
one ruby text character length as the maximum overhang length. Detailed
1293+
rules for how ruby text can overhang adjacent characters for Japanese
1294+
are described by <a href="#JLREQ"
1295+
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
1296+
</div>
1297+
1298+
<p> When such <a href="#ruby-annotation-box"><i>ruby annotation
1299+
box</i></a> is at the start or end edge of a line, user agent may align
1300+
the side of the ruby text that touches the edge of the line to the
1301+
corresponding edge of the base. This type of alignment is described by
1302+
<a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
1303+
1304+
<p> This level of the specificaiton does not provide a mechanism to
1305+
control this behavior.
1306+
1307+
<div class=figure>
1308+
<p><img
1309+
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
1310+
height=109 src="images/ra-le-l.gif" width=146><img
1311+
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
1312+
height=110 src="images/ra-le-r.gif" width=146>
1313+
1314+
<p><b>Figure 4.2.8</b>: Line edge ruby alignment
1315+
</div>
12741316
<!--
12751317
<h3 id="rubyover">
12761318
Ruby overhanging: the 'ruby-overhang' property</h3>
@@ -1493,7 +1535,7 @@ <h3 class=no-num id=default-parens> Generating Parentheses</h3>
14931535
<!-- -->rt + rb::before { content: ")"; }
14941536
<!-- -->rt + rtc::before { content: ")("; }</pre>
14951537

1496-
<h2 id=glossary><span class=secno>4. </span> Glossary</h2>
1538+
<h2 id=glossary><span class=secno>5. </span> Glossary</h2>
14971539

14981540
<dl>
14991541
<dt><a id=g-bopomofo><strong><span lang=zh>Bopomofo</span></strong></a>
@@ -1552,9 +1594,9 @@ <h 8096 2 id=glossary><span class=secno>4. </span> Glossary</h2>
15521594
and serves as an annotation or a pronunciation guide for that text.
15531595
</dl>
15541596

1555-
<h2 id=conformance><span class=secno>5. </span> Conformance</h2>
1597+
<h2 id=conformance><span class=secno>6. </span> Conformance</h2>
15561598

1557-
<h3 id=conventions><span class=secno>5.1. </span> Document conventions</h3>
1599+
<h3 id=conventions><span class=secno>6.1. </span> Document conventions</h3>
15581600

15591601
<p>Conformance requirements are expressed with a combination of
15601602
descriptive assertions and RFC 2119 terminology. The key words
@@ -1581,7 +1623,7 @@ <h3 id=conventions><span class=secno>5.1. </span> Document conventions</h3>
15811623

15821624
<p class=note>Note, this is an informative note.
15831625

1584-
<h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
1626+
<h3 id=conformance-classes><span class=secno>6.2. </span> Conformance
15851627
classes</h3>
15861628

15871629
<p>Conformance to CSS Ruby Module is defined for three conformance
@@ -1627,7 +1669,7 @@ <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
16271669
meet all other conformance requirements of style sheets as described in
16281670
this module.
16291671

1630-
<h3 id=partial><span class=secno>5.3. </span> Partial implementations</h3>
1672+
<h3 id=partial><span class=secno>6.3. </span> Partial implementations</h3>
16311673

16321674
<p>So that authors can exploit the forward-compatible parsing rules to
16331675
assign fallback values, CSS renderers <strong>must</strong> treat as
@@ -1641,7 +1683,7 @@ <h3 id=partial><span class=secno>5.3. </span> Partial implementations</h3>
16411683
considered invalid (as unsupported values must be), CSS requires that
16421684
the entire declaration be ignored.
16431685

1644-
<h3 id=experimental><span class=secno>5.4. </span> Experimental
1686+
<h3 id=experimental><span class=secno>6.4. </span> Experimental
16451687
implementations</h3>
16461688

16471689
<p>To avoid clashes with future CSS features, the CSS2.1 specification
@@ -1656,7 +1698,7 @@ <h3 id=experimental><span class=secno>5.4. </span> Experimental
16561698
Working Drafts. This avoids incompatibilities with future changes in the
16571699
draft.
16581700

1659-
<h3 id=testing><span class=secno>5.5. </span> Non-experimental
1701+
<h3 id=testing><span class=secno>6.5. </span> Non-experimental
16601702
implementations</h3>
16611703

16621704
<p>Once a specification reaches the Candidate Recommendation stage,
@@ -1786,10 +1828,10 @@ <h2 class=no-num id=index> Index</h2>
17861828
<!--begin-index-->
17871829
<ul class=indexlist>
17881830
<li>authoring tool, <a href="#authoring-tool"
1789-
title="section 5.2."><strong>5.2.</strong></a>
1831+
title="section 6.2."><strong>6.2.</strong></a>
17901832

17911833
<li>renderer, <a href="#renderer"
1792-
title="section 5.2."><strong>5.2.</strong></a>
1834+
title="section 6.2."><strong>6.2.</strong></a>
17931835

17941836
<li>Ruby, <a href="#ruby" title="section 1.4."><strong>1.4.</strong></a>
17951837

@@ -1869,7 +1911,7 @@ <h2 class=no-num id=index> Index</h2>
18691911
<li>style sheet
18701912
<ul>
18711913
<li>as conformance class, <a href="#style-sheet"
1872-
title="section 5.2."><strong>5.2.</strong></a>
1914+
title="section 6.2."><strong>6.2.</strong></a>
18731915
</ul>
18741916
</ul>
18751917
<!--end-index-->

‎css-ruby/Overview.src.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -895,6 +895,44 @@ <h3 id="rubyalign">
895895
elements. This ratio is computed by taking into consideration the widest
896896
element within each column.</p>
897897

898+
<h2 id="rubyover">
899+
Ruby Overhang and Edge Effects</h2>
900+
901+
<p>
902+
When <i>ruby annotation box</i> is longer than its corresponding <i>ruby base box</i>,
903+
the <i>ruby annotation box</i> may partially overhang adjacent boxes.
904+
</p>
905+
<p>
906+
This level of the specificaiton does not define
907+
how much the overhang may be allowed under what conditions.
908+
</p>
909+
<div class="example">
910+
<p>
911+
The user agent may use [[JIS4051]] recommendation of
912+
using one ruby text character length as the maximum overhang length.
913+
Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [[JLREQ]].
914+
</p>
915+
</div>
916+
917+
<p>
918+
When such <i>ruby annotation box</i> is at the start or end edge of a line,
919+
user agent may align the side of the ruby text that touches the edge of the line
920+
to the corresponding edge of the base.
921+
This type of alignment is described by [[JLREQ]].
922+
</p>
923+
<p>
924+
This level of the specificaiton does not provide a mechanism to control this behavior.
925+
</p>
926+
<div class="figure">
927+
<p><img width="146" height="109"
928+
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
929+
src="images/ra-le-l.gif" /><img width="146"
930+
height="110"
931+
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
932+
src="images/ra-le-r.gif" /></p>
933+
<p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
934+
</div>
935+
898936
<!--
899937
<h3 id="rubyover">
900938
Ruby overhanging: the 'ruby-overhang' property</h3>

0 commit comments

Comments
 (0)