[css3-box] Added a note

--HG--
extra : rebase_source : eb1e216f10a35648922430c757a7cf03f747b01c

Author: bert-github

css-box/Overview.src.html

@@ -801,6 +801,11 @@ <h2>Introduction &amp; definitions</h2>
 the first paragraph, and so on, until the bottom (C edge) of the last
 paragraph becomes the bottom (foot edge) of the document.
 
+<p>An element is called <dfn>orthogonal</dfn> if it either a
+<em>vertical</em> element with a <em>horizontal</em> <em>containing
+block</em> or a <em>horizontal</em> element with a <em>vertical</em>
+<em>containing block.</em> An <dfn>orthogonal flow</dfn> is a
+<em>flow</em> whose <em>flow root</em> is an orthogonal element.
 
 
 <h2>The viewport and the canvas</h2>
@@ -876,10 +881,12 @@ <h2 id=flows>Flows</h2>
   <!-- <li>The value of 'position' is 'absolute' or 'fixed' (see
   [CSS3POS]). -->
 
-  <li>The box is vertical and its parent is horizontal. <span
-  class=issue>[Add link to the relevant section.]</span>
+  <li>The box is <span>vertical</span> and its parent is
+  <span>horizontal.</span> <span class=issue>[Add link to the relevant
+  section.]</span>
 
-  <li>The box is horizontal and its parent is vertical.
+  <li>The box is <span>horizontal</span> and its parent is
+  <span>vertical.</span>
 
   <!-- <li>The value of 'transform' is not 'none'. -->
 
@@ -2964,9 +2971,111 @@ <h3 id=blockwidth>Block-level, non-replaced elements
 calculated from their computed values, with any ''auto'' values
 replaced by 0.
 
-<p>If the computed value of the <span>block flow dimension</span> is
+<div class=note>
+
+  <p>The complexity of this section comes from the fact that ''auto''
+  values on 'width' and 'height' are resolved differently for
+  <em>horizontal</em> and for <em>vertical</em> elements, and
+  differently for parallel flows then for <span>orthogonal
+  flows</span> (i.e., when the <em>containing block</em> is horizontal
+  and the element itself vertical, or vice-versa). In paginated
+  contexts, the element may further be split into boxes of unequal
+  sizes.
+
+  <p>The are three principles. The first is: If the element's size in
+  the direction of the <em title="containing block">containing
+  block's</em> <em>inline dimension</em> (i.e., between the <em>B
+  edge</em> and the <em>D edge</em>) is ''auto'', then that size is
+  the same as the containing block (minus the element's own margins,
+  padding and borders, if applicable).
+
+  <p>The second principle applies to orthogonal flows only, and only
+  if they are not in a paginated environment: If an element is
+  orthogonal and its inline dimension (i.e., the distance between its
+  <em>A edge</em> and <em>C edge</em>) is ''auto'', then it is treated
+  as a <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  >multi-column element</a> [[!CSS3COL]] and 'column-width', if not
+  already set, is set to a value derived from the containing block's
+  size and the <span>initial containing block</span>
+
+  <p>The last principle applies to orthogonal flows in a paginated
+  environment, e.g., in paged media or inside a multi-column element:
+  Just like in a non-paginated environment, if an element is
+  orthogonal and its inline dimension is ''auto'', then it is treated
+  as a <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  >multi-column element</a> [[!CSS3COL]] and 'column-width', if not
+  already set, is set to a certain value. But, in addition, if that
+  means that the first column would be so wide as stick out of the
+  page or column (the <a
+  href="http://www.w3.org/TR/css3-break/Overview.html#fragmentainer"
+  >“fragmentainer,”</a> see [[CSS3-BREAK]]), then that first column is
+  made narrower until it fits. But not narrower than
+  ''min-content''. (If at that size it still doesn't fit, it may
+  instead be moved to the next page/column or, if that is not
+  possible, overflow.)
+
+</div>
+
+
+
+  <p>In a paginated environment, in particular inside a page or a
+  column with a fixed height, it may be that such a vertical element
+  with ''auto'' height would be too tall and would stick out below the
+  page or column. In that case, it is laid out with a smaller line
+  length, such that it doesn't stick out. (But not smaller than
+  ''min-content'')
+
+  <p>Whether in a paginated environment or not, such a vertical
+  element, including its margin, padding and border, may be too wide
+  for its containing block. In that case it is paginated. The
+  different fragments that result from that may have a different line
+  lengths in that case, e.g., in the case of the following figure. The
+  fragments each have the top and bottom margin, padding and border of
+  the element (although in a paginated environment, some of those
+  margins disappear).
+
+  <div class=figure>
+  <p><img src="paginated-ortho" alt="Two pages of a book">
+
+  <p class=caption>A horizontal text (represented by letters A, B, C…)
+  containing a section with vertical text (represented by digits 1, 2,
+  3…). The document is paginated and the vertical text ends up split
+  over two pages. Note that the fragment of vertical text on the first
+  page has a longer line length (<em>inline dimension</em>) than the
+  fragment on the second page.
+  </div>
+
+  <p>If the containing block is vertical, the situation is analogous,
+  but with width and height changing roles:
+
+  <p>The height of the element itself is either as specified, or, if
+  it is ''auto'', calculated from the containing block's height by
+  subtracting the element's own margins, padding and border. (Which of
+  those are subtracted is determined by 'box-sizing'.)
+
+  <p>If the element is vertical, i.e., the same as its containing
+  block, this height is then used as the line length (<em>inline
+  dimension</em>) for laying out the element. And if the element is
+  horizontal, i.e., orthogonal to the containing block, its width is
+  used as line length, or, if that width is ''auto'', ''max-content is
+  used instead.
+
+  <p>If such a horizontal element with ''auto'' width would stick out
+  of the side of a page or a fixed-length column when set with
+  ''max-content'', it is instead laid out to a smaller width (but not
+  narrower than ''min-content'').
+
+  <p>If a horizontal element, including its margin, padding and
+  border, is too tall for its containing block, it is paginated.
+</div>
+
+
+
+<p>If the computed value of the <span>block dimension</span> is
 not ''auto'', then the used value is calculated by evaluating the
-computed value. Otherwise, the <span>block flow dimension</span> is
+computed value. Otherwise, the <span>block dimension</span> is
 the distance between two edges that are defined as follows:
 
 <ul>