csswg/css3-gcpm Overview.src.html,1.154,1.155

Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv24849

Modified Files:
	Overview.src.html 
Log Message:
revising float-offset

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.154
retrieving revision 1.155
diff -u -d -r1.154 -r1.155
--- Overview.src.html	26 Oct 2011 02:51:18 -0000	1.154
+++ Overview.src.html	31 Oct 2011 05:25:40 -0000	1.155
@@ -2748,6 +2748,199 @@
 </div>
 
 
+<h3>The 'float-offset' property</h3>
+
+<table class=propdef>
+    <tr>
+      <td><em>Name:</em>
+      <td><dfn>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 'float'. 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
+'float: right'), 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 'float' property floats the element to the top
+left of the multi-column element, while the 'float-offset' 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 (''1.5gr'') 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 'float-offset'. The value ''1.25gr'' 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>

Received on Monday, 31 October 2011 05:25:44 UTC