Used foot instead of tail (as in css3-writing-modes). Nicer table for meaining of head/foot, with images

Author: bert-github

css3-box/Overview.src.html

@@ -12,17 +12,22 @@
 <meta content="text/html; charset=utf-8" http-equiv=content-type>
 <title>CSS basic box model</title>
 
+<link href="../default.css" rel="stylesheet"
+  title="Default" type="text/css">
 <style type="text/css">
   ol.stack p {margin-top: 0}
   img.small {max-width: 100%}
+  .equiv-table tr {vertical-align: baseline}
+  .equiv-table img {max-width: 12em; max-width: 100%}
+  .minidiagram {height: 5em; vertical-align: middle}
+  /* Undo the max-width in the 2012 style for editor's drafts: */
+  body {max-width: none}
 </style>
+<link href="http://www.w3.org/StyleSheets/TR/W3C-MO.css" rel="stylesheet"
+  title="Default" type="text/css">
 
 <link rel=contents href="#contents">
 <link rel=index href="#index">
-<link href="../default.css" rel="stylesheet"
-  title="Default" type="text/css">
-<link href="http://www.w3.org/StyleSheets/TR/W3C-MO.css" rel="stylesheet"
-  title="Default" type="text/css">
 
 
 
@@ -388,7 +393,7 @@ <h2>Introduction &amp; definitions</h2>
 <p>Note that there are theoretically eight possible orientations for
 text, but CSS only defines six:
 
-      <table class=equiv-table>
+      <table class=equiv-table style="table-layout: fixed; width: 100%">
 	<thead>
 	  <tr>
 	    <th>
@@ -422,8 +427,8 @@ <h2>Introduction &amp; definitions</h2>
 		alt="">
 	    <td>
 	      <p>Text is written bottom to top and paragraphs grow to
-		the right <p><img class=small src="vertical-lr-rtl.png"
-		alt="">
+		the right <p><img class=small
+		src="vertical-lr-rtl.png" alt="">
       </table>
 
 <p>There is no “horizontal-bt.” More information about 'writing-mode'
@@ -448,25 +453,39 @@ <h2>Introduction &amp; definitions</h2>
     <table class=equiv-table>
       <thead>
 	<tr>
-	  <th>Value of 'writing-mode'
-	  <th>Value of 'direction'
-	  <th>Meaning of “head”
-	  <th>Meaning of “end”
-	  <th>Meaning of “foot”
-	  <th>Meaning of “start”
+	  <th rowspan=2>Value of<br>'writing-mode'
+	  <th rowspan=2>Value of<br>'direction'
+	  <th colspan=4>Meaning of…
+          <th rowspan=2>
+	<tr>
+	  <th>“head”
+	  <th>“end”
+	  <th>“foot”
+	  <th>“start”
       <tbody>
-	<tr><th rowspan=2>''horizontal-tb'' <th>''ltr''
-	    <td>top <td>right <td>bottom <td>left
-	<tr><!-- horizontal-tb --><th>''rtl''
-	    <td>top <td>left <td>bottom <td>right
-	<tr><th rowspan=2>''vertical-rl'' <th>''ltr''
-	    <td>right <td>bottom <td>left <td>top
-	<tr><!-- vertical-rl'' --><th>''rtl''
-	    <td>right <td>top <td>left <td>bottom
-	<tr><th rowspan=2>''vertical-lr'' <th>''rtl''
-	    <td>left <td>bottom <td>right <td>top
-	<tr><!-- vertical-lr --><th>''ltr''
-	    <td>left <td>top <td>right <td>bottom
+	<tr><th rowspan=2>''horizontal-tb'' <th>''ltr'' <td>top
+	  <td>right <td>bottom <td>left <td><img class=minidiagram
+	  src="box-tb-ltr.svg" alt="">
+
+	<tr><!-- horizontal-tb --><th>''rtl'' <td>top <td>left
+	  <td>bottom <td>right <td><img class=minidiagram
+	  src="box-tb-rtl.svg" alt="">
+
+	<tr><th rowspan=2>''vertical-rl'' <th>''ltr'' <td>right
+	  <td>bottom <td>left <td>top <td><img class=minidiagram
+	  src="box-rl-ltr.svg" alt="">
+
+	<tr><!-- vertical-rl'' --><th>''rtl'' <td>right <td>top
+	  <td>left <td>bottom <td><img class=minidiagram
+	  src="box-rl-rtl.svg" alt="">
+
+	<tr><th rowspan=2>''vertical-lr'' <th>''ltr'' <td>left
+	  <td>bottom <td>right <td>top <td><img class=minidiagram
+	  src="box-lr-ltr.svg" alt="">
+
+	<tr><!-- vertical-lr --><th>''rtl'' <td>left <td>top <td>right
+          <td>bottom <td><img class=minidiagram src="box-lr-rtl.svg"
+          alt="">
     </table>
 
 <p class=note>For example, the “head padding” by default refers to the
