[css-ruby] Define some kind of sensibledefault line-stacking behavior

Mon, 24 Jun 2013 18:46:01 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Mon, 24 Jun 2013 18:46:01 -0700
changeset 8548
0532b1e2bf07
parent 8547
04b962156bd3
child 8549
e76dc8c8b061

[css-ruby] Define some kind of sensibledefault line-stacking behavior

css-ruby/Overview.html file | annotate | diff | comparison | revisions
css-ruby/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/css-ruby/Overview.html	Mon Jun 24 17:43:42 2013 -0700
     1.2 +++ b/css-ruby/Overview.html	Mon Jun 24 18:46:01 2013 -0700
     1.3 @@ -1,9 +1,8 @@
     1.4  <!--
     1.5  
     1.6  Issues:
     1.7 -	white space
     1.8 -	line breaking
     1.9  	bidi
    1.10 +	line-stacking
    1.11  
    1.12  Redo all examples with consistent font. (M+ 2p?)
    1.13  
    1.14 @@ -214,6 +213,9 @@
    1.15  
    1.16       <li><a href="#line-breaking"><span class=secno>2.6. </span> Ruby box and
    1.17        line breaking</a>
    1.18 +
    1.19 +     <li><a href="#line-height"><span class=secno>2.7. </span> Ruby box and
    1.20 +      line stacking</a>
    1.21      </ul>
    1.22  
    1.23     <li><a href="#ruby-props"><span class=secno>3. </span> Ruby Properties</a>
    1.24 @@ -737,9 +739,13 @@
    1.25  <!--		-->  &lt;rt>とう&lt;/rt>&lt;rt>きょう&lt;/rt>
    1.26  <!--		-->&lt;/ruby></pre>
    1.27  
    1.28 -   <p>However, this markup will: <!--		-->&lt;ruby> <!--		-->
    1.29 -    &lt;rb>東&lt;/rb> &lt;rb>京&lt;/rb> <!--		--> &lt;rt>とう&lt;/rt>
    1.30 -    &lt;rt>きょう&lt;/rt> <!--		-->&lt;/ruby>
    1.31 +   <p>However, this markup will:
    1.32 +
    1.33 +   <pre>
    1.34 +<!--		-->&lt;ruby>
    1.35 +<!--		-->  &lt;rb>東&lt;/rb>	&lt;rb>京&lt;/rb>
    1.36 +<!--		-->  &lt;rt>とう&lt;/rt>	&lt;rt>きょう&lt;/rt>
    1.37 +<!--		-->&lt;/ruby></pre>
    1.38    </div>
    1.39  
    1.40    <p>Any preserved white space is then wrapped in an anonymous box belonging
    1.41 @@ -835,18 +841,69 @@
    1.42     <p class=caption>‘<code class=css>inter-character</code>’ ruby line
    1.43      breaking opportunity
    1.44    </div>
    1.45 -  <!-- <h3 id="ruby-line-height">
    1.46 -Ruby box and line stacking</h3>
    1.47 -
    1.48 -<div class="figure">
    1.49 -<p>
    1.50 -<img class="example" 
    1.51 -alt="Diagram showing the ruby text using 2 half leading"
    1.52 -src="images/rlh-a.gif" width="210" height="138" /></p>
    1.53 -
    1.54 -<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
    1.55 -</div>
    1.56 --->
    1.57 +
    1.58 +  <h3 id=line-height><span class=secno>2.7. </span> Ruby box and line
    1.59 +   stacking</h3>
    1.60 +
    1.61 +  <p>The ‘<code class=property>line-height</code>’ property controls
    1.62 +   spacing between lines in CSS. When inline content on line is shorter than
    1.63 +   the ‘<code class=property>line-height</code>’, half-leading is added
    1.64 +   on either side of the content, as specificed in <a
    1.65 +   href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1§10.8</a>.
    1.66 +   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
    1.67 +
    1.68 +  <p>In order to ensure consistent spacing of lines, documents with ruby
    1.69 +   typically ensure that the ‘<code class=property>line-height</code>’ is
    1.70 +   large enough to accommodate ruby between lines of text. Therefore,
    1.71 +   ordinarily, <a href="#ruby-annotation-container-box"><i>ruby annotation
    1.72 +   containers</i></a> and <a href="#ruby-annotation-box"><i>ruby annotation
    1.73 +   boxes</i></a> do not contribute to the measured height of a line's inline
    1.74 +   contents; any alignment (see ‘<code
    1.75 +   class=property>vertical-align</code>’) and line-height calculations are
    1.76 +   performed using only the <a href="#ruby-base-container-box"><i>ruby base
    1.77 +   container</i></a>, exactly as if it were a normal inline.
    1.78 +
    1.79 +  <p>However, if the ‘<code class=property>line-height</code>’ specified
    1.80 +   on the <a href="#ruby-container-box"><i>ruby container</i></a> is less
    1.81 +   than the distance between the top of the top <a
    1.82 +   href="#ruby-annotation-container-box"><i>ruby annotation container</i></a>
    1.83 +   and the bottom of the bottom <a
    1.84 +   href="#ruby-annotation-container-box"><i>ruby annotation
    1.85 +   container</i></a>, then additional leading is added on the appropriate
    1.86 +   side of the <a href="#ruby-base-container-box"><i>ruby base
    1.87 +   container</i></a> such that if a block consisted of three lines each
    1.88 +   containing ruby identical to this, none of the <a
    1.89 +   href="#ruby-container-box"><i>ruby containers</i></a> would overlap.
    1.90 +
    1.91 +  <p class=note>Note that this does not ensure that the <a
    1.92 +   href="#ruby-annotation-box"><i>ruby annotations</i></a> remain within the
    1.93 +   line box. It merely ensures that <em>if all lines had equal spacing</em>
    1.94 +   and equivalent amounts and positioning of <a
    1.95 +   href="#ruby-annotation-box"><i>ruby annotations</i></a>, there would be
    1.96 +   enough room to avoid overlap.
    1.97 +
    1.98 +  <p>Authors should ensure appropriate ‘<code
    1.99 +   class=property>line-height</code>’ and ‘<code
   1.100 +   class=property>padding</code>’ to accommodate ruby, and be particularly
   1.101 +   careful at the beginning or end of a block and when a line contains
   1.102 +   inline-level content (such as images, inline blocks, or elements shifted
   1.103 +   with ‘<code class=property>vertical-align</code>’) taller than the
   1.104 +   paragraph's default font size.
   1.105 +
   1.106 +  <div class=figure>
   1.107 +   <p><img
   1.108 +    alt="The content of each line sits in the middle of its line height; 		             the additional space on each side is called half-leading. 		             Ruby fits between lines if it is smaller than twice the half-leading, 		             but this means that it occupies space belonging to the half-leading of the previous line."
   1.109 +    src="images/rlh-a.gif">
   1.110 +
   1.111 +   <p class=caption>Ruby annotations will often overflow the line; authors
   1.112 +    should ensure content over/under a ruby-annotated line is adequately
   1.113 +    spaced to leave room for the ruby.
   1.114 +  </div>
   1.115 +
   1.116 +  <p class=note>More control over how ruby affects alignment and line layout
   1.117 +   will be part of the CSS Line Layout Module Level 3. Note, it is currently
   1.118 +   in the process of being rewritten; the current drafts should not be relied
   1.119 +   upon.
   1.120  
   1.121    <h2 id=ruby-props><span class=secno>3. </span> Ruby Properties</h2>
   1.122  
     2.1 --- a/css-ruby/Overview.src.html	Mon Jun 24 17:43:42 2013 -0700
     2.2 +++ b/css-ruby/Overview.src.html	Mon Jun 24 18:46:01 2013 -0700
     2.3 @@ -1,9 +1,8 @@
     2.4  <!--
     2.5  
     2.6  Issues:
     2.7 -	white space
     2.8 -	line breaking
     2.9  	bidi
    2.10 +	line-stacking
    2.11  
    2.12  Redo all examples with consistent font. (M+ 2p?)
    2.13  
    2.14 @@ -453,6 +452,7 @@
    2.15  <!--		-->  &lt;rt>とう&lt;/rt>&lt;rt>きょう&lt;/rt>
    2.16  <!--		-->&lt;/ruby></pre>
    2.17  		<p>However, this markup will:
    2.18 +		<pre>
    2.19  <!--		-->&lt;ruby>
    2.20  <!--		-->  &lt;rb>東&lt;/rb>	&lt;rb>京&lt;/rb>
    2.21  <!--		-->  &lt;rt>とう&lt;/rt>	&lt;rt>きょう&lt;/rt>
    2.22 @@ -532,18 +532,59 @@
    2.23  		<p class="caption">''inter-character'' ruby line breaking opportunity
    2.24  	</div>
    2.25  
    2.26 -<!-- <h3 id="ruby-line-height">
    2.27 +<h3 id="line-height">
    2.28  Ruby box and line stacking</h3>
    2.29  
    2.30 -<div class="figure">
    2.31 -<p>
    2.32 -<img class="example" 
    2.33 -alt="Diagram showing the ruby text using 2 half leading"
    2.34 -src="images/rlh-a.gif" width="210" height="138" /></p>
    2.35 +	<p>The 'line-height' property controls spacing between lines in CSS.
    2.36 +	When inline content on line is shorter than the 'line-height',
    2.37 +	half-leading is added on either side of the content,
    2.38 +	as specificed in <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1&sect;10.8</a>. [[!CSS21]]
    2.39  
    2.40 -<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
    2.41 -</div>
    2.42 --->
    2.43 +	<p>In order to ensure consistent spacing of lines,
    2.44 +	documents with ruby typically ensure that the 'line-height' is large enough
    2.45 +	to accommodate ruby between lines of text.
    2.46 +	Therefore, ordinarily, <i>ruby annotation containers</i> and <i>ruby annotation boxes</i>
    2.47 +	do not contribute to the measured height of a line's inline contents;
    2.48 +	any alignment (see 'vertical-align') and line-height calculations
    2.49 +	are performed using only the <i>ruby base container</i>,
    2.50 +	exactly as if it were a normal inline.
    2.51 +
    2.52 +	<p>However, if the 'line-height' specified on the <i>ruby container</i>
    2.53 +	is less than the distance between
    2.54 +	the top of the top <i>ruby annotation container</i>
    2.55 +	and the bottom of the bottom <i>ruby annotation container</i>,
    2.56 +	then additional leading is added
    2.57 +	on the appropriate side of the <i>ruby base container</i>
    2.58 +	such that if a block consisted of three lines
    2.59 +	each containing ruby identical to this,
    2.60 +	none of the <i>ruby containers</i> would overlap.
    2.61 +
    2.62 +	<p class="note">Note that this does not ensure that the <i>ruby annotations</i> remain within the line box.
    2.63 +	It merely ensures that <em>if all lines had equal spacing</em>
    2.64 +	and equivalent amounts and positioning of <i>ruby annotations</i>,
    2.65 +	there would be enough room to avoid overlap.
    2.66 +
    2.67 +	<p>Authors should ensure appropriate 'line-height' and 'padding' to accommodate ruby,
    2.68 +	and be particularly careful at the beginning or end of a block
    2.69 +	and when a line contains inline-level content
    2.70 +	(such as images, inline blocks, or elements shifted with 'vertical-align')
    2.71 +	taller than the paragraph's default font size.
    2.72 +
    2.73 +	<div class="figure">
    2.74 +		<p><img src="images/rlh-a.gif"
    2.75 +		        alt="The content of each line sits in the middle of its line height;
    2.76 +		             the additional space on each side is called half-leading.
    2.77 +		             Ruby fits between lines if it is smaller than twice the half-leading,
    2.78 +		             but this means that it occupies space belonging to the half-leading of the previous line.">
    2.79 +		<p class="caption">Ruby annotations will often overflow the line;
    2.80 +		authors should ensure content over/under a ruby-annotated line
    2.81 +		is adequately spaced to leave room for the ruby.
    2.82 +	</div>
    2.83 +
    2.84 +	<p class="note">More control over how ruby affects alignment and line layout
    2.85 +	will be part of the CSS Line Layout Module Level 3.
    2.86 +	Note, it is currently in the process of being rewritten;
    2.87 +	the current drafts should not be relied upon.
    2.88  
    2.89  <h2 id="ruby-props">
    2.90  Ruby Properties</h2>

mercurial