Skip to content

Commit 96c02a0

Browse files
astearnsastearns
committed
[css-shapes] change interactions between floats and shapes
1 parent 580ac71 commit 96c02a0

2 files changed

Lines changed: 126 additions & 41 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
235235

236236
<li class=no-num><a href="#change-log">Change Log</a>
237237
<ul class=toc>
238+
<li class=no-num><a href="#since-june-20th-2013">Since June 20th
239+
2013</a>
240+
238241
<li class=no-num><a href="#since-may-3rd-2012">Since May 3rd 2012</a>
239242

240243
<li class=no-num><a href="#since-december-13th-2011">Since December 13th
@@ -252,7 +255,7 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
252255

253256
<h2 id=definitions><span class=secno>2. </span>Definitions</h2>
254257

255-
<p><dfn id=float-area>Float area</dfn>
258+
<p><dfn id=float-area>float area</dfn>
256259

257260
<p> The area used for wrapping content around a float element. By default,
258261
the float area is the float element's <a
@@ -277,17 +280,21 @@ <h2 id=shapes><span class=secno>3. </span>Shapes</h2>
277280
<h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
278281
</span>Relation to the box model and float behavior</h3>
279282

280-
<p> While the boundaries used for wrapping inline flow content outside an
283+
<p> While the boundaries used for wrapping inline flow content outside a
281284
float can be defined using shapes, the actual box model does not change.
282-
If the element has specified margins, borders or paddings they will be
285+
If the element has specified margins, borders or padding they will be
283286
computed and rendered according to the <a href="#CSS3BOX"
284287
rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> module.
285288

286-
<p> Float positioning is an exception. If a float has an outside shape, its
287-
positioning is resolved as <a
288-
href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a>
289-
in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> but the
290-
outside shape's bounding box is used in lieu of the float's margin box.
289+
<p> When a shape is used to define a <a href="#float-area">float area</a>,
290+
the shape is clipped to the float's margin box. In other words, a shape
291+
can only ever reduce a <a href="#float-area">float area</a>, not increase
292+
it. When a shape reduces a <a href="#float-area">float area</a> such that
293+
a line box that would be normally be affected by the float would not
294+
intersect the <a href="#float-area">float area</a> at all, the available
295+
space for the line box is constrained by the farthest margin edge of the
296+
float. For a left float this would be the left margin edge, and for a
297+
right float this would be the right margin edge.
291298

292299
<div class=example>
293300
<p> In the following example the left and right floating <code
@@ -326,6 +333,30 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
326333
<img alt="Using the shape-outside property with a float"
327334
class=singleImgExample src="images/float-shape-outside.png"></div>
328335

336+
<div class=example>
337+
<p> Since shapes are clipped to the float's margin box, adding this shape
338+
to the left float above would result in the same rendering.
339+
340+
<p>
341+
342+
<pre><code class=html>
343+
shape-outside: polygon(0,0 500%,500% 0,500%);
344+
</code></pre>
345+
</div>
346+
347+
<div class=example>
348+
<p> A shape with no extent will create a <a href="#float-area">float
349+
area</a> with no extent. The shape below applied to a left float will
350+
allow inline content to flow through the float's box, but the line boxes
351+
will be constrained by the float's left margin edge.
352+
353+
<p>
354+
355+
<pre><code class=html>
356+
shape-outside: rectangle(0,0,0%,0%);
357+
</code></pre>
358+
</div>
359+
329360
<h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
330361
Shapes</h3>
331362

@@ -631,7 +662,7 @@ <h3 id=shapes-from-image><span class=secno>3.3. </span>Shapes from Image</h3>
631662
</ol>
632663

633664
<p>It is perfectly possible to display an image and use a different image
634-
for its float area.
665+
for its <a href="#float-area">float area</a>.
635666

