- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 23 Dec 2011 20:12:42 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv4008
Modified Files:
Overview.src.html
Added Files:
14.png
Log Message:
adding image
--- NEW FILE: 14.png ---
(This appears to be a binary file; contents omitted.)
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.182
retrieving revision 1.183
diff -u -d -r1.182 -r1.183
--- Overview.src.html 17 Nov 2011 14:03:04 -0000 1.182
+++ Overview.src.html 23 Dec 2011 20:12:40 -0000 1.183
@@ -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 @@
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 @@
</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 @@
</div>
+
+
+
<h3>The 'float-offset' property</h3>
<table class=propdef>
@@ -2822,12 +2813,18 @@
<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 @@
<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 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 @@
<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>
Received on Friday, 23 December 2011 20:12:43 UTC