adding image

Author: howcom

css3-gcpm/14.png

@@ -12,6 +12,7 @@
 
 <style type="text/css">
 .example img { display: block }
+.example { background: #ddd }
 body { line-height: 1.3 }
 </style>
 
@@ -2565,22 +2566,6 @@ <h2>Page floats</h2>
 and the new 'float-modifier', provides support for common paper-based
 layouts. 
 
-<!--
-<p>(A few words about the difference between this proposa, and the one
-sketched in the next section: Care has now been taken to avoid layouts
-that are hard to achieve, or that can be achieved in other ways. For
-example, by saying 'top-corner' instead of 'top left' or 'top right',
-it becomes impossible to specify a layout where one has to replace
-already laid-out content. Compared to the mk1 float model, mk2 does
-not allow one to explicityly set the containing block of the float;
-the CB is the column or the multicol element (depending on which
-keyword in use). It is therefore impossible to float something to the
-top of the page. However, given that 'column-span' now is widely
-supported, a different strategy can be used: make the root element a
-multicol element, and float the box to the top. Thereby it ends up at
-the top of hte page.)
--->
-
 <p>Four new keywords on 'float' have been added:
 
 <dl>
@@ -2754,7 +2739,10 @@ <h3>Floating inside and outside pages</h3>
 </pre>
 </div>
 
-<h3>Multi-column float intrusion</h3>
+
+<h2>Intrusion</h2>
+
+<h3>Column intrusion</h3>
 
 <p>A new value on 'float' is introduced to support intrusion in columns:
 
@@ -2784,6 +2772,9 @@ <h3>Multi-column float intrusion</h3>
 </div>
 
 
+
+
+
 <h3>The 'float-offset' property</h3>
 
 <table class=propdef>
@@ -2822,12 +2813,18 @@ <h3>The 'float-offset' property</h3>
 <p>Negative values are allowed; a negative values will push the float
 in the same direction as it has been floated with 'float'
 
-<p>The float will never be pushed outside the content edges
-of the multicol element due to a setting on 'float-offset'.
+<p>This property may move floats into other column than where they
+naturally appear. However, the float will never be pushed outside the
+content edges of the multicol element due to a settings on this
+property.
 
-<p>Percentage values refer to the width/height of the float plus a fraction of the column gap. 
+<p>Percentage values are computed according to this formula:
+
+<pre>
+  (containing-block-width - float-width) * percentage 
+  (containing-block-height - float-height) * percentage 
+</pre>
 
-<p>Floats that are moved into other columns with this property intrudes.
 
 <div class=example>
 <pre>img { 
@@ -2859,6 +2856,165 @@ <h3>The 'float-offset' property</h3>
 <p class=issue>Would it make more sense to not specify the opposite direction, but the "forward" direction?
 
 
+<h3>The 'clear-side' property</h3>
+
+<table class=propdef>
+    <tr>
+      <td><em>Name:</em>
+      <td><dfn>clear-side</dfn>
+    <tr>
+      <td><em>Value:</em>
+    <td>auto | left | right | both
+    <tr>
+      <td><em>Initial:</em>
+      <td>auto
+    <tr>
+      <td><em>Applies to:</em>
+      <td>floated elements
+    <tr>
+      <td><em>Inherited:</em>
+      <td>no
+    <tr>
+      <td><em>Percentages:</em>
+      <td>N/A
+    <tr>
+      <td><em>Media:</em>
+      <td>visual, paged
+    <tr>
+      <td><em>Computed&nbsp;value:</em>
+      <td>as specified
+</table>
+
+<p>This property declares if the side of a float should be cleared of
+content. Values have the following meaning:
+
+
+<dl>
+<dt>auto
+<dd>if the float is left-floated, there should be no content to the left; if the float is right-floated, there should be no content to the right
+<dt>left
+<dd>there should be no content to the left of the float
+<dt>right
+<dd>there should be no content to the left of the float
+<dt>none
+<dd>there may be content on either side of the float
+</dl>
+
+
+<h3>Pull-quotes</h3>
+
+<div class=example>
+<img width=213 src="exclusion_wrap_side_left.png">
+
+<pre>
+.pullquote {
+  float: right;
+  float-offset: 5em;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: right;
+  float-offset: center;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: center;
+  clear-side: right;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: positioned;
+  right: 5em;
+  clear-side: right;
+}
+</pre>
+</div>
+
+<div class=example>
+<p><img width=213 src="exclusion_wrap_side_right.png">
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 5em;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 50%; /* center */
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: center;
+  clear-side: left;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: positioned;
+  left: 5em;
+  clear-side: left;
+}
+</pre>
+
+</div>
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 50%; /* center */
+}
+</pre>
+
+
+
+<div class=example>
+<img width=213 src="exclusion_wrap_side_both.png">
+
+<pre>
+.pullquote {
+  float: center; 
+  clear-side: none;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 5em;
+  clear-side: none;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: positioned;
+  left: 5em;
+  clear-side: none; 
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: center;
+}
+</pre>
+
+</div>
+
+
+
 <!--
 <h2>Aligning baselines in multi-column layouts</h2>
 
@@ -2947,12 +3103,26 @@ <h2>Selecting columns and pages</h2>
 <pre>
 div.chapter::column(3)           /* the third column of the element */
 div.chapter::column(2n)          /* all even columns of the element */
+div.chapter::column(2,2)         /* second column on second page */
+div.chapter::column(*,2)         /* all columns on the second page */
 div.chapter::page(2)             /* second page of the element */
-div.chapter::page-column(2,2)    /* second column on second page */
 div.chapter::page(2)::column(2)  /* second column, but only if it appears on the second page */
 </pre>
 </div>
 
+<div class=example>
+<pre>
+div.chapter::column(1) {
+  transform: rotate(6.5deg);
+}
+div.chapter::column(2) { 
+  transform: rotate(-5.5deg) translate(0, 40px);
+}
+</pre>
+
+<img src="regions_rotated_columns.jpg">
+</div>
+
 <!--
 
 <h2>Page selection: nth()</h2>