Skip to content

Commit 5039f11

Browse files
fantasaifantasai
committed
[css-ruby] Clarifications/fixes to ruby-align
1 parent 85117f6 commit 5039f11

2 files changed

Lines changed: 31 additions & 29 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,12 +1418,12 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
14181418
<tr>
14191419
<th><a href="#values">Value</a>:
14201420

1421-
<td>auto | start | center | distribute-letter | distribute-space
1421+
<td>start | center | space-between | space-around
14221422

14231423
<tr>
14241424
<th>Initial:
14251425

1426-
<td>auto
1426+
<td>space-around
14271427

14281428
<tr>
14291429
<th>Applies to:
@@ -1476,7 +1476,7 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
14761476
alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
14771477
height=91 src="images/ra-l-rb.gif" width=145>
14781478

1479-
<p class=caption>‘<code class=css>start</code>’ ruby alignment
1479+
<p class=caption>‘<code class=css>start</code>’ ruby distribution
14801480
</div>
14811481

14821482
<dt><dfn id=center title="ruby-align:center">‘<code
@@ -1490,15 +1490,18 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
14901490
alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
14911491
height=91 src="images/ra-c-rb.gif" width=145>
14921492

1493-
<p class=caption>‘<code class=css>center</code>’ ruby alignment
1493+
<p class=caption>‘<code class=css>center</code>’ ruby distribution
14941494
</div>
14951495

14961496
<dt><dfn id=space-between title="ruby-align:space-between">‘<code
14971497
class=css>space-between</code>’</dfn>
14981498

14991499
<dd>
15001500
<p>The ruby content expands as defined for normal text justification (as
1501-
defined by ‘<code class=property>text-justify</code>’),
1501+
defined by ‘<code class=property>text-justify</code>’), except that
1502+
if there are no <a
1503+
href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion
1504+
opportunities</i></a> the content is centered.
15021505

15031506
<div class=figure>
15041507
<p><img
@@ -1508,7 +1511,7 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
15081511
height=91 src="images/ra-dl-rb.gif" width=145>
15091512

15101513
<p class=caption>‘<code class=css>space-between</code>’ ruby
1511-
alignment
1514+
distribution
15121515
</div>
15131516

15141517
<dt><dfn id=space-around title="ruby-align:space-around">‘<code
@@ -1522,13 +1525,12 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
15221525
after the ruby content.
15231526

15241527
<div class=example>
1525-
<p>Since a typical implementation will by default define expansion
1526-
opportunities between every adjacent pair of CJK <i>characters</i> and
1527-
not between adjacent pairs of Latin <i>characters</i>, this should
1528+
<p>Since a typical implementation will by default define <i>expansion
1529+
opportunities</i> between every adjacent pair of CJK <i>characters</i>
1530+
and not between adjacent pairs of Latin <i>characters</i>, this should
15281531
result in the behavior recommended by <a href="#JLREQ"
1529-
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>: for wide-cell ruby to be
1530-
aligned in the ‘<code class=property>distribute-space</code>’
1531-
mode...
1532+
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>: for wide-cell ruby content
1533+
to be distributed...
15321534

15331535
<div class=figure>
15341536
<p><img
@@ -1538,11 +1540,10 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
15381540
height=91 src="images/ra-ds-rb.gif" width=145>
15391541

15401542
<p class=caption>Wide-cell text in ‘<code
1541-
class=css>space-around</code>’ ruby alignment is distributed
1543+
class=css>space-around</code>’ ruby distribution is spaced apart
15421544
</div>
15431545

1544-
<p>... and narrow-cell glyph ruby to be aligned in the ‘<code
1545-
class=property>center</code>’ mode.
1546+
<p>... and narrow-cell glyph ruby to be centered.
15461547

15471548
<div class=figure>
15481549
<p><img
@@ -1552,7 +1553,7 @@ <h3 id=ruby-align-property><span class=secno>3.3. </span><a
15521553
height=91 src="images/ra-c-rb-h.gif" width=145>
15531554

15541555
<p class=caption>Narrow-width ruby text in ‘<code
1555-
class=css>space-around</code>’ ruby alignment is centered
1556+
class=css>space-around</code>’ ruby distribution is centered
15561557
</div>
15571558
</div>
15581559
</dl>
@@ -2404,9 +2405,9 @@ <h2 class=no-num id=property-index> Property index</h2>
24042405
<tr>
24052406
<th><a class=property href="#ruby-align">ruby-align</a>
24062407

