1.1 --- a/css-ruby/Overview.src.html Mon Jun 24 17:43:42 2013 -0700
1.2 +++ b/css-ruby/Overview.src.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 @@ -453,6 +452,7 @@
1.15 <!-- --> <rt>とう</rt><rt>きょう</rt>
1.16 <!-- --></ruby></pre>
1.17 <p>However, this markup will:
1.18 + <pre>
1.19 <!-- --><ruby>
1.20 <!-- --> <rb>東</rb> <rb>京</rb>
1.21 <!-- --> <rt>とう</rt> <rt>きょう</rt>
1.22 @@ -532,18 +532,59 @@
1.23 <p class="caption">''inter-character'' ruby line breaking opportunity
1.24 </div>
1.25
1.26 -<!-- <h3 id="ruby-line-height">
1.27 +<h3 id="line-height">
1.28 Ruby box and line stacking</h3>
1.29
1.30 -<div class="figure">
1.31 -<p>
1.32 -<img class="example"
1.33 -alt="Diagram showing the ruby text using 2 half leading"
1.34 -src="images/rlh-a.gif" width="210" height="138" /></p>
1.35 + <p>The 'line-height' property controls spacing between lines in CSS.
1.36 + When inline content on line is shorter than the 'line-height',
1.37 + half-leading is added on either side of the content,
1.38 + as specificed in <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1§10.8</a>. [[!CSS21]]
1.39
1.40 -<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
1.41 -</div>
1.42 --->
1.43 + <p>In order to ensure consistent spacing of lines,
1.44 + documents with ruby typically ensure that the 'line-height' is large enough
1.45 + to accommodate ruby between lines of text.
1.46 + Therefore, ordinarily, <i>ruby annotation containers</i> and <i>ruby annotation boxes</i>
1.47 + do not contribute to the measured height of a line's inline contents;
1.48 + any alignment (see 'vertical-align') and line-height calculations
1.49 + are performed using only the <i>ruby base container</i>,
1.50 + exactly as if it were a normal inline.
1.51 +
1.52 + <p>However, if the 'line-height' specified on the <i>ruby container</i>
1.53 + is less than the distance between
1.54 + the top of the top <i>ruby annotation container</i>
1.55 + and the bottom of the bottom <i>ruby annotation container</i>,
1.56 + then additional leading is added
1.57 + on the appropriate side of the <i>ruby base container</i>
1.58 + such that if a block consisted of three lines
1.59 + each containing ruby identical to this,
1.60 + none of the <i>ruby containers</i> would overlap.
1.61 +
1.62 + <p class="note">Note that this does not ensure that the <i>ruby annotations</i> remain within the line box.
1.63 + It merely ensures that <em>if all lines had equal spacing</em>
1.64 + and equivalent amounts and positioning of <i>ruby annotations</i>,
1.65 + there would be enough room to avoid overlap.
1.66 +
1.67 + <p>Authors should ensure appropriate 'line-height' and 'padding' to accommodate ruby,
1.68 + and be particularly careful at the beginning or end of a block
1.69 + and when a line contains inline-level content
1.70 + (such as images, inline blocks, or elements shifted with 'vertical-align')
1.71 + taller than the paragraph's default font size.
1.72 +
1.73 + <div class="figure">
1.74 + <p><img src="images/rlh-a.gif"
1.75 + alt="The content of each line sits in the middle of its line height;
1.76 + the additional space on each side is called half-leading.
1.77 + Ruby fits between lines if it is smaller than twice the half-leading,
1.78 + but this means that it occupies space belonging to the half-leading of the previous line.">
1.79 + <p class="caption">Ruby annotations will often overflow the line;
1.80 + authors should ensure content over/under a ruby-annotated line
1.81 + is adequately spaced to leave room for the ruby.
1.82 + </div>
1.83 +
1.84 + <p class="note">More control over how ruby affects alignment and line layout
1.85 + will be part of the CSS Line Layout Module Level 3.
1.86 + Note, it is currently in the process of being rewritten;
1.87 + the current drafts should not be relied upon.
1.88
1.89 <h2 id="ruby-props">
1.90 Ruby Properties</h2>
