[css-writing-modes] Define the missing pieces of multi-col elements in orthogonal flows.

Author: fantasai

css-writing-modes/Overview.bs

@@ -9,7 +9,7 @@ Deadline: 2014-09-20
 Group: csswg
 ED: http://dev.w3.org/csswg/css-writing-modes-3/
 TR: http://www.w3.org/TR/css-writing-modes-3/
-Previous Version: http://www.w3.org/TR/2013/WD-css-writing-modes-3-20131126/
+Previous Version: http://www.w3.org/TR/2014/CR-css-writing-modes-3-20140320/
 !Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a>
 Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
 Editor: Koji Ishii, Invited Expert, kojiishi@gluesoft.co.jp
@@ -1889,7 +1889,7 @@ Auto-sizing in Orthogonal Flows</h4>
 
   <p>It is common in CSS for a containing block to have a definite
     <i>inline-size</i>, but not a definite <i>block-size</i>. This typically happens in
-    CSS2.1 when a containing block has an ''auto'' height, for
+    CSS2.1 when a containing block has an ''height/auto'' height, for
     example: its width is given by the calculations in
     <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>,
     but its <i>block-size</i> depends on its contents. In such cases the
@@ -1914,12 +1914,13 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
 
   <p>
     If a box establishing an <i>orthogonal flow</i> is a block container or multi-column element,
-    for the case where the box's <i>inline-size</i> is ''auto'':
+    for the case where the box's <i>inline-size</i> is ''width/auto'':
 
   <ol>
-    <li>
-      If 'column-count' and 'column-width' are both ''auto'',
-      calculate the used 'column-width' with the shrink-to-fit formula:
+    <li><strong>Calculate the used 'column-width':</strong>
+    <ul>
+      <li>If 'column-count' and 'column-width' are both ''column-width/auto'',
+      use the shrink-to-fit formula
       <code>min(<var>max-content</var>, max(<var>min-content</var>, <var>constraint</var>))</code>,
       where:
       <dl>
@@ -1942,18 +1943,31 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
           <img src="auto-multicol.svg" width=200
             alt="Diagram of automatically triggered multi-column preventing T-shaped documents">
         </div>
-        Note that this automatically triggers multi-column flow on all block containers
-        so that overflowing content, instead of continuing off the side of the containing block,
+        Note that this automatically triggers multi-column flow on all block containers.
+        This is so that overflowing content, instead of continuing off the side of the containing block,
         is wrapped into columns in the flow direction of the containing block,
         thus avoiding T-shaped documents.
         Authors can control the measure of these columns by setting 'column-width',
-        or disable this behavior by setting 'width' to a non-''auto'' value
-        such as ''max-content''.
+        or disable this behavior by setting the <i>inline-size</i> property
+        to a non-''width/auto'' value such as ''max-content''.
         <br style="clear:both;">
       </div>
 
-    <li>
-      The used column <i>block-size</i> is:
+      <li>If 'column-count' is not ''column-count/auto'' and 'column-width' is ''column-count/auto'',
+      calculate the used 'column-width' with the same formula,
+      except replace <var>constraint</var> with
+      <var>constraint</var> &minus; ('column-count' &minus; 1) &times; 'column-gap'.
+
+      <li>If 'column-count' and 'column-width' are both non-''column-count/auto'',
+      the used 'column-width' is the computed 'column-width'.
+      (This is not recommended as it can cause overflow;
+      instead it is better to set the 'column-width' and a max-block-size.)
+    </ul>
+
+    <li><strong>Calculate the used column <i>block-size</i>:</strong>
+      If both 'column-count' and 'column-width' are non-''column-count/auto'',
+      then the used column <i>block-size</i> is the multi-column element’s <i>max-content size</i>.
+      Otherwise, use
       the box’s <i>block-size</i> (if that is <i>definite</i>),
       else the <i>fill-available block-size</i> of the box (if that is <i>definite</i>),
       else the box’s <i>max-content block-size</i>.
@@ -1962,8 +1976,10 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
         so that e.g. a large image will not overflow the box,
         but cause the box to overflow the containing block?
 
-    <li>
-      The used 'column-count' then follows from filling the resulting columns with the box's content.
+    <li><strong>Calculate the used 'column-count':</strong>
+      If the computed 'column-count' is ''column-count/auto'', then
+      the used 'column-count' follows from filling the resulting multi-column layout
+      with the box's content.
   </ol>
 
   <p>

css-writing-modes/Overview.html

@@ -1957,7 +1957,7 @@ <h4 class="heading settled heading" data-level=7.3.1 id=orthogonal-auto><span cl
 
   <p>It is common in CSS for a containing block to have a definite
     <a data-link-type=dfn href=#inline-size title=inline-size>inline-size</a>, but not a definite <a data-link-type=dfn href=#block-size title=block-size>block-size</a>. This typically happens in