2407-
<td>auto | start | center | distribute-letter | distribute-space
2408+
<td>start | center | space-between | space-around
24082409

2409-
<td>auto
2410+
<td>space-around
24102411

24112412
<td>ruby bases, ruby annotations, ruby base containers, ruby annotation
24122413
containers

‎css-ruby/Overview.src.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -975,11 +975,10 @@ <h3 id="ruby-align-property"><a name="rubyalign"></a>
975975
<td><dfn>ruby-align</dfn>
976976
<tr>
977977
<th><a href="#values">Value</a>:
978-
<td>auto | start | center |
979-
distribute-letter | distribute-space
978+
<td>start | center | space-between | space-around
980979
<tr>
981980
<th>Initial:
982-
<td>auto
981+
<td>space-around
983982
<tr>
984983
<th>Applies to:
985984
<td>ruby bases, ruby annotations, ruby base containers, ruby annotation containers
@@ -1012,7 +1011,7 @@ <h3 id="ruby-align-property"><a name="rubyalign"></a>
10121011
width="145" height="91"
10131012
alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
10141013
src="images/ra-l-rb.gif" />
1015-
<p class="caption">''start'' ruby alignment
1014+
<p class="caption">''start'' ruby distribution
10161015
</div>
10171016
</dd>
10181017

@@ -1024,21 +1023,23 @@ <h3 id="ruby-align-property"><a name="rubyalign"></a>
10241023
src="images/ra-c.gif" /><img width="145" height="91"
10251024
alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
10261025
src="images/ra-c-rb.gif" />
1027-
<p class="caption">''center'' ruby alignment
1026+
<p class="caption">''center'' ruby distribution
10281027
</div>
10291028
</dd>
10301029

10311030
<dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt>
10321031
<dd>
10331032
<p>The ruby content expands as defined for normal text justification
10341033
(as defined by 'text-justify'),
1034+
except that if there are no <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunities</i></a>
1035+
the content is centered.
10351036
<div class="figure">
10361037
<p><img width="145" height="91"
10371038
alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
10381039
src="images/ra-dl.gif" /><img width="145" height="91"
10391040
alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
10401041
src="images/ra-dl-rb.gif" />
1041-
<p class="caption">''space-between'' ruby alignment
1042+
<p class="caption">''space-between'' ruby distribution
10421043
</div>
10431044
</dd>
10441045

@@ -1048,20 +1049,20 @@ <h3 id="ruby-align-property"><a name="rubyalign"></a>
10481049
except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a>
10491050
whose space is distributed half before and half after the ruby content.
10501051
<div class="example">
1051-
<p>Since a typical implementation will by default define expansion opportunities
1052+
<p>Since a typical implementation will by default define <i>expansion opportunities</i>
10521053
between every adjacent pair of CJK <i>characters</i>
10531054
and not between adjacent pairs of Latin <i>characters</i>,
10541055
this should result in the behavior recommended by [[JLREQ]]:
1055-
for wide-cell ruby to be aligned in the 'distribute-space' mode...
1056+
for wide-cell ruby content to be distributed...
10561057
<div class="figure">
10571058
<p><img width="145" height="91"
10581059
alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
10591060
src="images/ra-ds.gif" /><img width="145" height="91"
10601061
alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
10611062
src="images/ra-ds-rb.gif" />
1062-
<p class="caption">Wide-cell text in ''space-around'' ruby alignment is distributed
1063+
<p class="caption">Wide-cell text in ''space-around'' ruby distribution is spaced apart
10631064
</div>
1064-
<p>... and narrow-cell glyph ruby to be aligned in the 'center' mode.
1065+
<p>... and narrow-cell glyph ruby to be centered.
10651066
<div class="figure">
10661067
<p><img
10671068
alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
@@ -1070,7 +1071,7 @@ <h3 id="ruby-align-property"><a name="rubyalign"></a>
10701071
alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
10711072
width="145" height="91"
10721073
src="images/ra-c-rb-h.gif" />
1073-
<p class="caption">Narrow-width ruby text in ''space-around'' ruby alignment is centered
1074+
<p class="caption">Narrow-width ruby text in ''space-around'' ruby distribution is centered
10741075
</div>
10751076
</div>
10761077
</dd>

0 commit comments

Comments
 (0)