Skip to content

Commit c9633ca

Browse files
astearnsastearns
committed
[css-shapes] Add illustrated example of new positioning
1 parent d8e0087 commit c9633ca

4 files changed

Lines changed: 86 additions & 7 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
rel=dcterms.rights>
1313
<meta content="CSS Shapes Module Level 1" name=dcterms.title>
1414
<meta content=text name=dcterms.type>
15-
<meta content=2013-06-22 name=dcterms.date>
15+
<meta content=2013-06-27 name=dcterms.date>
1616
<meta content="Vincent Hardy" name=dcterms.creator>
1717
<meta content="Rossen Atanassov" name=dcterms.creator>
1818
<meta content="Alan Stearns" name=dcterms.creator>
@@ -55,14 +55,14 @@
5555

5656
<h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
5757

58-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 June 2013</h2>
58+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 June 2013</h2>
5959

6060
<dl>
6161
<dt>This version:
6262

6363
<dd><a
6464
href="http://dev.w3.org/csswg/css-shapes/">http://dev.w3.org/csswg/css-shapes/</a></dd>
65-
<!--<dd><a href="http://dev.w3.org/csswg/css-shapes/">http://www.w3.org/TR/2013/WD-css-shapes-20130622/</a></dd>-->
65+
<!--<dd><a href="http://dev.w3.org/csswg/css-shapes/">http://www.w3.org/TR/2013/WD-css-shapes-20130627/</a></dd>-->
6666

6767
<dt>Latest version:
6868

@@ -339,7 +339,7 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
339339

340340
<p>
341341

342-
<pre><code class=html>
342+
<pre><code class=css>
343343
shape-outside: polygon(0 0, 500% 500%, 0 500%);
344344
</code></pre>
345345
</div>
@@ -352,11 +352,29 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
352352

353353
<p>
354354

355-
<pre><code class=html>
355+
<pre><code class=css>
356356
shape-outside: rectangle(0,0,0%,0%);
357357
</code></pre>
358358
</div>
359359

360+
<div class=example>
361+
<p> The following styling creates a shape much smaller than the float's
362+
content area, and adds a margin-top to the float. In the picture, the
363+
shape is rendered in blue, the content area in mauve, and the margin area
364+
in yellow. The inline content only wraps around the shape.
365+
366+
<pre><code class=html>
367+
#float-left {
368+
shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
369+
float: left;
370+
width: 100px;
371+
height: 100px;
372+
margin-top: 20px;
373+
}
374+
</code></pre>
375+
<img alt="Adding margin-top to a float with a small shape-outside"
376+
class=singleImgExample src="images/float-margin-example.png"></div>
377+
360378
<h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
361379
Shapes</h3>
362380

‎css-shapes/Overview.src.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
227227
adding this shape to the left float above
228228
would result in the same rendering.
229229
<p>
230-
<pre><code class="html">
230+
<pre><code class="css">
231231
shape-outside: polygon(0 0, 500% 500%, 0 500%);
232232
</code></pre>
233233
</div>
@@ -243,11 +243,27 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
243243
will be constrained
244244
by the float's left margin edge.
245245
<p>
246-
<pre><code class="html">
246+
<pre><code class="css">
247247
shape-outside: rectangle(0,0,0%,0%);
248248
</code></pre>
249249
</div>
250250

251+
<div class="example">
252+
<p>
253+
The following styling creates a shape much smaller than the float's content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area in mauve, and the margin area in yellow. The inline content only wraps around the shape.
254+
</p>
255+
<pre><code class="html">
256+
#float-left {
257+
shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
258+
float: left;
259+
width: 100px;
260+
height: 100px;
261+
margin-top: 20px;
262+
}
263+
</code></pre>
264+
<img class="singleImgExample" src="images/float-margin-example.png" alt="Adding margin-top to a float with a small shape-outside"/>
265+
</div>
266+
251267
<h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
252268
<p>
253269
Shapes can be specified using

‎css-shapes/examples/float-margin-example.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>shapes with margins example</title>
6+
<!-- lots of hacks to get this to work with the old shape positioning -->
7+
<style>
8+
body {
9+
width: 300px;
10+
}
11+
.shape {
12+
float: left;
13+
width: 100px;
14+
height: 120px;
15+
background-color: lightblue;
16+
-webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 120px, 0px 120px);
17+
-webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);
18+
}
19+
p {
20+
margin: 0;
21+
}
22+
.content-area {
23+
position: absolute;
24+
top: 28px;
25+
width: 100px;
26+
height: 100px;
27+
background-color: #B29BA3;
28+
z-index: -1;
29+
}
30+
.margin-area {
31+
position: absolute;
32+
width: 100px;
33+
height: 20px;
34+
background-color: #FFF7A5;
35+
z-index: -1;
36+
}
37+
</style>
38+
</head>
39+
<body lang="en">
40+
<div class="margin-area"></div>
41+
<div class="content-area"></div>
42+
<div class="shape"></div>
43+
<p>The float is positioned using the margin box. Inline content will flow through the margins of a float with shape-outside, and if the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the shape and the far margin edge.</p>
44+
</body>
45+
</html>

‎css-shapes/images/float-margin-example.png‎

49.3 KB
Loading

0 commit comments

Comments
 (0)