-    CSS2.1 when a containing block has an <span class=css data-link-type=maybe title=auto>auto</span> height, for
+    CSS2.1 when a containing block has an <span class=css data-link-for=height data-link-type=maybe title=auto>auto</span> height, for
     example: its width is given by the calculations in
     <a href=http://www.w3.org/TR/CSS21/visudet.html#blockwidth>10.3.3</a>,
     but its <a data-link-type=dfn href=#block-size title=block-size>block-size</a> depends on its contents. In such cases the
@@ -1982,12 +1982,13 @@ <h4 class="heading settled heading" data-level=7.3.2 id=auto-multicol><span clas
 
   <p>
     If a box establishing an <a data-link-type=dfn href=#establish-an-orthogonal-flow title="orthogonal flow">orthogonal flow</a> is a block container or multi-column element,
-    for the case where the box’s <a data-link-type=dfn href=#inline-size title=inline-size>inline-size</a> is <span class=css data-link-type=maybe title=auto>auto</span>:
+    for the case where the box’s <a data-link-type=dfn href=#inline-size title=inline-size>inline-size</a> is <span class=css data-link-for=width data-link-type=maybe title=auto>auto</span>:
 
   <ol>
-    <li>
-      If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> are both <span class=css data-link-type=maybe title=auto>auto</span>,
-      calculate the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> with the shrink-to-fit formula:
+    <li><strong>Calculate the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a>:</strong>
+    <ul>
+      <li>If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> are both <span class=css data-link-for=column-width data-link-type=maybe title=auto>auto</span>,
+      use the shrink-to-fit formula
       <code>min(<var>max-content</var>, max(<var>min-content</var>, <var>constraint</var>))</code>,
       where:
       <dl>
@@ -2009,18 +2010,31 @@ <h4 class="heading settled heading" data-level=7.3.2 id=auto-multicol><span clas
         <div class=sidefigure>
           <img alt="Diagram of automatically triggered multi-column preventing T-shaped documents" src=auto-multicol.svg width=200>
         </div>
-        Note that this automatically triggers multi-column flow on all block containers
-        so that overflowing content, instead of continuing off the side of the containing block,
+        Note that this automatically triggers multi-column flow on all block containers.
+        This is so that overflowing content, instead of continuing off the side of the containing block,
         is wrapped into columns in the flow direction of the containing block,
         thus avoiding T-shaped documents.
         Authors can control the measure of these columns by setting <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a>,
-        or disable this behavior by setting <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> to a non-<span class=css data-link-type=maybe title=auto>auto</span> value
-        such as <span class=css data-link-type=maybe title=max-content>max-content</span>.
+        or disable this behavior by setting the <a data-link-type=dfn href=#inline-size title=inline-size>inline-size</a> property
+        to a non-<span class=css data-link-for=width data-link-type=maybe title=auto>auto</span> value such as <span class=css data-link-type=maybe title=max-content>max-content</span>.
         <br style=clear:both;>
       </div>
 
-    <li>
-      The used column <a data-link-type=dfn href=#block-size title=block-size>block-size</a> is:
+      <li>If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> is not <span class=css data-link-for=column-count data-link-type=maybe title=auto>auto</span> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> is <span class=css data-link-for=column-count data-link-type=maybe title=auto>auto</span>,
+      calculate the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> with the same formula,
+      except replace <var>constraint</var> with
+      <var>constraint</var> − (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> − 1) × <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-gap title=column-gap>column-gap</a>.
+
+      <li>If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> are both non-<span class=css data-link-for=column-count data-link-type=maybe title=auto>auto</span>,
+      the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> is the computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a>.
+      (This is not recommended as it can cause overflow;
+      instead it is better to set the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> and a max-block-size.)
+    </ul>
+
+    <li><strong>Calculate the used column <a data-link-type=dfn href=#block-size title=block-size>block-size</a>:</strong>
+      If both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-width title=column-width>column-width</a> are non-<span class=css data-link-for=column-count data-link-type=maybe title=auto>auto</span>,
+      then the used column <a data-link-type=dfn href=#block-size title=block-size>block-size</a> is the multi-column element’s <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-inline-size title="max-content size">max-content size</a>.
+      Otherwise, use
       the box’s <a data-link-type=dfn href=#block-size title=block-size>block-size</a> (if that is <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#definite title=definite>definite</a>),
       else the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#fill-available-block-size title="fill-available block-size">fill-available block-size</a> of the box (if that is <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#definite title=definite>definite</a>),
       else the box’s <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-block-size title="max-content block-size">max-content block-size</a>.
@@ -2029,8 +2043,10 @@ <h4 class="heading settled heading" data-level=7.3.2 id=auto-multicol><span clas
         so that e.g. a large image will not overflow the box,
         but cause the box to overflow the containing block?
 
-    <li>
-      The used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> then follows from filling the resulting columns with the box’s content.
+    <li><strong>Calculate the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a>:</strong>
+      If the computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> is <span class=css data-link-for=column-count data-link-type=maybe title=auto>auto</span>, then
+      the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#propdef-column-count title=column-count>column-count</a> follows from filling the resulting multi-column layout
+      with the box’s content.
   </ol>
 
   <p>