Mon, 24 Jun 2013 18:46:01 -0700
[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 <!-- --> <rt>とう</rt><rt>きょう</rt> 1.26 <!-- --></ruby></pre> 1.27 1.28 - <p>However, this markup will: <!-- --><ruby> <!-- --> 1.29 - <rb>東</rb> <rb>京</rb> <!-- --> <rt>とう</rt> 1.30 - <rt>きょう</rt> <!-- --></ruby> 1.31 + <p>However, this markup will: 1.32 + 1.33 + <pre> 1.34 +<!-- --><ruby> 1.35 +<!-- --> <rb>東</rb> <rb>京</rb> 1.36 +<!-- --> <rt>とう</rt> <rt>きょう</rt> 1.37 +<!-- --></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 <!-- --> <rt>とう</rt><rt>きょう</rt> 2.16 <!-- --></ruby></pre> 2.17 <p>However, this markup will: 2.18 + <pre> 2.19 <!-- --><ruby> 2.20 <!-- --> <rb>東</rb> <rb>京</rb> 2.21 <!-- --> <rt>とう</rt> <rt>きょう</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§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>