machine-generated version

Author: howcome

css-multicol/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="CSS Multi-column Layout Module" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-09-15 name=dcterms.date>
+  <meta content=2013-09-20 name=dcterms.date>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://dev.w3.org/csswg/css3-multicol/"
@@ -42,13 +42,13 @@
 
    <h1>CSS Multi-column Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 15 September 2013</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 20 September 2013</h2>
 
    <dl>
     <dt>This version:
 
     <dd>
-     <!--<a href="http://www.w3.org/TR/2013/CR-css3-multicol-20130915">http://dev.w3.org/csswg/css3-multicol/</a>-->
+     <!--<a href="http://www.w3.org/TR/2013/CR-css3-multicol-20130920">http://dev.w3.org/csswg/css3-multicol/</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>
 
@@ -174,6 +174,10 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
 
    <li><a href="#the-multi-column-model"><span class=secno>2. </span>The
     multi-column model</a>
+    <ul class=toc>
+     <li><a href="#properties-and-values"><span class=secno>2.1.
+      </span>Properties and values</a>
+    </ul>
 
    <li><a href="#the-number-and-width-of-columns"><span class=secno>3.
     </span>The number and width of columns</a>
@@ -448,6 +452,11 @@ <h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
    example, columns of different widths and different backgrounds may be
    supported.
 
+  <p>This specification follows the <a
+   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
+   definition conventions</a> from <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+
   <div class=example>
    <p>Column gaps (yellow) and column rules (green) are shown in this sample
     rendition of a multi-column element with padding (blue). The blue and
@@ -666,6 +675,22 @@ <h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
   <p>Nested multi-column elements are allowed, but there may be
    implementation-specific limits.
 
+  <h3 id=properties-and-values><span class=secno>2.1. </span>Properties and
+   values</h3>
+
+  <p>This specification follows the <a
+   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
+   definition conventions</a> from <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. The <dfn
+   id=ltcolorgt><var>&lt;color&gt;</var></dfn> value type is defined by <a
+   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>.
+
+  <p>In addition to the property-specific values listed in their definitions,
+   all properties defined in this specification also accept the <a
+   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
+   keyword as their property value. For readability it has not been repeated
+   explicitly.
+
   <h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The
    number and width of columns</h2>
 
@@ -802,12 +827,8 @@ <h3 id=cw><span class=secno>3.1. </span>‘<a href="#column-width"><code
   <p class=note>The reason for making ‘<a href="#column-width"><code
    class=property>column-width</code></a>’ somewhat flexible is to achieve
    scalable designs that can fit many screen sizes. To set an exact column
-   width, all length values (in horizontal text these are: ‘<code
-   class=property>width</code>’, ‘<a href="#column-width"><code
-   class=property>column-width</code></a>’, ‘<a href="#column-gap0"><code
-   class=property>column-gap</code></a>’, and ‘<a
-   href="#column-rule-width"><code
-   class=property>column-rule-width</code></a>’) must be specified.
+   width, the column gap and the width of the multicol element (assuming
+   horizontal text) must also be specified.
 
   <h3 id=cc><span class=secno>3.2. </span>‘<a href="#column-count"><code
    class=property>column-count</code></a>’</h3>
@@ -1479,7 +1500,7 @@ <h3 id=break-before-break-after-break-inside><span class=secno>5.1.
     <tr>
      <td><em>Media:</em>
 
-     <td>paged
+     <td>visual
 
     <tr>
      <td><em>Computed value:</em>
@@ -1528,7 +1549,7 @@ <h3 id=break-before-break-after-break-inside><span class=secno>5.1.
     <tr>
      <td><em>Media:</em>
 
-     <td>paged
+     <td>visual
 
     <tr>
      <td><em>Computed value:</em>
@@ -1576,7 +1597,7 @@ <h3 id=break-before-break-after-break-inside><span class=secno>5.1.
     <tr>
      <td><em>Media:</em>
 
-     <td>paged
+     <td>visual
 
     <tr>
      <td><em>Computed value:</em>
@@ -1758,7 +1779,6 @@ <h3 id=column-span><span class=secno>6.1. </span>‘<a
 
    <pre class=css>
 h2 { column-span: all; background: silver } 
-img { display: none }
 </pre>
 
    <p>By setting ‘<a href="#column-span0"><code
@@ -1993,6 +2013,74 @@ <h3 id=column-span><span class=secno>6.1. </span>‘<a
    </div>
   </div>
 
+  <div class=example>
+   <p>Spanners create new block formatting contexts, but their margins can be
+    changed by their surroundings. In this example, two spanners naturally
+    end up at the top of a page. The top margin of the first spanner is
+    truncated due to being after an unforced break. The bottom margin of the
+    first spanner collapses with the top margin of the second spanner. The
+    bottom margin of the second spanner collapses with the top margin of the
+    subsequent element.
+
+   <pre class=css>
+h2 { 
+  margin: 0.5em 0;
+  column-span: all; 
+  background: silver 
+} 
+</pre>
+
+   <div class=cols>
+    <p><br>
+     <br>
+     <br>
+     <br>
+     M nop qrst uv wx yz.<br>
+     Ab cde fgh i jkl. Mno<br>
+     pqr stu vw xyz. A bc<br>
+     def g hij klm nopqrs<br>
+     tuv wxy z. Abc de fg<br>
+     hi jklmno. Pqrstu vw<br>
+
+    <div class=col style="left: 175px">
+     <p><br>
+      <br>
+      <br>
+      <br>
+      x yz. Abc def ghi jkl.<br>
+      M nop qrst uv wx yz.<br>
+      Ab cde fgh i jkl. Mno<br>
+      pqr stu vw xyz. A bc<br>
+      def g hij klm nopqrs<br>
+      tuv wxy z. Abc de fg<br>
+    </div>
+
+    <div class=col style="left: 350px">
+     <p><br>
+      <br>
+      <br>
+      <br>
+      hi jklmno. Pqrstu vw<br>
+      x yz. Abc def ghi jkl.<br>
+      M nop qrst uv wx yz.<br>
+      Ab cde fgh i jkl. Mno<br>
+      pqr stu vw xyz.
+    </div>
+
+    <div class=rep
+     style="width: 490px; top: 0; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An
+     H2 element</div>
+
+    <div class=rep
+     style="width: 490px; top: 40px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">Another
+     H2 element</div>
+
+    <div class=gap style="top: 80px; left: 150px"></div>
+
+    <div class=gap style="top: 80px; left: 325px"></div>
+   </div>
+  </div>
+
   <h2 id=filling-columns><span class=secno>7. </span>Filling columns</h2>
 
   <p>There are two strategies for filling columns: columns can either be
@@ -2542,6 +2630,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>break-inside, <a href="#break-inside"
     title="section 5.1."><strong>5.1.</strong></a>
 
+   <li><var>&lt;color&gt;</var>, <a href="#ltcolorgt"
+    title="section 2.1."><strong>2.1.</strong></a>
+
    <li>column box, <a href="#column-box"
     title="section 2."><strong>2.</strong></a>
 
@@ -2621,7 +2712,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>N/A
 
-     <td>paged
+     <td>visual
 
     <tr>
      <th><a class=property href="#break-before">break-before</a>
@@ -2637,7 +2728,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>N/A
 
-     <td>paged
+     <td>visual
 
     <tr>
      <th><a class=property href="#break-inside">break-inside</a>
@@ -2652,7 +2743,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>N/A
 
-     <td>paged
+     <td>visual
 
     <tr>
      <th><a class=property href="#column-count">column-count</a>