[css-ruby] Define line-breaking. Delete old text wrt line-stacking.

Fri, 21 Jun 2013 16:19:24 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 21 Jun 2013 16:19:24 -0700
changeset 8533
e9426bf43628
parent 8532
6d2200556a05
child 8534
db340cae813c

[css-ruby] Define line-breaking. Delete old text wrt line-stacking.

css-ruby/Overview.html file | annotate | diff | comparison | revisions
css-ruby/Overview.src.html file | annotate | diff | comparison | revisions
css-ruby/images/r-break-a.gif file | annotate | diff | comparison | revisions
     1.1 --- a/css-ruby/Overview.html	Thu Jun 20 17:36:13 2013 -0700
     1.2 +++ b/css-ruby/Overview.html	Fri Jun 21 16:19:24 2013 -0700
     1.3 @@ -19,7 +19,7 @@
     1.4  
     1.5    <meta content="CSS Ruby Module Level 1" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-06-20 name=dcterms.date>
     1.8 +  <meta content=2013-06-21 name=dcterms.date>
     1.9    <meta content="Elika J. Etemad" name=dcterms.creator>
    1.10    <meta content="Koji Ishii" name=dcterms.creator>
    1.11    <meta content="Richard Ishida" name=dcterms.creator>
    1.12 @@ -40,8 +40,8 @@
    1.13     <h1 class=p-name>CSS Ruby Module Level 1</h1>
    1.14  
    1.15     <h2 class="no-num no-toc" id=longstatus-date->Editor's Draft <time
    1.16 -    class=dt-updated datetime=20130620>20 June 2013</time>
    1.17 -    <!-- for HTML4 doctype: <span class="value-title" title="20130620">20 June 2013</span></span> --></h2>
    1.18 +    class=dt-updated datetime=20130621>21 June 2013</time>
    1.19 +    <!-- for HTML4 doctype: <span class="value-title" title="20130621">21 June 2013</span></span> --></h2>
    1.20  
    1.21     <dl>
    1.22      <dt>This version:
    1.23 @@ -204,16 +204,7 @@
    1.24          Ruby</a>
    1.25        </ul>
    1.26  
    1.27 -     <li><a href="#box-model"><span class=secno>2.4. </span> Generating Ruby
    1.28 -      Structure</a>
    1.29 -
    1.30 -     <li><a href="#box-model"><span class=secno>2.5. </span> Ruby box
    1.31 -      model</a>
    1.32 -
    1.33 -     <li><a href="#ruby-line-height"><span class=secno>2.6. </span> Ruby box
    1.34 -      and line stacking</a>
    1.35 -
    1.36 -     <li><a href="#ruby-line-breaking"><span class=secno>2.7. </span> Ruby
    1.37 +     <li><a href="#ruby-line-breaking"><span class=secno>2.4. </span> Ruby
    1.38        box and line breaking</a>
    1.39      </ul>
    1.40  
    1.41 @@ -652,92 +643,79 @@
    1.42    <p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we
    1.43     have to handle it. Yay HTML5.
    1.44  
    1.45 -  <h3 id=box-model><span class=secno>2.4. </span> Generating Ruby Structure</h3>
    1.46 +  <h3 id=ruby-line-breaking><span class=secno>2.4. </span> Ruby box and line
    1.47 +   breaking</h3>
    1.48  
    1.49 -  <p>
    1.50 -
    1.51 -  <h3 id=box-model><span class=secno>2.5. </span> Ruby box model</h3>
    1.52 -
    1.53 -  <h3 id=ruby-line-height><span class=secno>2.6. </span> Ruby box and line
    1.54 -   stacking</h3>
    1.55 -
    1.56 -  <p>The interaction of the ruby box and line stacking is controlled by the
    1.57 -   ‘<code class=property>line-stacking-ruby</code>’ property described in
    1.58 -   the CSS3 Line Module. That property takes two values: ‘<code
    1.59 -   class=property>include-ruby</code>’ and ‘<code class=css>exclude-ruby.
    1.60 -   Depending on the property value, the ruby box is considered or excluded
    1.61 -   for line stacking. Even if the ruby box is considered for line stacking,
    1.62 -   some values of the </code>’line-stacking-strategy' property (also
    1.63 -   described in the CSS3 Line module) can still create occurrences where a
    1.64 -   the ruby box will eventually be ignored (e.g. case where the ‘<code
    1.65 -   class=property>line-stacking-strategy</code>’ value is ‘<code
    1.66 -   class=property>block-line-height</code>’).
    1.67 -
    1.68 -  <p>In the following figure, each line box is shown with leading space
    1.69 -   distributed before and after the two text segments (‘<code
    1.70 -   class=css>Previous line</code>’ and ‘<a href="#ruby-base-box"><code
    1.71 -   class=css>Ruby base</code></a>’); the dotted lines show the line box for
    1.72 -   each line. The ‘<code class=property>line-stacking-ruby</code>’
    1.73 -   property is set to ‘<code class=property>exclude-ruby</code>’. The
    1.74 -   achieved effect is that the ruby box does not affect the line to line
    1.75 -   spacing. It is however the responsibility of the style author to avoid
    1.76 -   ‘<code class=property>bleeding</code>’ effects between the ruby text
    1.77 -   and the surrounding text of images.
    1.78 +  <p>When there is not enough space for an entire <a
    1.79 +   href="#ruby-container-box"><i>ruby container</i></a> to fit on the line,
    1.80 +   the ruby may be broken wherever all levels allow a break. In typical
    1.81 +   cases, line breaks are forbidden within each <a
    1.82 +   href="#ruby-base-box"><i>ruby base</i></a> and <a
    1.83 +   href="#ruby-annotation-box"><i>ruby annotation</i></a>, so the <a
    1.84 +   href="#ruby-container-box"><i>ruby container</i></a> can only break
    1.85 +   between adjacent <a href="#ruby-base-box"><i>ruby bases</i></a>, and only
    1.86 +   if no <a href="#ruby-annotation-box"><i>ruby annotations</i></a> span
    1.87 +   those <a href="#ruby-base-box"><i>ruby bases</i></a>. Whenever ruby breaks
    1.88 +   across lines, <a href="#ruby-annotation-box"><i>ruby annotations</i></a>
    1.89 +   <em>must stay with their respective bases. </em>
    1.90  
    1.91    <div class=figure>
    1.92 -   <p> <img alt="Diagram showing the ruby text using 2 half leading"
    1.93 -    class=example height=138 src="images/rlh-a.gif" width=210>
    1.94 +   <p><img
    1.95 +    alt="Diagram showing the line breaking opportunity in a complex ruby"
    1.96 +    src="images/r-break-a.gif">
    1.97  
    1.98 -   <p><b>Figure 3.3.1</b>: Excluded Ruby text
    1.99 +   <p class=caption>Ruby line breaking opportunity
   1.100    </div>
   1.101  
   1.102 -  <p>In the following figure, the line boxes have no extra leading space. The
   1.103 -   ‘<code class=property>line-stacking-ruby</code>’ property is set to
   1.104 -   ‘<code class=property>include-ruby</code>’ and the ‘<code
   1.105 -   class=property>line-stacking-strategy</code>’ property is set to a value
   1.106 -   where inline boxes are considered for line stacking. In this case, the
   1.107 -   line box with the ruby text is affected and has its ‘<code
   1.108 -   class=property>stack-height</code>’ increased by the amount necessary to
   1.109 -   fit the ruby text.
   1.110 +  <p>Whether ruby can break between two adjacent <a
   1.111 +   href="#ruby-base-box"><i>ruby bases</i></a> is controlled by normal
   1.112 +   line-breaking rules for the affected text, exactly as if the <a
   1.113 +   href="#ruby-base-box"><i>ruby bases</i></a> were regular <i>inline</i>
   1.114 +   boxes.
   1.115  
   1.116 -  <div class=figure>
   1.117 -   <p> <img alt="Diagram showing the ruby text expanding above base text"
   1.118 -    class=example height=111 src="images/rlh-b.gif" width=210>
   1.119 -
   1.120 -   <p><b>Figure 3.3.2</b>: Ruby text increasing line height
   1.121 +  <div class=example>
   1.122 +   <p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
   1.123 +    the line may break between them, because lines are normally allowed to
   1.124 +    break between two Han characters. However, if ‘<code
   1.125 +    class=property>word-break</code>’ is ‘<code
   1.126 +    class=css>keep-all</code>’, that line break is forbidden.
   1.127    </div>
   1.128  
   1.129 -  <p>This mechanism allows rendering of evenly spaced lines of text within a
   1.130 -   block-level element, whether a line contains ruby or not. The authors need
   1.131 -   only to set for the block-level element a line height value larger than
   1.132 -   the computed line-height of the largest ruby element within the block.
   1.133 +  <p>Inter-base white space is significant for evaluating line break
   1.134 +   opportunities between <a href="#ruby-base-box"><i>ruby bases</i></a>. As
   1.135 +   with white space between inlines, it collapses when the line breaks there.
   1.136  
   1.137 -  <h3 id=ruby-line-breaking><span class=secno>2.7. </span> Ruby box and line
   1.138 -   breaking</h3>
   1.139 +  <div class=example>
   1.140 +   <p>For example, given the following markup:
   1.141  
   1.142 -  <p>When a ruby falls at the end of a line where there is not sufficient
   1.143 -   room for the entire ruby to fit on the line, the complex ruby may be
   1.144 -   broken at locations where boxes of the ruby container align. Some examples
   1.145 -   are provided below to provide more clarity.
   1.146 +   <pre>&lt;ruby>&lt;rb>one&lt;/rb> &lt;rb>two&lt;/rb> &lt;rt>1&lt;/rt> &lt;rt>2&lt;/rt>&lt;/ruby></pre>
   1.147  
   1.148 -  <p> <img
   1.149 -   alt="Diagram showing the line breaking opportunity in a complex ruby"
   1.150 -   class=example height=201 src="images/r-break-a.gif" width=408>
   1.151 +   <p>Due to the space, the line may break between “one” and “two“.
   1.152 +    If the line breaks there, that space disappears, in accordance with
   1.153 +    standard CSS white space processing rules. [[CSS3-TEXT]]
   1.154 +  </div>
   1.155  
   1.156 -  <p><b>Figure 3.4.1</b>: Complex ruby line breaking opportunity
   1.157 +  <p>The line <em>must not</em> break between a <a
   1.158 +   href="#ruby-base-box"><i>ruby base</i></a> and its annotations.
   1.159  
   1.160 -  <p> <img
   1.161 +  <div class=figure> <img
   1.162     alt="Diagram showing the line breaking opportunity in a &#34;Bopomofo&#34; ruby"
   1.163 -   class=example height=90 src="images/r-break-b.gif" width=300>
   1.164 +   src="images/r-break-b.gif">
   1.165 +   <p class=caption>‘<code class=css>inter-character</code>’ ruby line
   1.166 +    breaking opportunity
   1.167 +  </div>
   1.168 +  <!-- <h3 id="ruby-line-height">
   1.169 +Ruby box and line stacking</h3>
   1.170  
   1.171 -  <p><b>Figure 3.4.1</b>: "Bopomofo" ruby line breaking opportunity
   1.172 +<div class="figure">
   1.173 +<p>
   1.174 +<img class="example" 
   1.175 +alt="Diagram showing the ruby text using 2 half leading"
   1.176 +src="images/rlh-a.gif" width="210" height="138" /></p>
   1.177  
   1.178 -  <p class=issue><span class=issuehead>Issue: </span> Line breaks should
   1.179 -   only be allowed within ruby if the ruby base text can be broken at that
   1.180 -   point. E.g. if complex Ruby is used to annotate the two morphemes of
   1.181 -   &quot;butterfly&quot;, the fact that we have added ruby annotations should
   1.182 -   not cause a line breaking opportunity to be present between
   1.183 -   &quot;butter&quot; and &quot;fly&quot;
   1.184 +<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
   1.185 +</div>
   1.186 +-->
   1.187  
   1.188    <h2 id=ruby-props><span class=secno>3. </span> Ruby Properties</h2>
   1.189  
     2.1 --- a/css-ruby/Overview.src.html	Thu Jun 20 17:36:13 2013 -0700
     2.2 +++ b/css-ruby/Overview.src.html	Fri Jun 21 16:19:24 2013 -0700
     2.3 @@ -381,34 +381,56 @@
     2.4  
     2.5  	<p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5.
     2.6  
     2.7 -<h3 id="box-model">
     2.8 -Generating Ruby Structure</h3>
     2.9 +<h3 id="ruby-line-breaking">
    2.10 +Ruby box and line breaking</h3>
    2.11  
    2.12 -	<p>
    2.13 +	<p>When there is not enough space for an entire <i>ruby container</i> to fit on the line,
    2.14 +	the ruby may be broken wherever all levels allow a break.
    2.15 +	In typical cases, line breaks are forbidden within each <i>ruby base</i> and <i>ruby annotation</i>,
    2.16 +	so the <i>ruby container</i> can only break between adjacent <i>ruby bases</i>,
    2.17 +	and only if no <i>ruby annotations</i> span those <i>ruby bases</i>.
    2.18 +	Whenever ruby breaks across lines, <i>ruby annotations</i>
    2.19 +	<em>must</i> stay with their respective bases.
    2.20  
    2.21 -<h3 id="box-model">
    2.22 -Ruby box model</h3>
    2.23 +	<div class="figure">
    2.24 +		<p><img src="images/r-break-a.gif"
    2.25 +		     alt="Diagram showing the line breaking opportunity in a complex ruby">
    2.26 +		<p class="caption">Ruby line breaking opportunity
    2.27 +	</div>
    2.28  
    2.29 -<h3 id="ruby-line-height">
    2.30 +	<p>Whether ruby can break between two adjacent <i>ruby bases</i>
    2.31 +	is controlled by normal line-breaking rules for the affected text,
    2.32 +	exactly as if the <i>ruby bases</i> were regular <i>inline</i> boxes.
    2.33 +
    2.34 +	<div class="example">
    2.35 +		<p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
    2.36 +		the line may break between them,
    2.37 +		because lines are normally allowed to break between two Han characters.
    2.38 +		However, if 'word-break' is ''keep-all'', that line break is forbidden.
    2.39 +	</div>
    2.40 +
    2.41 +	<p>Inter-base white space is significant for evaluating line break opportunities between <i>ruby bases</i>.
    2.42 +	As with white space between inlines, it collapses when the line breaks there.
    2.43 +
    2.44 +	<div class="example">
    2.45 +		<p>For example, given the following markup:
    2.46 +		<pre>&lt;ruby>&lt;rb>one&lt;/rb> &lt;rb>two&lt;/rb> &lt;rt>1&lt;/rt> &lt;rt>2&lt;/rt>&lt;/ruby></pre>
    2.47 +		<p>Due to the space, the line may break between “one” and “two“.
    2.48 +		If the line breaks there, that space disappears,
    2.49 +		in accordance with standard CSS white space processing rules. [[CSS3-TEXT]]
    2.50 +	</div>
    2.51 +
    2.52 +	<p>The line <em>must not</em> break between a <i>ruby base</i> and its annotations.
    2.53 +
    2.54 +	<div class="figure">
    2.55 +		<img src="images/r-break-b.gif"
    2.56 +		     alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'>
    2.57 +		<p class="caption">''inter-character'' ruby line breaking opportunity
    2.58 +	</div>
    2.59 +
    2.60 +<!-- <h3 id="ruby-line-height">
    2.61  Ruby box and line stacking</h3>
    2.62  
    2.63 -<p>The interaction of the ruby box and line stacking is controlled by the 
    2.64 -'line-stacking-ruby' property described in the CSS3 Line Module. That property 
    2.65 -takes two values: 'include-ruby' and 'exclude-ruby. Depending on the property 
    2.66 -value, the ruby box is considered or excluded for line stacking. Even if the 
    2.67 -ruby box is considered for line stacking, some values of the 
    2.68 -'line-stacking-strategy' property (also described in the CSS3 Line module) can 
    2.69 -still create occurrences where a the ruby box will eventually be ignored (e.g. 
    2.70 -case where the 'line-stacking-strategy' value is 'block-line-height').</p>
    2.71 -
    2.72 -<p>In the following figure, each line box is shown with leading space 
    2.73 -distributed before and after the two text segments ('Previous line' and 'Ruby 
    2.74 -base'); the dotted lines show the line box for each line. The 
    2.75 -'line-stacking-ruby' property is set to 'exclude-ruby'. The achieved effect is 
    2.76 -that the ruby box does not affect the line to line spacing. It is however the 
    2.77 -responsibility of the style author to avoid 'bleeding' effects between the ruby 
    2.78 -text and the surrounding text of images.</p>
    2.79 -
    2.80  <div class="figure">
    2.81  <p>
    2.82  <img class="example" 
    2.83 @@ -417,47 +439,8 @@
    2.84  
    2.85  <p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
    2.86  </div>
    2.87 +-->
    2.88  
    2.89 -
    2.90 -<p>In the following figure, the line boxes have no extra leading space. The 
    2.91 -'line-stacking-ruby' property is set to 'include-ruby' and the 
    2.92 -'line-stacking-strategy' property is set to a value where inline boxes are 
    2.93 -considered for line stacking. In this case, the line box with 
    2.94 -the ruby text is affected and has its 'stack-height' increased by the amount 
    2.95 -necessary to fit the ruby text.</p>
    2.96 -
    2.97 -<div class="figure">
    2.98 -<p>
    2.99 -<img class="example" 
   2.100 -alt="Diagram showing the ruby text expanding above base text"
   2.101 -src="images/rlh-b.gif" width="210" height="111" /></p>
   2.102 -
   2.103 -<p><b>Figure 3.3.2</b>: Ruby text increasing line height</p>
   2.104 -</div>
   2.105 -<p>This mechanism allows rendering of evenly spaced lines of text within a
   2.106 -block-level element, whether a line contains ruby or not. The authors need
   2.107 -only to set for the block-level element a line height value larger than the
   2.108 -computed line-height of the largest ruby element within the block.</p>
   2.109 -
   2.110 -<h3 id="ruby-line-breaking">
   2.111 -Ruby box and line breaking</h3>
   2.112 -
   2.113 -<p>When a ruby falls at the end of a line where there is not sufficient room for the entire ruby to fit on the line, the complex ruby may be broken at locations where boxes of the ruby container align. Some examples are provided below to provide more clarity.</p>
   2.114 -
   2.115 -<p>
   2.116 -<img class="example" 
   2.117 -alt="Diagram showing the line breaking opportunity in a complex ruby"
   2.118 -src="images/r-break-a.gif" width="408" height="201" /></p>
   2.119 -
   2.120 -<p><b>Figure 3.4.1</b>: Complex ruby line breaking opportunity</p>
   2.121 -
   2.122 -<p>
   2.123 -<img class="example" 
   2.124 -alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'
   2.125 -src="images/r-break-b.gif" width="300" height="90" /></p>
   2.126 -
   2.127 -<p><b>Figure 3.4.1</b>: "Bopomofo" ruby line breaking opportunity</p>
   2.128 -<p class="issue"><span class="issuehead">Issue:&nbsp;</span> Line breaks should only be allowed within ruby if the ruby base text can be broken at that point. E.g. if complex Ruby is used to annotate the two morphemes of &quot;butterfly&quot;, the fact that we have added ruby annotations should not cause a line breaking opportunity to be present between &quot;butter&quot; and &quot;fly&quot; </p>
   2.129  <h2 id="ruby-props">
   2.130  Ruby Properties</h2>
   2.131  
     3.1 Binary file css-ruby/images/r-break-a.gif has changed

mercurial