- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 24 Oct 2011 19:23:03 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv11216
Modified Files:
Exclusions.src.html Overview.html
Added Files:
Makefile alternate-spec-style.css style-toggle.js
Log Message:
Vincent's edits. Adding concept of wrapping context.
--- NEW FILE: style-toggle.js ---
(function() {
var defaultStyleText = 'default spec. style';
var additionalStyleText = "additional spec. style";
var toggle;
function toggleStyle() {
var st = document.getElementById('st');
if (st.getAttribute('disabled') === 'true') {
st.removeAttribute('disabled');
toggle.textContent = defaultStyleText;
} else {
st.setAttribute('disabled', 'true');
toggle.textContent = additionalStyleText;
}
}
window.onload = function() {
var divHead = document.getElementById('div-head');
toggle = document.createElement('a');
divHead.insertBefore(toggle, divHead.firstChild);
toggle.textContent = additionalStyleText;
toggle.setAttribute('class', 'toggle');
toggle.setAttribute('href', '#');
toggle.addEventListener("click", toggleStyle, false);
};
})();
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.html 21 Oct 2011 05:33:35 -0000 1.4
+++ Overview.html 24 Oct 2011 19:23:01 -0000 1.5
@@ -9,6 +9,9 @@
<link href=default.css rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
+ <link disabled=true href=alternate-spec-style.css id=st rel=stylesheet
+ title="additional spec styles" type="text/css">
+ <script src=style-toggle.js type="text/javascript"></script>
<style type="text/css">
.singleImgExample {
@@ -24,23 +27,37 @@
.example-table tr td img {
[...2073 lines suppressed...]
<tr>
- <th><a class=property href="#wrap0">wrap</a>
-
- <td><wrap-flow> || <wrap-margin> [ / <wrap-padding>]
-
- <td>see individual properties
-
- <td>block-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr>
<th><a class=property href="#wrap-flow">wrap-flow</a>
<td>auto | both | left | right | maximum | clear
--- NEW FILE: Makefile ---
# $Id: Makefile,v 1.1 2011/10/24 19:23:01 vhardy Exp $
#
# http://dev.w3.org/buildtools/css3-module-postprocessor/Makefile
#
# This is a makefile for generating output using the CSS3 module
# postprocessor. Details about that are here:
#
# http://www.w3.org/Style/Group/css3-src/bin/postprocess
#
# To use this makefile, you need to have the "make" and "curl"
# programs installed. If you are running a Windows/MS-DOS system,
# you can download the "make" and "curl" programs from here:
#
# http://gnuwin32.sourceforge.net/downlinks/make.php
# http://curl.haxx.se/dlwiz/?type=bin&os=Win32&flav=-&ver=2000/XP
#
# You also need to install either a .curlrc (*NIX/*BSD) or _curlrc
# (MS-DOS ) file in your HOME directory, with at minimum the
# following contents:
#
# user = foo:bar
#
# ...where "foo" and "bar" are your W3C username and password.
SOURCEFILE=Exclusions.src.html
OUTPUTFILE=Overview.html
PROCESSCGI=http://cgi.w3.org/member-bin/process.cgi
CURL=curl
CURLFLAGS=
# if you want to set a publication date other than today's date,
# invoke make like this: "make PUBDATE=2008-03-19"
PUBMSG=
PUBDATE=
USER=
W3C_CSS_DIR=~/work/W3C/cvs/dev.w3.org/csswg/css3-exclusions
all: $(OUTPUTFILE)
$(OUTPUTFILE): $(SOURCEFILE)
ifeq (,$(PUBDATE))
$(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI)
else
$(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI) -F date=$(PUBDATE)
endif
--- NEW FILE: alternate-spec-style.css ---
@import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
body {
font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
font-size: 16px;
width: 36em;
color: #2f2f2f;
line-height: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
color: #4f4f4f;
font-weight: bold;
}
h2, h3, h4, h5, h6 {
margin-top: 1.2em;
}
h1, h2, h3, h4, h5, h6, table, th, tr, td {
font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
}
h1+h2 {
font-weight: normal;
margin-top: 0em;
margin-bottom: 2em;
}
h1 {
margin-bottom: 0em;
line-height: 1em;
font-size: 180%;
}
a, a:visited, a:link, :link {
color: #46A4E9;
}
a[href]:hover {
color: #005A9C;
background-color: white;
}
.secno {
color: #3f3f3f;
}
.toc a {
color: #3f3f3f;
}
.toc a:hover {
color: #46A4E9;
background-color: white;
}
.css, .property {
color: #46A4E9;
}
pre {
margin-left: 0em;
line-height: 1.4em;
}
pre, code {
font-family: Inconsolata, monospace;
font-size: 83%;
line-height: 1.4em;
}
code.xml {
color: #3f3f3f;
}
code > pre {
font-size: 100%;
}
pre > code {
font-size: 100%;
}
div.example:before {
color: #808080 ;
background: none;
border: none;
text-transform: none;
font-weight: bold;
width: 100%;
display: block;
}
div.example {
background: none;
padding: 0.75em;
margin: 1em 0;
border-top: thin solid rgba(0, 0, 0, 0.1);
border-bottom: thin solid rgba(0, 0, 0, 0.1);
border-left: none;
position: relative;
clear: both;
}
div.example {
color: #303030
}
div.issue {
color: red;
margin-top: 1em;
padding: 0.5em;
border-left: 1ex solid red;
padding-left: 1em;
position: relative;
color: gray;
padding-right: 10em;
background: none;
}
div.issue:before {
content: "Issue " counter(issue);
background: none;
padding: 0;
margin: 0 0 0.7em 0;
border: none;
font-weight: bold;
color: gray;
display: block;
}
.issue {
counter-increment: issue;
}
table.propdef {
background: none;
border-left: none;
}
table.propdef td, table.propdef-extra td,
table.descdef td, table.propdef th,
table.propdef-extra th, table.descdef th {
padding: 0.5em;
vertical-align: baseline;
border-bottom: thin solid rgba(0, 0, 0, 0.2);
}
table.propdef > tbody > tr:last-child th,
table.propdef-extra > tbody > tr:last-child th,
table.descdef > tbody > tr:last-child th,
table.propdef > tbody > tr:last-child td,
table.propdef-extra > tbody > tr:last-child td,
table.descdef > tbody > tr:last-child td {
border-bottom: thin solid rgba(0, 0, 0, 0.2);
}
table.propdef tr:first-child td, table.propdef tr:first-child th {
border-top: thin solid rgba(0, 0, 0, 0.2);
}
table.propdef tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.02);
}
p.note {
border: none;
border-left: 1ex solid rgba(0, 0, 0, 0.1);
background: none;
}
div.note {
margin-top: 1em;
padding: 0.5em;
border: none;
border-left: 1ex solid rgba(0, 0, 0, 0.1);
padding-left: 1em;
padding-bottom: 1em;
position: relative;
background: none;
}
div.note:before {
content: "Note " counter(note);
background: none;
padding: 0;
margin: 0 0 0.7em 0;
border: none;
font-weight: bold;
display: block;
}
div.note p {
color: black;
}
div.note p:before {
color: #1C75BC;
}
.note {
counter-increment: note;
}
pre.code {
margin-top: 1em;
padding: 0.5em;
border-left: 1ex solid gray;
padding-left: 1em;
position: relative;
background: #F0F0F0;
margin-left: 0px;
}
pre.idl {
background: #f4f4f4;
padding: 0.5em;
margin: 1em 0;
border: thin solid #999;
position: relative;
clear: both;
}
.swatch-list li {
list-style: none;
}
.swatch-list {
display: inline-block;
}
#region_styling_img_2 {
float: left;
margin-bottom: 1em;
}
.swatch {
width: 1em;
height: 1em;
border: 1px solid black;
display: inline-block;
margin-right: 0.5em;
margin-bottom: -0.25em;
margin-top: 0.5em;
}
#region-style-example p, #region-style-example pre {
clear: both;
}
#region_styling_illustration {
margin: 0px auto;
width: 70ex;
}
.event-desc td, .event-desc th {
border: 1px solid gray;
}
.event-desc th {
text-align: left;
padding: 0.5ex;
}
.resolved, .moved, .stale {
display: none;
}
p {
margin-bottom: 1em;
}
table.values-desc {
border-collapse: collapse;
margin-top: 0.5em;
}
.values-desc td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.5em;
}
.values-desc td:first-child {
font-weight: bold;
}
.values-desc tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.02);
}
.values-desc th {
font-weight: bold;
}
table.values-desc {
border-left: none;
padding-left: 1ex;
}
.figure {
page-break-inside: avoid;
}
#default-fragment-shader:before {
content: "Default fragment shader";
}
#default-vertex-shader:before {
content: "Default vertex shader";
}
.table .caption::before {
counter-increment: table;
content: '';
}
span.highlight {
color: #46A4E9;
}
span.highlight2 {
color: #E00000;
}
span.fade {
color: rgba(0, 0, 0, 0.4);
}
table.values-desc td:first-child {
min-width: 28ex;
}
#div-head > h1:before {
content: '';
background-image: url(http://www.w3.org/2008/site/images/logo-w3c-mobile-lg);
background-color: gray;
display: block;
width: 90px;
height: 53px;
position: absolute;
margin-left: -120px;
border-radius: 0.2em;
-webkit-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
-o-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
}
img[alt='W3C'] {
display: none;
}
Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Exclusions.src.html 21 Oct 2011 05:33:35 -0000 1.4
+++ Exclusions.src.html 24 Oct 2011 19:23:01 -0000 1.5
@@ -6,6 +6,12 @@
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" />
+
+ <link id="st" href="alternate-spec-style.css" rel="stylesheet"
+ type="text/css" disabled="true" title="additional spec styles">
+
+ <script type="text/javascript" src="style-toggle.js"></script>
+
<style type="text/css">
.singleImgExample {
display: block;
@@ -20,13 +26,27 @@
.example-table tr td img {
width: 90%;
}
+
+ a.toggle {
+ position: absolute;
+ top: 0.5em;
+ right: 0.5em;
+ font-size: smaller;
+ color: gray;
+ opacity: 0.2;
+ }
+
+ a.toggle:hover {
+ opacity: 1;
+ color: #46A4E9;
+ }
</style>
</head>
<body>
- <div class="head">
+ <div id="div-head" class="head">
<!--logo-->
- <h1 id="css-exclusions-module">CSS Exclusions and Shapes Module Level 1</h1>
+ <h1 id="css-exclusions-module">CSS exclusions and shapes module level 1</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
@@ -44,15 +64,22 @@
</div>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
+
+ <p><em>IN PROGRESS - NOT READY FOR REVIEW</em></p>
+
<p>
- CSS Exclusions extend the concept of CSS floats (see [[CSS21]]): they provide the
- ability to exclude arbitrary areas around which inline content can flow. Unlike
- CSS floats, exclusions can be applied to positioned elements.
+ CSS exclusions define arbitrary areas around which inline content can flow.
+ Unlike CSS floats, which they extend, CSS exclusions can be positioned with any
+ CSS positioning schemes.
</p>
<p>
- CSS Shapes allow changing the geometric shape of elements used for wrapping inline
- flow content outside or inside the element. Combining CSS Exclusions and CSS Shapes
- allows sophisticated layouts, for example having content flow into and/or around
+ CSS Shapes control the geometric shapes used for wrapping inline
+ flow content outside or inside an element.
+
+ </p>
+ <p>
+ Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
+ for example having content flow into and/or around
circles or other, arbitrarily complex shapes.
</p>
<h2 class="no-num no-toc" id="status">Status of this document</h2>
@@ -65,81 +92,85 @@
<h2 id="intro">Introduction</h2>
<p><em>This section is not normative.</em></p>
<p>
- We start by defining features that allow inline flow content to wrap around outside
- the border box of elements. The term "exclusion" refers to elements whose exterior
- is used to wrap inline flow content.
+ The exclusions section of this specification defines features that allow inline flow
+ content to wrap around outside the <span>exclusion area</span> of elements.
</p>
<p>
- Further, shapes allow changing the geometry of the contour used for wrapping inline
- flow content outside or inside an element.
+ The shapes section of the specification defines properties to control the geometry of
+ an element's <span>exclusion area</span> as well as the geometry used for wrapping
+ an element's inline flow content.
</p>
- <h3 id="placement">Module Interactions</h3>
- <p>This module does not replace or extend any prior CSS modules.</p>
- <!-- End section "Modules Interactions" -->
-
- <h3 id="values">Values</h3>
- <p>
- This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">
- CSS property definition conventions</a> from [[!CSS21]]. Value types not defined
- in this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS
- modules may expand the definitions of these value types: for example [[CSS3COLOR]],
- when combined with this module, expands the definition of the <color> value
- type as used in this specification.</p>
+ <h2 id="definitions">Definitions</h2>
+
+ <dfn>Exclusion element</dfn>
+
<p>
- In addition to the property-specific values listed in their definitions, all properties
- defined in this specification also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">
- inherit</a> keyword as their property value. For readability it has not been
- repeated explicitly.
+ An element that defines an <span>exclusion area</span>s for other elements. The 'wrap-flow' property
+ is used to make an element an exclusion element. An exclusion element contributes its
+ <span>exclusion area</span> to its <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a>'s
+ <span>wrapping context</span>
</p>
-
- <h3 id="definitions">Definitions</h3>
- <dfn>Exclusion Area</dfn>
+
+ <dfn>Exclusion area</dfn>
<p>
The area used for excluding inline flow content around an exclusion element. By default the
- area is equivalent to the [[!CSS21]] border box. This specification modifies this
- definition by the introduction of 'shape-outside' property.
+ area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">border box</a>.
+ This specification's 'shape-outside' property can define arbitrary, non-rectangular exclusion areas.
</p>
- <dfn>Content Area</dfn>
+ <dfn>Wrapping context</dfn>
+
<p>
- The area used for layout of the inline flow content of an element. By default the
- area is equivalent to the [[!CSS21]] content box. This specification modifies this
- definition by the introduction of 'shape-inside' property.
+ An element's wrapping context holds the collection of areas that an element should 'wrap around'
+ when laying out its inline flow content. An element will wrap its content in the area that
+ correspond to the substraction of its wrapping context shapes from its own <span>content area</span>.
</p>
-
- <h2 id="exclusions">Exclusions</h2>
+
<p>
- Exclusions are elements that will be avoided by the user agent when laying out inline
- flow content outside of them. The exclusion area is computed relative to the 'exclusion
- area' of the element on which the exclusion is specified. The shape properties can
- be used to change the shape of exclusions. Exclusions establish a wrapping context
- for all inline flow content descendants of their containing block.
+ An element inherit its
+ <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a>'s
+ wrapping context unless it specifically
+ resets it using the 'wrap-through' property.
</p>
- <p class="note">
- Note, 'outside' is referring to content in DOM that is not a descendant of the element
- on which the 'wrap-flow' was specified. 'Inside' is referring to the content descendants
- of an element.
+
+ <dfn>Content area</dfn>
+ <p>
+ The area used for layout of the inline flow content of an element. By default the
+ area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>.
+ This specification's 'shape-inside' property can define arbitrary, non-rectangular content areas.
</p>
-
- <h3 id="declaring-exclusions">Declaring Exclusions</h3>
+
+ <dfn title="outside-inside">Outside and inside</dfn>
+
<p>
- To define an element as an exclusion, the 'wrap-flow' property must be specified
- to a value other than 'auto'.
+ In this specification, ‘outside’ refers to DOM content that is not a descendant of an element
+ while 'inside’ refers to the element's descendants.
</p>
- <h4 id="wrap-flow-property">The 'wrap-flow' Property</h4>
+ <h2 id="exclusions">Exclusions</h2>
<p>
- Setting the 'wrap-flow' property to 'both', 'left', 'right', 'maximum' or 'clear' enables the
- exclusion inline flow content wrapping features, causing outside content to wrap
- around its exclusion area. The initial value for this property is 'auto', in this case
- the element will not be considered for wrapping inline flow content unless the 'float'
- property is specified to a value other than 'none'.
+ Exclusion elements define exclusion areas that contribute to their containing block's
+ wrapping context. As a consequence, exclusions impact the layout of their containing block's
+ descendants.
+ <p>
+ <p>
+ Elements layout their inline content in their <span>content area</span> and avoid the
+ areas in their associated wrapping context. If the element is itself an exclusion, it
+ does not wrap around its own exclusion shape and the impact of other exclusions on other
+ exclusions is controlled by the 'z-index' property as explained in the
+ <a href="#exclusions-order">exclusions order</a> section.
+ </p>
+ The shape properties can is used to change the shape of exclusions.
</p>
+
+ <h3 id="declaring-exclusions">Declaring exclusions</h3>
<p>
- The element will be considered as an exclusion for all inline flow content descendants
- of the exclusions' containing block.
+ An element becomes an exclusion when its 'wrap-flow' property has a computed value other than
+ 'auto'.
</p>
+
+ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
<table class="propdef">
<tr>
<th>Name:</th>
@@ -181,50 +212,65 @@
<dd>
For floats an exclusion is created, for all other elements an exclusion is not created.
</dd>
- </dl>
- <dl>
<dt><dfn title="'wrap-flow'!!'both'">both</dfn></dt>
<dd>
- Wraps the outside inline flow content on all sides of the exclusion.
+ Inline flow content can flow on all sides of the exclusion.
</dd>
- </dl>
- <dl>
<dt><dfn title="'wrap-flow'!!'left'">left</dfn></dt>
<dd>
- Wraps the outside inline flow content on the left side of the exclusion leaving
+ Inline flow content can wrap on the left side of the exclusion but must leave
the area to the right of the exclusion empty.
</dd>
- </dl>
- <dl>
<dt><dfn title="'wrap-flow'!!'right'">right</dfn></dt>
<dd>
- Wraps the outside inline flow content on the right side of the exclusion leaving
+ Inline flow content can wrap on the right side of the exclusion but must leave
the area to the left of the exclusion empty.
</dd>
- </dl>
- <dl>
<dt><dfn title="'wrap-flow'!!'maximum'">maximum</dfn></dt>
<dd>
- Wraps the outside inline flow content on the larger of the left or right of the
- exclusions leaving the opposite area empty.
+ Inline flow content can wrap on the side of the exclusion with the largest
+ available space for the given line, and must leave the other side of the exclusion
+ empty..
</dd>
- </dl>
- <dl>
<dt><dfn title="'wrap-flow'!!'clear'">clear</dfn></dt>
<dd>
- Wraps the outside inline flow content on top and bottom of the exclusion only leaving
+ Inline flow content can only wrap on top and bottom of the exclusion and must leave
the areas to the left and right of the exclusion empty.
</dd>
</dl>
- Note, floats are considered exclusions for compatibility and 'wrap-flow' computes
- to 'auto' when the 'float' property is anything other than 'clear'.
+ <p>
+ Setting the 'wrap-flow' property to 'both', 'left', 'right', 'maximum' or 'clear' on an
+ element makes that element an <span>exclusion element</a>. It's <span>exclusion shape</span>
+ is contributed to its containing block's wrapping context, causing the containing block's descendants
+ to wrap around its exclusion area.
+ </p>
+ <p>
+ The initial value for this property is 'auto'.
+ </p>
+ <p>
+ When the property's computed value is 'auto', the element does not become an
+ <span>exclusion element</span> unless its 'float'
+ property computed value is not 'none'. In that case, the element contributes its
+ 'border box' to its containing block's <span>wrapping context</span> and content
+ flows around it according to the 'clear' property.
+ </p>
+ <p>
+ The element will be considered as an exclusion for all inline flow content descendants
+ of the exclusions' containing block.
+ </p>
+ <div class="issue">
+ What is the expected behavior if we have two positioned exclusions at the same height position,
+ but with conflicting 'wrap-flow' values. For example, two circles, one with wrap-flow: right and
+ one with wrap-flow: left?
+ </div>
+
<div class="example">
<p>
The 'wrap-flow' property values applied to an absolutely positioned element.
</p>
-<pre><code class="html">
+<code class="html"><pre>
<style type="text/css">
#exclusion {
position: absolute;
@@ -234,10 +280,10 @@
</style>
<div style=”position: relative; border: 1px solid black;”>
- <div id=”exclusion”> Donec metus messa, mollis...</div>
+ <div id=”exclusion”>Donec metus messa, mollis...</div>
Lorem ipsum dolor sit amet...
</div>
-</code></pre>
+</pre></code>
<table class="example-table">
<tr>
<td><code class="html">#exclusion{ wrap-flow: auto; }</code></td>
@@ -268,6 +314,17 @@
<!-- End section "wrap-flow Property" -->
<!-- End section "Declaring Exclusions" -->
+ <div class="issue">
+ Could we rework the examples with an image that looks more like:
+
+ <img src="images/alternate-example.png" width="50%" />
+
+ </div>
+
+ <div class="issue">
+ Could we break the 'maximum' example into two pieces?
+ </div>
+
<h3 id="scope-and-effect-of-exclusions">Scope and Effect of Exclusions</h3>
<p>
An exclusion affects the inline flow content descended from the exclusion's containing
@@ -367,13 +424,19 @@
<h3 id="propagation-of-exclusions">Propagation of Exclusions</h3>
<p>
- Exclusions can be used to wrap all inline flow content within all descendants of
- the containing block of the exclusion. In order to prevent wrapping of inline flow
- content on any element around exclusions, the 'wrap-through' property can be used.
- Setting the 'wrap-through' property to 'none' will prevent the wrapping of inline
- flow content around exclusion elements defined outside. The 'wrap-through' property
- does not have an effect over exclusions contained inside the element.
+ By default, an element inherits its parent <span>wrapping context</span>. In other words
+ it is subject to the exclusions defined <span title="outside-inside">outside</sapn> the element.
</p>
+ <p>Setting the 'wrap-through' property to 'none' prevents an element from inheriting its parent
+ wrapping context. In other words, exclusions defined 'outside' the element, have not effect
+ on the element's children layout.
+ </p>
+ <div class="note">
+ Exclusions defined by an element's descendants still contribute to their containing block's
+ <span>wrapping context</span>. If that containing block is a child of an element with 'wrap-through'
+ set to none, or the element itself, then exclusion still have an effect on the children of that
+ containing block element.
+ </div>
<h4 id="wrap-through-property">The 'wrap-through' Property</h4>
<table class="propdef">
@@ -415,13 +478,17 @@
<dl>
<dt><dfn title="'wrap-through'!!'wrap'">wrap</dfn></dt>
<dd>
- Allows wrapping around exclusions defined outside the element.
+ The element inherits its parent node's <span>wrapping context</span>. Its descendant
+ inline content wraps around exclusions defined <span title="outside-inside">outside</span>
+ the element.
</dd>
</dl>
<dl>
<dt><dfn title="'wrap-through'!!'none'">none</dfn></dt>
<dd>
- Disables wrapping around exclusions defined outside the element.
+ The element does not inherit its parent node's <span>wrapping context</span>. Its
+ descendants are only subject to exclusion shapes defined <span title="outside-inside">inside</span>
+ the element.
</dd>
</dl>
<div class="example">
@@ -447,7 +514,7 @@
<img class="singleImgExample" src="images/exclusion_wrap_through.png" alt="Example rendering of wrap-through: wrap | none" />
</div>
<!-- End section "wrap-through property" -->
-
+ <!--
<h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
<table class="propdef">
<tr>
@@ -487,17 +554,24 @@
The 'wrap' property is a shorthand property for setting the exclusions properties
at the same place in the style sheet.
</p>
+ -->
<!-- End section "wrap shorthand property" -->
<!-- End section "Propagation of Exclusions" -->
- <h3 id="order-of-exclusions">Order of Exclusions</h3>
+ <h3 id="exclusions-order">Exclusions order</h3>
<p>
- The ordering of exclusions follows the visual order. Exclusions are applied in reverse
+ Exclusions follow the visual order. Exclusions are applied in reverse
to the document order in which they are defined. The last exclusion appears on top
of all other exclusion, thus it affects the inline flow content of all other preceding
exclusions or elements descendant of the same containing block. To change the ordering
of positioned exclusions, z-index can be used.
</p>
+
+ <div class="issue">We need a reference to the 'visual order' definition.</div>
+
+ <div class="issue">z-index only applies to positioned elements. Since any element can
+ be an exclusion and since they can overlap, should we say that the order of a statically positioned
+ exclusion cannot be controlled?</div>
<div class="example">
<p>Ordering of exclusions.</p>
@@ -533,7 +607,7 @@
</tr>
</table>
-
+ <div class="issue">Can we have the same example with a white background?</div>
</div>
<!-- End section "Order of Exclusions" -->
@@ -562,22 +636,26 @@
block calculated in the first layout pass.
</p>
<p>
- Since exclusions can be positioned on all levels of nested elements, if layout is
+ Exclusions can be positioned on all levels of nested elements. If layout is
restarted on every level of nesting, the time to complete layout will be exponential.
- To avoid such multiplicity of layout passes, the restart of the second layout pass
+ To avoid multiple layout passes, the restart of the second layout pass
should be scoped to the top-most containing block of exclusions. Similarly, restarting
layout for the entire document is not necessary unless there are exclusions whose
containing block is the initial containing block.
</p>
+
+ <div class="issue">Should we move this at the end in an 'implementation note' section?</div>
+
<!-- End section "Processing Model of Exclusions" -->
<!-- End section "Exclusions" -->
<h2 id="shapes">Shapes</h2>
<p>
- Shapes are used to define arbitrary geometric contours around which inline flow
+ Shapes define arbitrary geometric contours around which or into which inline flow
content flows. There are two different types of shapes – 'outside' and 'inside'.
- The outside shape is used for wrapping inline flow content around exclusions. The
- inside shape is used for wrap inline flow content of <span>flow container</span> elements.
+ The outside shape defines the <span>exclusion area</span> for an <span>exclusion element</span>.
+ The inside shape defines an element's <span>content shape</span> and the element's inline
+ content will flow within that shape.
</p>
<dfn>Flow Container</dfn>
@@ -600,7 +678,7 @@
wrap-flow: both;
position: absolute;
shape-outside: circle(50% 50% 50%);
- border: 3px solid red;
+ border: 1px solid red;
}
</style>
@@ -610,16 +688,16 @@
</div>
</code></pre>
<img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model." />
+
+ <div class="issue">Could we remove the outside dark border and use a 1px red outline?</div>
</div>
<h3 id="shapes-from-svg-syntax">Shapes from SVG Syntax</h3>
<p>
- Shapes can be specified using the SVG style basic shapes as defined by the SVG Shapes.
- When using the SVG syntax for defining shapes, all the lengths can be expressed
- in percentages resolved from the border box of the element. The (x,y) coordinates
- are relative to the element's border box. When defining shapes using percentages,
- the border box of the element must always be fully known in advance.
+ Shapes can be specified using <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>.
</p>
+
+
<h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
The following SVG shapes are supported by the CSS shapes module.
<dl>
@@ -633,8 +711,6 @@
to round off the corners of the rectangle</li>
</ul>
</dd>
- </dl>
- <dl>
<dt>circle(cx, cy, r)</dt>
<dd>
<ul>
@@ -643,8 +719,6 @@
<li><strong>r</strong> - The radius of the circle. Note, cannot be expressed as a percentage.</li>
</ul>
</dd>
- </dl>
- <dl>
<dt>ellipse(cx, cy, rx, ry)</dt>
<dd>
<ul>
@@ -654,8 +728,6 @@
<li><strong>ry</strong> - The y-axis radius of the ellipse</li>
</ul>
</dd>
- </dl>
- <dl>
<dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)</dt>
<dd>
<ul>
@@ -671,45 +743,87 @@
<br>
</dd>
</dl>
+
+ <h4 id='referencing-svg-shapes'>Referencing SVG shapes</h4>
+
+ <p>An SVG shape can be referenced using the <code>url()</code> syntax. The shape can be
+ any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a> or a
+ <a href="http://www.w3.org/TR/SVG/paths.html">path element</a>.</p>
+
+ <p>In all cases, percentages are resolved from the border box of the element.</p>
+
+ <div class="example">
+ <code class="html"><pre>
+<style>
+.in-a-circle {
+ shape-inside: url(#circle_shape);
+}
- When a 'polygon' is not closed the user-agent will assume an additional vertex
- at the end.
+.in-a-path {
+ shape-inside: url(#path-shape);
+}
+
+</style>
+
+<svg ...>
+<circle id="circle_shape" cx="50%x" cy="50%" r="50%" />
+<path id="path-shape" d="..." />
+</svg>
+
+<div class="in-a-circle">...</div>
+<div class="in-a-path">...</div>
+ </pre></code>
+ </div>
+
+ <p>When using the SVG syntax or referencing SVG elements to define shapes, all the lengths expressed
+ in percentages are resolved from the border box of the element. The coordinate system for the
+ shape has its origin on the top-left corder of the border box with the x-axis running to the right
+ and the y-axis running downwards. If the SVG element uses unitless coordinate values, they are equivalent
+ to using 'px' units. When defining shapes using percentages,
+ the border box of the element must always be fully known in advance.</p>
+
+ <div class="issue">We need to clarify what this last sentence means.</div>
+
<!-- End section "Shapes from SVG Syntax -->
<h3 id="shapes-from-image">Shapes from Image</h3>
<p>
Another way of defining shapes is by specifying a source image whose alpha channel
- is used to compute the outside-shape. When shapes are computed based on image, all
+ is used to compute the inside or outside shape. When shapes are computed from an image, all
values of the 'background-image' property can be applied.
</p>
+
+ <div class="issue">Need to clarify what we mean by this last sentence.</div>
+
<p>
The shape is computed to be the path that encloses the area where the opacity of
the specified image is greater than the 'shape-image-threshold' value. If the 'shape-image-threshold'
is not specified, the initial value to be considered is 0.5.
</p>
+
<p class="note">
- Note, images can also define cavities and inline flow content should wrap inside
+ Note, images can define cavities and inline flow content should wrap inside
them. In order to avoid that, another exclusion element can be overlaid.
</p>
+
+ <div class="issue">Need to say how content clears shapes with cavities</div>
+
<!-- End section "Shapes from image" -->
<h3 id="declaring-shapes">Declaring Shapes</h3>
<p>
- Shapes can be declared using the 'shape-outside', 'shape-inside' or a combination
- for both properties. Using the 'shape-outside' property changes the geometry of
- default shape used for exclusions, which is the 'exclusion area' of the element.
- The outside shape has visual effect when the element is an exclusion (otherwise
- the property has no affect). Using the 'shape-inside' property, the content box
- of an element is redefined and inline flow content wraps into that shape.
+ Shapes are declared with the 'shape-outside' or 'shape-inside' properties.
+ The 'shape-outside' property changes the geometry of an <span>exclusion element</span>'s
+ <span>exclusion are</span>. If the element is not an <span>exclusion element</span>
+ (see the 'wrap-flow' property), then the 'shape-outside' property has no effect.
</p>
-
- <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
<p>
- The 'shape-outside' allows advance layout results such as inline flow content wrapping
- around non-rectangular shapes. The property is used to modify the shape affecting
- the surrounding inline flow from a rectangular border box to an arbitrary geometry.
+ The 'shape-inside' property defines an element's <span>content area</span> and
+ the element's inline flow content wraps into that shape.
</p>
+ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
+
<table class="propdef">
<tr>
<th>Name:</th>
@@ -717,7 +831,7 @@
</tr>
<tr>
<th>Value:</th>
- <td><var>auto</var> | <var><shape></var> | <var><image></var></td>
+ <td><var>auto</var> | <var><shape></var> | <var><uri></var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -741,7 +855,7 @@
</tr>
<tr>
<th>Computed value:</th>
- <td>computed lengths for <shape>, the absolute URI for <image>, otherwise as specified</td>
+ <td>computed lengths for <shape>, the absolute URI for <uri>, otherwise as specified</td>
</tr>
</table>
@@ -758,10 +872,14 @@
</dd>
</dl>
<dl>
- <dt><dfn title="'shape-outside'!!'<image>'"><image></dfn></dt>
+ <dt><dfn title="'shape-outside'!!'<uri>'"><uri></dfn></dt>
<dd>
- The shape is extracted and computed based on the alpha channel of the specified
- image.
+ If the <uri> references an SVG shape element, that element defines the shape.
+ Otherwise, if the <uri> references an image, the shape is extracted and computed
+ based on the alpha channel of the specified image.
+
+ If the <uri> does not reference an SVG shape element or an image, the
+ effect is as if the value 'auto' had been specified.
</dd>
</dl>
<!-- End section "The shape-outside Property" -->
@@ -779,7 +897,7 @@
</tr>
<tr>
<th>Value:</th>
- <td><var>outside-shape</var> | <var>auto</var> | <var><shape></var> | <var><image></var></td>
+ <td><var>outside-shape</var> | <var>auto</var> | <var><shape></var> | <var><uri></var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -803,7 +921,7 @@
</tr>
<tr>
<th>Computed value:</th>
- <td>computed lengths for <shape>, the absolute URI for <image>, otherwise as specified</td>
+ <td>computed lengths for <shape>, the absolute URI for <uri>, otherwise as specified</td>
</tr>
</table>
<p>The values of this property have the following meanings:</p>
@@ -827,10 +945,14 @@
</dd>
</dl>
<dl>
- <dt><dfn title="'shape-inside'!!'<image>'"><image></dfn></dt>
+ <dt><dfn title="'shape-inside'!!'<uri>'"><image></dfn></dt>
<dd>
- The shape is extracted and computed based on the alpha channel of the specified
- image.
+ If the <uri> references an SVG shape element, that element defines the shape.
+ Otherwise, if the <uri> references an image, the shape is extracted and computed
+ based on the alpha channel of the specified image.
+
+ If the <uri> does not reference an SVG shape element or an image, the
+ effect is as if the value 'auto' had been specified.
</dd>
</dl>
<!-- End section "The shape-inside property" -->
@@ -890,6 +1012,7 @@
</dd>
</dl>
<!-- End section "The shape-image-threshold property" -->
+ <!--
<h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
<table class="propdef">
@@ -942,6 +1065,8 @@
</code></pre>
</div>
<p class="issue">The example above must be finished.</p>
+
+ -->
<!-- End section "Shape Shorthand property -->
<!-- End section "Declaring Shapes" -->
<!-- End section "Shapes" -->
Received on Monday, 24 October 2011 19:23:10 UTC