8000 [css-shapes] Added a margin-box example · w3c/csswg-drafts@3b4621e · GitHub
Skip to content

Commit 3b4621e

Browse files
astearnsastearns
committed
[css-shapes] Added a margin-box example
1 parent eb5e1eb commit 3b4621e

5 files changed

Lines changed: 107 additions & 3 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</p>
6464
<h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
6565
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
66-
<span class=dt-updated><span class=value-title title=20140103>3 January 2014</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20140104>4 January 2014</span></span></span></h2>
6767
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
6868
<dt>Feedback:</dt>
6969
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -767,6 +767,36 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
767767
</div>
768768
</div>
769769

770+
<div class=example>
771+
772+
<p> The difference between normal float wrapping
773+
and wrapping around the shape defined
774+
by the margin-box value is that
775+
the margin-box shape includes corner shaping.
776+
Take the 100px square with 10px padding,
777+
border and margins,
778+
but with a border-radius of 60px.
779+
If you make a left float out of it,
780+
content normally wraps in this manner:
781+
782+
<div class=figure>
783+
<img alt="Text wrapping around float with no shape" src=images/normal-wrap.png>
784+
<p class=caption>Normal float wrapping</p>
785+
</div>
786+
787+
<p> If you add a margin-box shape to the float,
788+
then content wraps around the rounded margin-box corners.
789+
790+
<pre> <code class=css>
791+
shape-outside: margin-box;
792+
</code>
793+
</pre>
794+
<div class=figure>
795+
<img alt="Text wrapping around float with margin-box shape" src=images/margin-box-wrap.png>
796+
<p class=caption>Float wrapping with margin-box</p>
797+
</div>
798+
</div>
799+
770800
<h2 class="heading settled heading" data-level=6 id=declaring-shapes><span class=secno>6 </span><span class=content>
771801
Declaring Shapes</span><a class=self-link href=#declaring-shapes></a></h2>
772802

@@ -976,7 +1006,8 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
9761006
<h3 class="no-num heading settled heading" id=20131203><span class=content>
9771007
Since <a href=http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/>December 3rd 2013</a></span><a class=self-link href=#20131203></a></h3>
9781008
<ul>
979-
<li>change auto to none for shape-outside</li>
1009+
<li>Added a margin-box example</li>
1010+
<li>Change auto to none for shape-outside</li>
9801011
<li>Defined shape-box instead of redefining box</li>
9811012
<li>Clarified that shape from image may produce more than one path</li>
9821013
</ul>

‎css-shapes/Overview.src.html‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -654,6 +654,38 @@ <h2 id="shapes-from-box-values">
654654
</div>
655655
</div>
656656

657+
<div class="example">
658+
659+
The difference between normal float wrapping
660+
and wrapping around the shape defined
661+
by the margin-box value is that
662+
the margin-box shape includes corner shaping.
663+
Take the 100px square with 10px padding,
664+
border and margins,
665+
but with a border-radius of 60px.
666+
If you make a left float out of it,
667+
content normally wraps in this manner:
668+
669+
<div class="figure">
670+
<img alt="Text wrapping around float with no shape" src="images/normal-wrap.png"/>
671+
<p class="caption">Normal float wrapping</p>
672+
</div>
673+
674+
If you add a margin-box shape to the float,
675+
then content wraps around the rounded margin-box corners.
676+
677+
<pre>
678+
<code class="css">
679+
shape-outside: margin-box;
680+
</code>
681+
</pre>
682+
683+
<div class="figure">
684+
<img alt="Text wrapping around float with margin-box shape" src="images/margin-box-wrap.png"/>
685+
<p class="caption">Float wrapping with margin-box</p>
686+
</div>
687+
</div>
688+
657689
<h2 id="declaring-shapes">
658690
Declaring Shapes</h2>
659691

@@ -898,7 +930,8 @@ <h2 class="no-num" id="change-log">
898930
<h3 class="no-num" id="20131203">
899931
Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/">December 3rd 2013</a></h3>
900932
<ul>
901-
<li>change auto to none for shape-outside</li>
933+
<li>Added a margin-box example</li>
934+
<li>Change auto to none for shape-outside</li>
902935
<li>Defined shape-box instead of redefining box</li>
903936
<li>Clarified that shape from image may produce more than one path</li>
904937
</ul>

‎css-shapes/examples/margin-box-edge.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<head>
3+
<title>Complex box edge example</title>
4+
<style>
5+
body {
6+
width: 300px;
7+
}
8+
.box-demo {
9+
width: 100px;
10+
height: 100px;
11+
background-clip: content-box;
12+
background-color: lightblue;
13+
border: solid black 10px;
14+
border-radius: 60px;
15+
padding: 10px;
16+
margin: 10px;
17+
float: left;
18+
-shape-outside: margin-box;
19+
}
20+
.margin-box {
21+
position: absolute;
22+
left: 8px;
23+
top: 8px;
24+
width: 140px;
25+
height: 140px;
26+
background-color: #B29BA3;
27+
border: solid #FFF7A5 10px;
28+
border-width: 10px;
29+
border-radius: 70px;
30+
z-index: -1;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div class="margin-box"></div>
36+
<div class="box-demo"></div>
37+
<p>With no shape, the text wraps around the normal rectangular float area</p>
38+
<!--<p>Using a margin-box shape, the text wraps using the margin's corner edges</p>-->
39+
</body>
40+
</html>

‎css-shapes/images/margin-box-wrap.png‎

18.5 KB
Loading

‎css-shapes/images/normal-wrap.png‎

17 KB
Loading

0 commit comments

Comments
 (0)