@@ -496,7 +515,7 @@ <h2>Introduction &amp; definitions</h2>
 modules.
 
 <p class=note>The block dimension of a box is thus the distance
-between the head and tail edges, while the inline dimension of the box
+between the head and foot edges, while the inline dimension of the box
 is the distance between the start and end edges.
 
 <p>When boxes are laid out in sequence to form a <em class=index
@@ -513,12 +532,14 @@ <h2>Introduction &amp; definitions</h2>
     <table class=equiv-table>
       <thead>
 	<tr>
-	  <th>'writing-mode' of <em>containing block</em>
-	  <th>'direction' of <em>containing block</em>
-	  <th>Meaning of “A”
-	  <th>Meaning of “B”
-	  <th>Meaning of “C”
-	  <th>Meaning of “D”
+	  <th rowspan=2>'writing-mode' of<br><em>containing block</em>
+	  <th rowspan=2>'direction' of<br><em>containing block</em>
+          <th colspan=4>Meaning of…
+        <tr>
+	  <th>“A”
+	  <th>“B”
+	  <th>“C”
+	  <th>“D”
       <tbody>
 	<tr><th rowspan=2>''horizontal-tb'' <th>''ltr''
 	    <td>top <td>right <td>bottom <td>left
@@ -542,7 +563,7 @@ <h2>Introduction &amp; definitions</h2>
 first paragraph is at the top edge (= head edge) of the document, the
 top (A edge) of the second paragraph is against the bottom (C edge) of
 the first paragraph, and so on, until the bottom (C edge) of the last
-paragraph becomes the bottom (tail edge) of the document.
+paragraph becomes the bottom (foot edge) of the document.
 
 
 
@@ -769,7 +790,7 @@ <h2>Flows</h2>
         is <span>collapsed through,</span> then its <span>content
         edge</span> (which is also its <span>border edge</span>
         and <span>padding edge</span>) is defined as what it would
-        have been if the box had a non-zero <span>tailside</span>
+        have been if the box had a non-zero <span>footside</span>
         border. (I.e., recompute the margins given that border and
         then apply the previous rule.)
 
@@ -2315,14 +2336,14 @@ <h3 id=collapsing-margins>Collapsing margins</h3>
 
   <li>If a <em>horizontal</em> element has a 'height' that is not
   ''auto'', or if setting its 'min-height' and 'max-height' to their
-  initial values would change its used height, then the <em>tail</em>
+  initial values would change its used height, then the <em>foot</em>
   margin of the element does not collapse with any of its children's
   margins. <span class=issue>[Check with latest CSS 2.1 if min/max
   width/height still have this effect.]</span>
 
   <li>Similarly, if a <em>vertical</em> element has a 'width' that is
   not ''auto'', or if setting its 'min-width' and 'max-width' to their
-  initial values would change the used width, then the <em>tail</em>
+  initial values would change the used width, then the <em>foot</em>
   margin of the element does not collapse with any of its children's
   margins. <span class=issue>[Check with latest CSS 2.1 if min/max
   width/height still have this effect.]</span>
@@ -2343,15 +2364,15 @@ <h3 id=collapsing-margins>Collapsing margins</h3>
     <p>A margin of a box collapses with the <em>head</em> margin of
     its parent box if those two margins are <em>adjoining.</em>
 
-  <!-- parent-child / tail -->
+  <!-- parent-child / foot -->
   <li>
-    <p>A margin of a box collapses with the <em>tail</em> margin of
+    <p>A margin of a box collapses with the <em>foot</em> margin of
     its parent box if those two margins are <em>adjoining.</em>
 
   <!-- sibling -->
   <li>
     <p>The <em>head</em> margin of a box collapses with the
-    <em>tail</em> margin of a sibling box if the two margins are
+    <em>foot</em> margin of a sibling box if the two margins are
     <em>adjoining.</em>
 
   <!-- self top-bottom -->
@@ -2378,9 +2399,9 @@ <h3 id=collapsing-margins>Collapsing margins</h3>
   same as the parent's head border edge.
 
   <li>Otherwise, either the parent is not taking part in the margin
