- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 31 Oct 2011 05:25:52 +0000
- To: public-css-commits@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 ‘<code class=property>float-offset</code>’
+ 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
+ ‘<a href="#float-offset"><code
+ class=property>float-offset</code></a>’ 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><length> <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 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 ‘<code
+ class=property>float</code>’. 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 ‘<code class=css>float:
+ right</code>’), 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 ‘<code class=property>float</code>’
+ property floats the element to the top left of the multi-column element,
+ while the ‘<a href="#float-offset"><code
+ class=property>float-offset</code></a>’ 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
+ (‘<code class=css>1.5gr</code>’) 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 ‘<a href="#float-offset"><code
+ class=property>float-offset</code></a>’. The value ‘<code
+ class=css>1.25gr</code>’ 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><length> <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 UTC