636667
<p>In the figure below, the alpha-channel threshold is represented by the
637668
dotted line around the CSS logo and the 35px shape-margin is visible
@@ -725,7 +756,8 @@ <h4 id=shape-outside-property><span class=secno>3.4.1. </span>The ‘<a
725756
<dl>
726757
<dt><dfn id=auto title="'shape-outside'!!'auto'">auto</dfn>
727758

728-
<dd>The float area uses the margin box as normal.
759+
<dd>The <a href="#float-area">float area</a> uses the margin box as
760+
normal.
729761
</dl>
730762

731763
<dl>
@@ -1030,16 +1062,6 @@ <h3 class=no-num id=normative-references>Normative references</h3>
10301062
<dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
10311063
<!---->
10321064

1033-
<dt id=CSS21>[CSS21]
1034-
1035-
<dd>Bert Bos; et al. <a
1036-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
1037-
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
1038-
2011. W3C Recommendation. URL: <a
1039-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
1040-
</dd>
1041-
<!---->
1042-
10431065
<dt id=CSS3BG>[CSS3BG]
10441066

10451067
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
@@ -1114,7 +1136,7 @@ <h2 class=no-num id=index>Index</h2>
11141136
<li>ellipse, <a href="#ellipse"
11151137
title="section 3.2.1."><strong>3.2.1.</strong></a>
11161138

1117-
<li>Float area, <a href="#float-area"
1139+
<li>float area, <a href="#float-area"
11181140
title="section 2."><strong>2.</strong></a>
11191141

11201142
<li>inset-rectangle, <a href="#inset-rectangle"
@@ -1248,8 +1270,22 @@ <h2 class=no-num id=property-index>Property index</h2>
12481270

12491271
<h2 class=no-num id=change-log>Change Log</h2>
12501272

1273+
<h3 class=no-num id=since-june-20th-2013>Since <a
1274+
href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">June 20th
1275+
2013</a></h3>
1276+
1277+
<ul>
1278+
<li>Change float positioning to be unaffected by shape-outside
1279+
1280+
<li>Shapes on floats clipped to float's margin box
1281+
1282+
<li>Inline content constrained to at least the float's farthest margin
1283+
edge
1284+
</ul>
1285+
12511286
<h3 class=no-num id=since-may-3rd-2012>Since <a
1252-
href="http://www.w3.org/TR/2012/WD-css-shapes-20120503/">May 3rd 2012</a></h3>
1287+
href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd
1288+
2012</a></h3>
12531289

12541290
<ul>
12551291
<li>Postpone shapes from SVG elements to a future Shapes level
@@ -1285,8 +1321,8 @@ <h3 class=no-num id=since-may-3rd-2012>Since <a
12851321
</ul>
12861322

12871323
<h3 class=no-num id=since-december-13th-2011>Since <a
1288-
href="http://www.w3.org/TR/2011/WD-css-shapes-20111213/">December 13th
1289-
2011</a></h3>
1324+
href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December
1325+
13th 2011</a></h3>
12901326

12911327
<ul>
12921328
<li>Clarified processing model.

‎css-shapes/Overview.src.html‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ <h2 id="intro">Introduction</h2>
112112

113113
<h2 id="definitions">Definitions</h2>
114114

115-
<dfn>Float area</dfn>
115+
<dfn>float area</dfn>
116116

117117
<p>
118118
The area used for wrapping content around a float element. By default, the
@@ -146,24 +146,39 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
146146
<p>
147147
While the boundaries used
148148
for wrapping inline flow content
149-
outside an float
149+
outside a float
150150
can be defined using shapes,
151151
the actual box model does not change.
152152
If the element has specified
153-
margins, borders or paddings
153+
margins, borders or padding
154154
they will be computed and rendered
155155
according to the [[!CSS3BOX]] module.
156156
</p>
157-
157+
158158
<p>
159-
Float positioning is an exception.
160-
If a float has an outside shape,
161-
its positioning is resolved as
162-
<a href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a>
163-
in [[!CSS21]]
164-
but the outside shape's bounding box
165-
is used in lieu of the float's margin box.
166-
</p>
159+
When a shape is used to define
160+
a <span>float area</span>,
161+
the shape is clipped
162+
to the float's margin box.
163+
In other words,
164+
a shape can only ever reduce
165+
a <span>float area</span>,
166+
not increase it.
167+
When a shape reduces
168+
a <span>float area</span> such that
169+
a line box that would be normally
170+
be affected by the float
171+
would not intersect
172+
the <span>float area</span> at all,
173+
the available space
174+
for the line box is constrained
175+
by the farthest margin edge
176+
of the float.
177+
For a left float this would be
178+
the left margin edge,
179+
and for a right float this would be
180+
the right margin edge.
181+
</p>
167182