-  collapsing, or only the parent's <em>tail</em> margin is involved. 
+  collapsing, or only the parent's <em>foot</em> margin is involved. 
   The position of A's head border edge is defined to be the same as it
-  would have been if A had a nonzero <em>tail</em> border.
+  would have been if A had a nonzero <em>foot</em> border.
 </ul>
 
   <p class=note>Note that box A itself is invisible and its position
@@ -2727,8 +2748,8 @@ <h3 id=blockwidth>Block-level, non-replaced elements
 elements in normal flow when 'overflow' does not compute to
 ''visible'' but has been propagated to the viewport.
 
-<p>The used values of the <span>head</span> padding, <span>tail</span>
-padding, <span>head</span> margin and <span>tail</span> margin are
+<p>The used values of the <span>head</span> padding, <span>foot</span>
+padding, <span>head</span> margin and <span>foot</span> margin are
 calculated from their computed values, with any ''auto'' values
 replaced by 0.
 
@@ -2749,12 +2770,12 @@ <h3 id=blockwidth>Block-level, non-replaced elements
 that doesn't have its margins <span>collapsed through.</span>
 
 <li>For the second edge: If the element is the <span>root
-element</span> or if it has a non-zero <span>tail</span> padding or a
-non-zero <span>tail</span>
-border, then the second edge is the <span>tailside</span> <em>margin
+element</span> or if it has a non-zero <span>foot</span> padding or a
+non-zero <span>foot</span>
+border, then the second edge is the <span>footside</span> <em>margin
 edge</em> of the last <span>line box</span> or <span>block-level
 box</span> (whichever comes last); otherwise the second edge is the
-<span>tailside</span> <em>border edge</em> of the last <span>line
+<span>footside</span> <em>border edge</em> of the last <span>line
 box</span> or <span>block-level box</span> (whichever comes last) that
 doesn't have its margins <span>collapsed through.</span>
 </ul>
@@ -2936,8 +2957,8 @@ <h3>Other block-level, non-replaced elements in normal flow</h3>
 elements when 'overflow' does not compute to ''visible'' (except if
 the 'overflow' property's value has been propagated to the viewport).
 
-<p>The used values of <span>head</span> padding, <span>tail</span>
-padding, <span>head</span> margin and <span>tail</span> margin are
+<p>The used values of <span>head</span> padding, <span>foot</span>
+padding, <span>head</span> margin and <span>foot</span> margin are
 calculated from the computed values, with any ''auto'' values replaced
 by 0.
 
@@ -2957,7 +2978,7 @@ <h3>Other block-level, non-replaced elements in normal flow</h3>
 <h3>'Inline-block' or floating, non-replaced
 elements</h3>
 
-<p class=issue>Not yet generalized with head, tail, etc.
+<p class=issue>Not yet generalized with head, foot, etc.
 
 <p>The used values of 'margin-left', 'margin-right', 'margin-top' and
 'margin-bottom' are derived from their computed values, except that a
@@ -3889,12 +3910,12 @@ <h2>The clear-after property</h2>
 property increases the element's padding as needed. More precisely: If
 there are any floats in the current <em>flow</em> up to and including
 the end of this element that float to the indicated side(s), then find
-the one whose <em>tailside</em> <em>margin edge</em> is furthest away
+the one whose <em>footside</em> <em>margin edge</em> is furthest away
 from the <em>head</em> <em>content edge</em> of the <em>containing
-block.</em> Then increase the tailside padding of the current element
+block.</em> Then increase the footside padding of the current element
 by the minimum amount needed so that the padding edge is at least as
 far away from the head content edge of the containing block as the
-tailside margin edge of that float.
+footside margin edge of that float.
 
 <p class=note>Note: Since a floating element is a <em>flow root,</em>
 setting 'clear-after' on such an element only
@@ -4096,14 +4117,14 @@ <h3 id=overflow>The overflow, overflow-x and overflow-y properties</h3>
     cause a <em>scrolling mechanism</em> to be provided for
     overflowing boxes.
 
-  <dt class=issue><dfn>no-display</dfn>
+  <dt><dfn>no-display</dfn>
 
     <dd class=issue>When the content doesn't fit in the content box,
     the whole box is removed, as if 'display: none' were specified. 
     [This idea is due to Till Halbach &lt;tillh@opera.com&gt;, July
     21, 2005]
 
-  <dt class=issue><dfn>no-content</dfn>
+  <dt><dfn>no-content</dfn>
 
     <dd class=issue>When the content doesn't fit in the content box,
     the whole content is hidden, as if 'visibility: hidden' were