W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-gcpm Overview.html,1.149,1.150

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 31 Oct 2011 05:25:52 +0000
To: public-css-commits@w3.org
Message-Id: <E1RKkNd-0006Tg-07@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv24877

Modified Files:
	Overview.html 
Log Message:
x

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v
retrieving revision 1.149
retrieving revision 1.150
diff -u -d -r1.149 -r1.150
--- Overview.html	26 Oct 2011 02:51:26 -0000	1.149
+++ Overview.html	31 Oct 2011 05:25:50 -0000	1.150
@@ -23,13 +23,13 @@
 
    <h1>CSS Generated Content for Paged Media Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 26 October 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 31 October 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111026/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111026</a>
+     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111031/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111031</a>
 
     <dt>Latest version:
 
@@ -234,6 +234,10 @@
 
      <li><a href="#multi-column-float-intrusion"><span class=secno>14.3.
       </span>Multi-column float intrusion</a>
+
+     <li><a href="#the-float-offset-property"><span class=secno>14.4.
+      </span>The &lsquo;<code class=property>float-offset</code>&rsquo;
+      property</a>
     </ul>
 
    <li><a href="#the-first-page-pseudo-element"><span class=secno>15.
@@ -3203,6 +3207,258 @@
      is a long word that is clipped in the middle of the column gap. <img
      src=1.png>
    </div>
