[css2] Added an illustration of line box formation, commented out for now.

bert-github · bert-github · commit 2da285aff6fc · 2009-08-31T17:36:35.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%402959
diff --git a/css2/visudet.src b/css2/visudet.src
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html lang="en">
-<!-- $Id: visudet.src,v 2.137 2009-08-06 19:22:15 bbos Exp $ -->
+<!-- $Id: visudet.src,v 2.138 2009-08-31 17:36:35 bbos Exp $ -->
 <head>
 <title>Visual formatting model details</title>
 <style type="text/css">
@@ -1304,6 +1304,46 @@ increased to be that minimal height.</li>
 still have margins, padding, borders and a line height, and thus
 influence these calculations just like elements with content.
 </p>
+
+<!--
+<div class=example>
+<p>For example, a block element with two inline children like this
+
+<pre>&lt;p&gt;&lt;span&gt;Fjord&lt;/span&gt; &lt;sup&gt;super&lt;/sup&gt;</pre>
+
+<p>may consist of one line box whose height is calculated as shown in
+the figure:
+
+<div class=figure>
+<p><img src="images/linebox.png" alt="(diagram)" style="max-width: 100%">
+<p>A line box. See explanation in text.
+</div>
+
+<p>The font and the 'line-height' property of the P determine the
+minimum height of the line box: (1) = ascender of P's first available
+font; (2) = descender of that font; (3) P's 'line-height' value. (As
+explained in 10.6, CSS2 also allows a UA to use another measure of the font
+instead of the ascender and descender. In that case (1) + (2) is
+likely to be bigger than 1em.) The solid red parts are the half-leading.
+
+<p>Each glyph in the line box is placed relative to the line box's
+baseline. Those in the SPAN have a 'vertical-align' value of
+'baseline' and are thus placed on that baseline: (4) = the SPAN's
+'line-height' value; (5) = the ascender of the letters in the SPAN;
+(6) = their descender.
+
+<p>The SUP element has a non-zero 'vertical-align' (b) and thus all
+letters and the half-leading at the top and bottom are shifted up to
+a new baseline position: (7) = ascender of glyphs in SUP; (8) =
+descender; (9) is 'line-height' of the SUP element.
+
+<p>The resulting line box (the grey box in the diagram) is tall enough
+to enclose the tops and bottoms of all the contents. In this case, its
+height (b) is larger than the line height of any individual part of
+the line box.
+</div>
+-->
+
 <h3><a name="leading">Leading and half-leading</a></h3>
 
 <p>Since the value of <span
