css-ruby/Overview.src.html

changeset 9108
7f542b3ebae3
parent 8854
c159c7601557
child 9109
932831c67e0a
     1.1 --- a/css-ruby/Overview.src.html	Wed Sep 11 19:04:16 2013 +0200
     1.2 +++ b/css-ruby/Overview.src.html	Wed Sep 11 14:27:17 2013 -0700
     1.3 @@ -225,7 +225,7 @@
     1.4  	and “columns” (each <i>ruby base</i> and its corresponding <i>ruby annotations</i>).
     1.5  
     1.6  	<p>Consecutive bases and annotations are grouped together into <dfn>ruby segments</dfn>.
     1.7 -	Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases<i>.
     1.8 +	Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases</i>.
     1.9  
    1.10  	<p class="note">In HTML, a single <code>&lt;ruby&gt;</code> element may contain multiple <i>ruby segments</i>.
    1.11  	(In the XHTML Ruby model, a single <code>&lt;ruby&gt;</code> element can only contain one <i>ruby segment</i>.)
    1.12 @@ -373,15 +373,15 @@
    1.13  	pairing begins with the deepest <i>ruby container</i>,
    1.14  	then expands out,
    1.15  	treating each <i>ruby container</i> nested within another <i>ruby container</i>
    1.16 -	as a <i>ruby base</i>,
    1.17 +	essentially as a single <i>ruby base</i> in the outer <i>ruby container</i>,
    1.18  	and associating each <i>ruby annotation</i>
    1.19 -	associated with the nested <i>ruby container</i>
    1.20 +	paired with the nested <i>ruby container</i>
    1.21  	as being associated with (spanning) all of its <i>ruby bases</i>.
    1.22  
    1.23  	<p>Using nested <i>ruby containers</i> thus allows the representation
    1.24  	of complex spanning relationships.
    1.25  
    1.26 -	<p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5.
    1.27 +	<p class="issue">This has to be Level 1 because HTML5 allows it, so we have to handle it. Yay HTML5.
    1.28  
    1.29  <h3 id="autohide">
    1.30  Autohiding Annotations</h3>
    1.31 @@ -431,7 +431,7 @@
    1.32  	otherwise ruby only works for CJK.
    1.33  
    1.34  	<p><i>Collapsible</i> white space within a ruby structure is discarded
    1.35 -	at the beginning and end of a <i>ruby container</i>,
    1.36 +	at the beginning and end of a <i>ruby container</i>, <i>ruby annotation container</i>, or <i>ruby base container</i>,
    1.37  	and at the beginning/end of a <i>ruby annotation box</i> or <i>ruby base box</i> if white space is not its only contents.
    1.38  	Between <i>ruby segments</i>, between <i>ruby bases</i>, and between <i>ruby annotations</i>, however,
    1.39  	white space is not discarded.
    1.40 @@ -456,7 +456,7 @@
    1.41  		<pre>
    1.42  <!--		-->&lt;ruby>
    1.43  <!--		-->  &lt;rb>東&lt;/rb>	&lt;rb>京&lt;/rb>
    1.44 -<!--		-->  &lt;rt>とう&lt;/rt>	&lt;rt>きょう&lt;/rt>
    1.45 +<!--		-->  &lt;rt>とう&lt;/rt> &lt;rt>きょう&lt;/rt>
    1.46  <!--		-->&lt;/ruby></pre>
    1.47  	</div>
    1.48  
    1.49 @@ -522,10 +522,11 @@
    1.50  Inter-character ruby layout</h4>
    1.51  
    1.52  	<p>Inter-character annotations have special layout.
    1.53 -	When 'ruby-position' indicates ''inter-character'' annotations, the affected <i>annotation boxes</i>
    1.54 +	When 'ruby-position' indicates ''inter-character'' annotations,
    1.55 +	the affected <i>annotation boxes</i>
    1.56  	are spliced into and measured as part of the layout of the base level.
    1.57  	The <i>ruby base container</i> must be sized to include both the <i>base boxes</i>
    1.58 -	as well as the ''inter-character'' <i>annotation boxes</i>
    1.59 +	as well as the ''inter-character'' <i>annotation boxes</i>.
    1.60  	The affected <i>ruby annotation container</i> is similarly sized
    1.61  	so that its content box coincides with that of the <i>ruby base container</i>.
    1.62  
    1.63 @@ -556,7 +557,7 @@
    1.64  Ruby box and line breaking</h3>
    1.65  
    1.66  	<p>When there is not enough space for an entire <i>ruby container</i> to fit on the line,
    1.67 -	the ruby may be broken wherever the base level allows a break.
    1.68 +	the ruby may be broken wherever all levels simultaneously allow a break.
    1.69  	Ruby most often breaks between base-annotation sets,
    1.70  	but if the line-breaking rules allow it, can also break within a <i>ruby base</i>
    1.71  	(and, in parallel, its associated <i>annotation boxes</i>).
    1.72 @@ -588,7 +589,7 @@
    1.73  	</div>
    1.74  
    1.75  	<p>Whether ruby can break between two adjacent <i>ruby bases</i>
    1.76 -	is controlled by normal line-breaking rules for the affected text,
    1.77 +	is controlled by normal line-breaking rules for the base text,
    1.78  	exactly as if the <i>ruby bases</i> were adjacent <i>inline</i> boxes.
    1.79  	(The annotations are ignored when determining soft wrap opportunities for the base level.)
    1.80  
    1.81 @@ -932,7 +933,7 @@
    1.82  			<p>
    1.83  				All <i>ruby annotation boxes</i> within the same <i>ruby segment</i> on the same line are concatenated,
    1.84  				and laid out as if their contents belonged to a single <i>ruby annotation box</i>
    1.85 -				spanning all their associated <i>ruby base boxes.
    1.86 +				spanning all their associated <i>ruby base boxes</i>.
    1.87  				This style renders similar to “group ruby” in [[JLREQ]],
    1.88  				except that <i>ruby annotations</i> are kept together with their respective <i>ruby bases</i> when breaking lines.
    1.89  			</p>
    1.90 @@ -965,7 +966,7 @@
    1.91  		</dd>
    1.92  	</dl>
    1.93  
    1.94 -<h3 id="rubyalign">
    1.95 +<h3 id="ruby-align-property"><a name="rubyalign"></a>
    1.96  Ruby Text Distribution: the 'ruby-align' property</h3>
    1.97  
    1.98  	<table class="propdef">
    1.99 @@ -997,28 +998,70 @@
   1.100  	</table>
   1.101  
   1.102  	<p>This property specifies how text is distributed within the various ruby boxes
   1.103 -		when their text contents exactly fill their respective boxes.
   1.104 +	when their contents do not exactly fill their respective boxes.
   1.105  
   1.106  	<p>Values have the following meanings:
   1.107  	<p class="issue"><span class="issuehead">Issue:&nbsp;</span> Tony Graham has <a href="http://www.w3.org/Style/XSL/Group/FO/wiki/Ruby#Treat_CSS3_.22ruby-align.22_As_Shorthand.3F">suggested </a>that distribute-letter and distribute-space be values of a ruby-group-distribution property, and line-edge be moved to a ruby-alignment-edge property, and that the rest be gathered under a ruby-alignment property. And that ruby-align become a shorthand.</p>
   1.108  	<dl>
   1.109 -		<dt><dfn title="ruby-align:auto">''auto''</dfn></dt>
   1.110 +		<dt><dfn title="ruby-align:start">''start''</dfn></dt>
   1.111 +		<dd>The ruby content is aligned with the start edge of its box.
   1.112 +			<div class="figure">
   1.113 +				<p><img
   1.114 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   1.115 +					width="145" height="91" src="images/ra-l.gif" /><img
   1.116 +					width="145" height="91"
   1.117 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   1.118 +					src="images/ra-l-rb.gif" />
   1.119 +				<p class="caption">''start'' ruby alignment
   1.120 +			</div>
   1.121 +		</dd>
   1.122 +
   1.123 +		<dt><dfn title="ruby-align:center">''center''</dfn></dt>
   1.124 +		<dd>The ruby content is centered within its box.
   1.125 +			<div class="figure">
   1.126 +				<p><img width="145" height="91"
   1.127 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   1.128 +					src="images/ra-c.gif" /><img width="145" height="91"
   1.129 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   1.130 +					src="images/ra-c-rb.gif" />
   1.131 +				<p class="caption">''center'' ruby alignment
   1.132 +			</div>
   1.133 +		</dd>
   1.134 +
   1.135 +		<dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt>
   1.136  		<dd>
   1.137 -			<p>The user agent determines how the ruby contents are aligned.
   1.138 -				This is the initial value.
   1.139 -				The behavior recommended by [[JLREQ]] is for  wide-cell ruby  to be aligned in the 'distribute-space' mode:
   1.140 +			<p>The ruby content expands as defined for normal text justification
   1.141 +				(as defined by 'text-justify'),
   1.142 +			<div class="figure">
   1.143 +				<p><img width="145" height="91"
   1.144 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   1.145 +				src="images/ra-dl.gif" /><img width="145" height="91"
   1.146 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   1.147 +				src="images/ra-dl-rb.gif" />
   1.148 +				<p class="caption">''space-between'' ruby alignment
   1.149 +			</div>
   1.150 +		</dd>
   1.151 +
   1.152 +		<dt><dfn title="ruby-align:space-around">''space-around''</dfn></dt>
   1.153 +		<dd>
   1.154 +			<p>As for ''space-between''
   1.155 +			except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a>
   1.156 +			whose space is distributed half before and half after the ruby content.
   1.157 +			<div class="example">
   1.158 +				<p>Since a typical implementation will by default define expansion opportunities
   1.159 +					between every adjacent pair of CJK <i>characters</i>
   1.160 +					and not between adjacent pairs of Latin <i>characters</i>,
   1.161 +					this should result in the behavior recommended by [[JLREQ]]:
   1.162 +					for wide-cell ruby to be aligned in the 'distribute-space' mode...
   1.163  				<div class="figure">
   1.164  					<p><img width="145" height="91"
   1.165  					alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   1.166  					src="images/ra-ds.gif" /><img width="145" height="91"
   1.167  					alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   1.168 -					src="images/ra-ds-rb.gif" /></p>
   1.169 -					<p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
   1.170 -					'distribute-space' justified</p>
   1.171 +					src="images/ra-ds-rb.gif" />
   1.172 +					<p class="caption">Wide-cell text in ''space-around'' ruby alignment is distributed
   1.173  				</div>
   1.174 -
   1.175 -			<p>The recommended behavior for  narrow-cell glyph ruby is to be
   1.176 -				aligned in the 'center' mode.</p>
   1.177 +				<p>... and narrow-cell glyph ruby to be aligned in the 'center' mode.
   1.178  				<div class="figure">
   1.179  					<p><img
   1.180  					alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   1.181 @@ -1026,115 +1069,11 @@
   1.182  					src="images/ra-c-h.gif" /><img
   1.183  					alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   1.184  					width="145" height="91"
   1.185 -					src="images/ra-c-rb-h.gif" /></p>
   1.186 -					<p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
   1.187 -					is centered</p>
   1.188 +					src="images/ra-c-rb-h.gif" />
   1.189 +					<p class="caption">Narrow-width ruby text in ''space-around'' ruby alignment is centered
   1.190  				</div>
   1.191 -		</dd>
   1.192 -
   1.193 -		<dt><dfn title="ruby-align:start">''start''</dfn></dt>
   1.194 -		<dd>The ruby annotation content is aligned with the start edge of the base.
   1.195 -			<div class="figure">
   1.196 -				<p><img
   1.197 -					alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   1.198 -					width="145" height="91" src="images/ra-l.gif" /><img
   1.199 -					width="145" height="91"
   1.200 -					alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   1.201 -					src="images/ra-l-rb.gif" /></p>
   1.202 -				<p><b>Figure 4.2.3</b>: Start ruby alignment</p>
   1.203  			</div>
   1.204  		</dd>
   1.205 -
   1.206 -		<dt><dfn title="ruby-align:center">''center''</dfn></dt>
   1.207 -		<dd>The ruby text content is centered within the width of the base. If the
   1.208 -			length of the base is smaller than the length of the ruby text, then the
   1.209 -			base is centered within the width of the ruby text.
   1.210 -
   1.211 -			<div class="figure">
   1.212 -				<p><img width="145" height="91"
   1.213 -					alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   1.214 -					src="images/ra-c.gif" /><img width="145" height="91"
   1.215 -					alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   1.216 -					src="images/ra-c-rb.gif" /></p>
   1.217 -				<p><b>Figure 4.2.4</b>: Center ruby alignment</p>
   1.218 -			</div>
   1.219 -		</dd>
   1.220 -
   1.221 -		<!--
   1.222 -  <dt><strong>right</strong></dt>
   1.223 -    <dd>The ruby text content is aligned with the end edge of the base.
   1.224 -    	<p class="issue"><span class="issuehead">Issue:&nbsp;</span> The i18n WG feels that end and right should not be synonymous, and proposed to drop right (there is no left/right in overhang)? See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   1.225 -<div class="figure">
   1.226 -	<p><img class="example" width="145" height="91"
   1.227 -      alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base"
   1.228 -      src="images/ra-r.gif" /><img class="example" width="145" height="91"
   1.229 -      alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base"
   1.230 -      src="images/ra-r-rb.gif" /></p>
   1.231 -	<p><b>Figure 4.2.5</b>: End ruby alignment</p>
   1.232 -</div>
   1.233 -    </dd>
   1.234 -		-->
   1.235 -
   1.236 -		<dt><dfn title="ruby-align:distribute-letter">''distribute-letter''</dfn></dt>
   1.237 -		<dd>If the width of the ruby text is smaller than that of the base, then
   1.238 -			the ruby text contents are evenly distributed across the width of the
   1.239 -			base, with the first and last ruby text glyphs lining up with the
   1.240 -			corresponding first and last base glyphs. If the width of the ruby text
   1.241 -			is at least the width of the base, then the letters of the base are
   1.242 -			evenly distributed across the width of the ruby text.
   1.243 -
   1.244 -			<div class="figure">
   1.245 -				<p><img width="145" height="91"
   1.246 -				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   1.247 -				src="images/ra-dl.gif" /><img width="145" height="91"
   1.248 -				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   1.249 -				src="images/ra-dl-rb.gif" /></p>
   1.250 -				<p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
   1.251 -			</div>
   1.252 -		</dd>
   1.253 -
   1.254 -		<dt><dfn title="ruby-align:distribute-space">''distribute-space''</dfn></dt>
   1.255 -		<dd>If the width of the ruby text is smaller than that of the base, then
   1.256 -			the ruby text contents are evenly distributed across the width of the
   1.257 -			base, with a certain amount of white space preceding the first and
   1.258 -			following the last character in the ruby text. That amount of white
   1.259 -			space is normally equal to half the amount of inter-character space of
   1.260 -			the ruby text. If the width of the ruby text is at least the width of
   1.261 -			the base, then the same type of space distribution applies to the base.
   1.262 -			In other words, if the base is shorter than the ruby text, the base is
   1.263 -			distribute-space aligned. This type of alignment
   1.264 -			is described by [[JLREQ]].
   1.265 -
   1.266 -			<div class="figure">
   1.267 -				<p><img width="145" height="91"
   1.268 -					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   1.269 -					src="images/ra-ds.gif" /><img width="145" height="91"
   1.270 -					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   1.271 -					src="images/ra-ds-rb.gif" /></p>
   1.272 -				<p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
   1.273 -			</div>
   1.274 -		</dd>
   1.275 -
   1.276 -		<!--
   1.277 -  <dt><strong>line-edge</strong></dt>
   1.278 -    <dd>If the ruby text is not adjacent to a line edge, it is aligned as in
   1.279 -      'auto'. If it is adjacent to a line edge, then it is still aligned as in
   1.280 -      auto, but the side of the ruby text that touches the end of the line is
   1.281 -      lined up with the corresponding edge of the base. This type of alignment
   1.282 -      is described by [[JLREQ]]. This type of alignment is
   1.283 -      relevant only to the scenario where the ruby text is longer than the
   1.284 -      ruby base. In the other scenarios, this is just 'auto'.
   1.285 -		<div class="figure">
   1.286 -      <p><img class="example" width="146" height="109"
   1.287 -      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
   1.288 -      src="images/ra-le-l.gif" /><img class="example" width="146"
   1.289 -      height="110"
   1.290 -      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
   1.291 -      src="images/ra-le-r.gif" /></p>
   1.292 -      <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
   1.293 -      </div>
   1.294 -    </dd>
   1.295 -		-->
   1.296  	</dl>
   1.297  
   1.298  	<p>For a complex ruby with spanning elements, one additional consideration is

mercurial