168183
<div class="example">
169184
<p>
@@ -206,6 +221,33 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
206221
<img class="singleImgExample" src="images/float-shape-outside.png" alt="Using the shape-outside property with a float"/>
207222
</div>
208223

224+
<div class="example">
225+
<p>
226+
Since shapes are clipped to the float's margin box,
227+
adding this shape to the left float above
228+
would result in the same rendering.
229+
<p>
230+
<pre><code class="html">
231+
shape-outside: polygon(0,0 500%,500% 0,500%);
232+
</code></pre>
233+
</div>
234+
235+
<div class="example">
236+
<p>
237+
A shape with no extent will create
238+
a <span>float area</span> with no extent.
239+
The shape below applied to a left float
240+
will allow inline content
241+
to flow through the float's box,
242+
but the line boxes
243+
will be constrained
244+
by the float's left margin edge.
245+
<p>
246+
<pre><code class="html">
247+
shape-outside: rectangle(0,0,0%,0%);
248+
</code></pre>
249+
</div>
250+
209251
<h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
210252
<p>
211253
Shapes can be specified using
@@ -508,7 +550,7 @@ <h3 id="shapes-from-image">Shapes from Image</h3>
508550
<li>as a shape defining the <span>float area</span> of the image</li>
509551
</ol>
510552
<p>It is perfectly possible to display an image and use a different image for its
511-
float area.</p>
553+
<span>float area</span>.</p>
512554

513555
<p>In the figure below, the alpha-channel threshold is represented by the dotted line around
514556
the CSS logo and the 35px shape-margin is visible between that line and the edges of
@@ -581,7 +623,7 @@ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
581623
<p>The values of this property have the following meanings:</p>
582624
<dl>
583625
<dt><dfn title="'shape-outside'!!'auto'">auto</dfn></dt>
584-
<dd>The float area uses the margin box as normal.</dd>
626+
<dd>The <span>float area</span> uses the margin box as normal.</dd>
585627
</dl>
586628
<dl>
587629
<dt><dfn title="'shape-outside'!!'&lt;basic-shape&gt;'">&lt;basic-shape&gt;</dfn></dt>
@@ -777,8 +819,15 @@ <h2 class="no-num" id="property-index">Property index</h2>
777819
</script>
778820
-->
779821
<h2 class="no-num" id="change-log">Change Log</h2>
780-
781-
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css-shapes-20120503/">May 3rd 2012</a></h3>
822+
823+
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">June 20th 2013</a></h3>
824+
<ul>
825+
<li>Change float positioning to be unaffected by shape-outside</li>
826+
<li>Shapes on floats clipped to float's margin box</li>
827+
<li>Inline content constrained to at least the float's farthest margin edge</li>
828+
</ul>
829+
830+
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
782831
<ul>
783832
<li>Postpone shapes from SVG elements to a future Shapes level</li>
784833
<li>Postpone shape-inside to a future Shapes level</li>
@@ -797,7 +846,7 @@ <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css-shapes-20120
797846
<li>Removed wrap shorthand.</li>
798847
</ul>
799848

800-
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2011/WD-css-shapes-20111213/">December 13th 2011</a></h3>
849+
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December 13th 2011</a></h3>
801850
<ul>
802851
<li>Clarified processing model.</li>
803852
<li>Clarified interaction with floats.</li>

0 commit comments

Comments
 (0)