+
+   <h3 id=the-float-offset-property><span class=secno>14.4. </span>The
+    &lsquo;<a href="#float-offset"><code
+    class=property>float-offset</code></a>&rsquo; property</h3>
+
+   <table class=propdef>
+    <tbody>
+     <tr>
+      <td><em>Name:</em>
+
+      <td><dfn id=float-offset>float-offset</dfn>
+
+     <tr>
+      <td><em>Value:</em>
+
+      <td>&lt;length> &lt;length> ?
+
+     <tr>
+      <td><em>Initial:</em>
+
+      <td>0 0
+
+     <tr>
+      <td><em>Applies to:</em>
+
+      <td>floated elements
+
+     <tr>
+      <td><em>Inherited:</em>
+
+      <td>no
+
+     <tr>
+      <td><em>Percentages:</em>
+
+      <td>refer to width and height of containing block
+
+     <tr>
+      <td><em>Media:</em>
+
+      <td>visual, paged
+
+     <tr>
+      <td><em>Computed&nbsp;value:</em>
+
+      <td>one or two absolute lengths
+   </table>
+
+   <p>This property pushes floated elements in the opposite direction of the
+    where they have been floated with &lsquo;<code
+    class=property>float</code>&rsquo;. If one value is specified, it is the
+    horizontal offset. If two values are specified, the first is the
+    horizontal and the second is the vertical offset. If an element has only
+    been floated horizontally (e.g., by setting &lsquo;<code class=css>float:
+    right</code>&rsquo;), this property will only offset the float
+    horizontally, even if a vertical value also has been specified. Likewise,
+    if an element has only been floated vertically, this property will only
+    offset the float vertically. If an element has been floated both
+    horizontally and vertically, this property will offset both horizontally
+    and vertically. If no vertical value has been specified, the vertical
+    offset is set to zero.
+
+   <div class=example>
+    <p>In this code, the &lsquo;<code class=property>float</code>&rsquo;
+     property floats the element to the top left of the multi-column element,
+     while the &lsquo;<a href="#float-offset"><code
+     class=property>float-offset</code></a>&rsquo; property pushes it to the
+     right so that it ends up in the column next to it:
+
+    <pre>
+div.quote { 
+  float: top left multicol; 
+  float-offset: 2.5gr; 
+  width: 1gr }
+</pre>
+
+    <div class=cols>
+     <p>Lorem ipsum dolor<br>
+      sit amet. Nam at jus.<br>
+      Sed imp er di et ris.<br>
+      Cur abi tur et sapen.<br>
+      Vivamus a metus.<br>
+      Aenean at risus<br>
+      pharetra ante luctu<br>
+      feugiat quis enim.<br>
+      Cum sociis natoque<br>
+      penatibus et magni.
+
+     <div style="position: absolute; left: 175px; top: 115px; z-index: 6">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.<br>
+       Sed imp er di et ris.<br>
+       Cur abi tur et sapen.
+     </div>
+
+     <div style="position: absolute; left: 350px; top: 0px; z-index: 6">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.<br>
+       Sed imp er di et ris.<br>
+       Cur abi tur et sapen.<br>
+       Vivamus a metus.<br>
+       Aenean at risus<br>
+       pharetra ante luctu<br>
+       feugiat quis enim.<br>
+       Cum sociis natoque<br>
+       penatibus et magni.
+     </div>
+
+     <div class=rep style="top: 0; left: 175px; width: 150px"></div>
+
+     <div class=gap style="left: 150px"></div>
+
+     <div class=gap style="left: 325px"></div>
+    </div>
+
+    <p>Assuming a three-column layout, the same rendering can be achieved by
+     floating the element to the right instead:
+
+    <pre>
+div.quote { 
+  float: top right multicol; 
+  float-offset: 2gr; 
+  width: 1gr }
+</pre>
+   </div>
+
+   <div class=example>
+    <pre>
+img { 
+  float: top left multicol;
+  float-offset: 1.5gr 50%;
+  width: 8em;
+}
+</pre>
+
+    <p>The first rule in the code above floats images to the top left of the
+     multi-column element. The second rule pushes the float in the opposite
+     directions: to the right and downwards. The horizontal component
+     (&lsquo;<code class=css>1.5gr</code>&rsquo;) means that the horizontal
+     middle of the element should be in the middle of the gap between the
+     left-most column and the one next to it. Vertically, element should be
+     in the middle of the column. Here is a possible rendering:
+
+    <div class=cols>
+     <p>Lorem ipsum dolor<br>
+      sit amet. Nam at jus. <br>
+      Sed<br>
+      imp<br>
+      er di<br>
+      et ris.<br>
+      Cur<br>
+      abi<br>
+      tur et sapen. Fusce<br>
+      sed ligula a turpis.
+
+     <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.
+
+      <div style="margin-left: 100px"> Sed<br>
+       imp<br>
+       er di<br>
+       et ris.<br>
+       Cur<br>
+       abi</div>
+      tur et sapen. Fusce <br>
+      sed ligula a turpis.</div>
+
+     <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.<br>
+       Sed imp er di et ris.<br>
+       Cur abi tur et sapen.<br>
+       Vivamus a metus.<br>
+       Aenean at risus<br>
+       pharetra ante luctu<br>
+       feugiat quis enim.<br>
+       Cum sociis natoque<br>
+       penatibus et magni.
+     </div>
+
+     <div class=rep style="left: 50px; width: 220px"></div>
+
+     <div class=gap style="left: 150px"></div>
+
+     <div class=gap style="left: 325px"></div>
+    </div>
+   </div>
+
+   <div class=example>
+    <p>Consider this code:
+
+    <pre>
+img { 
+  float: top left multicol;
+  float-offset: 1.25gr 50%;
+  width: 6em;
+}
+</pre>
+
+    <p>The only difference between this and the previous example is the
+     horizontal value on &lsquo;<a href="#float-offset"><code
+     class=property>float-offset</code></a>&rsquo;. The value &lsquo;<code
+     class=css>1.25gr</code>&rsquo; means that a point 25% into the image in
+     the inline direction will be aligned with a point 25% into the column
+     gap. Here is a possible rendering:
+
+    <div class=cols>
+     <p>Lorem ipsum dolor<br>
+      sit amet. Nam at jus. <br>
+      Sed imper di et<br>
+      ris. Cur abi tur<br>
+      et sapen. Fusce<br>
+      sed ligula a sic<br>
+      turpis. Lorem<br>
+      ipsum dolor sit<br>
+      amet. Namat jus. Sed<br>
+      imper di et ris curit.
+
+     <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.
+
+      <div style="margin-left: 100px"> Sed<br>
+       imp<br>
+       er di<br>
+       et ris.<br>
+       Cur<br>
+       abi</div>
+      tur et sapen. Fusce <br>
+      sed ligula a turpis.</div>
+
+     <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
+      <p>Lorem ipsum dolor<br>
+       sit amet. Nam at jus.<br>
+       Sed imp er di et ris.<br>
+       Cur abi tur et sapen.<br>
+       Vivamus a metus.<br>
+       Aenean at risus<br>
+       pharetra ante luctu<br>
+       feugiat quis enim.<br>
+       Cum sociis natoque<br>
+       penatibus et magni.
+     </div>
+
+     <div class=rep style="left: 120px; width: 150px"></div>
+
+     <div class=gap style="left: 150px"></div>
+
+     <div class=gap style="left: 325px"></div>
+    </div>
+   </div>
    <!--
 <h2>Aligning baselines in multi-column layouts</h2>
 
@@ -3447,6 +3703,9 @@
     <li>bookmark-target, <a href="#bookmark-target"
      title=bookmark-target><strong>9.</strong></a>
 
+    <li>float-offset, <a href="#float-offset"
+     title=float-offset><strong>14.4.</strong></a>
+
     <li>hyphenate-last-line-avoid, <a href="#hyphenate-last-line-avoid"
      title=hyphenate-last-line-avoid><strong>5.8.</strong></a>
 
@@ -3561,6 +3820,21 @@
       <td>all
 
      <tr>
+      <th><a class=property href="#float-offset">float-offset</a>
+
+      <td>&lt;length> &lt;length> ?
+
+      <td>0 0
+
+      <td>floated elements
+
+      <td>no
+
+      <td>refer to width and height of containing block
+
+      <td>visual, paged
+
+     <tr>
       <th><a class=property
        href="#hyphenate-last-line-avoid">hyphenate-last-line-avoid</a>
 
Received on Monday, 31 October 2011 05:25:54 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 31 October 2011 05:25:55 GMT