- From: Rossen Atanassov via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 21 Oct 2011 05:33:38 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv17968
Modified Files:
Exclusions.src.html Overview.html
Log Message:
Added a Definitions section used for defining 'exclusion area' and 'content area' - concepts used in the rest of the spec.
A number of small editorial, spelling and grammar fixes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Overview.html 18 Oct 2011 04:34:40 -0000 1.3
+++ Overview.html 21 Oct 2011 05:33:35 -0000 1.4
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
@@ -33,14 +33,14 @@
<h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 1</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 October
2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-exclusions-20111018/">http://www.w3.org/csswg/css3-exclusions/</a>
+ href="http://www.w3.org/TR/2011/ED-css3-exclusions-20111021/">http://www.w3.org/csswg/css3-exclusions/</a>
<dt>Latest version:
@@ -146,6 +146,9 @@
<li id=values-><a href="#values"><span class=secno>1.2.
</span>Values</a>
+
+ <li id=definitions-><a href="#definitions"><span class=secno>1.3.
+ </span>Definitions</a>
</ul>
<li id=exclusions-2.1.-declaring-exclusions-2.1><a
@@ -315,22 +318,44 @@
inherit</a> keyword as their property value. For readability it has not
been repeated explicitly.
+ <h3 id=definitions><span class=secno>1.3. </span>Definitions</h3>
+
+ <p id=exclusion-area-><dfn id=exclusion-area>Exclusion Area</dfn>
+
+ <p id=the-area-used-for-excluding-inline-flow-> The area used for excluding
+ inline flow content around an exclusion element. By default the area is
+ equivalent to the <a href="#CSS21"
+ rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> border box. This
+ specification modifies this definition by the introduction of ‘<a
+ href="#shape-outside"><code class=property>shape-outside</code></a>’
+ property.
+
+ <p id=content-area-><dfn id=content-area>Content Area</dfn>
+
+ <p id=the-area-used-for-layout-of-the-inline-f> The area used for layout of
+ the inline flow content of an element. By default the area is equivalent
+ to the <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+ content box. This specification modifies this definition by the
+ introduction of ‘<a href="#shape-inside"><code
+ class=property>shape-inside</code></a>’ property.
+
<h2 id=exclusions><span class=secno>2. </span>Exclusions</h2>
<p id=exclusions-are-elements-that-will-be-avo> 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 outside
- border box 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.
+ outside of them. The exclusion area is computed relative to the ‘<a
+ href="#exclusion-area"><code class=css>exclusion area</code></a>’ 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.
+
<p class=note id=note-outside-is-referring-to-content-in-> Note,
- ‘<code class=property>Outside</code>’ is referring to content
+ ‘<code class=property>outside</code>’ is referring to content
in DOM that is not a descendant of the element on which the ‘<a
href="#wrap-flow"><code class=property>wrap-flow</code></a>’ was
specified. ‘<code class=property>Inside</code>’ is referring
- to the content descendant of an element.
+ to the content descendants of an element.
<h3 id=declaring-exclusions><span class=secno>2.1. </span>Declaring
Exclusions</h3>
@@ -352,14 +377,14 @@
class=property>maximum</code>’ or ‘<code
class=property>clear</code>’ enables the exclusion inline flow
content wrapping features, causing outside content to wrap around its
- border box. The initial value for this property is ‘<code
+ exclusion area. The initial value for this property is ‘<code
class=property>auto</code>’, in this case the element will not be
considered for wrapping inline flow content unless the ‘<code
class=property>float</code>’ property is specified to a value other
- than ‘<code class=property>clear</code>’.
+ than ‘<code class=property>none</code>’.
- <p id=the-element-will-be-considered-an-exclus> The element will be
- considered an exclusion for all inline flow content descendent of the
+ <p id=the-element-will-be-considered-as-an-exc> The element will be
+ considered as an exclusion for all inline flow content descendants of the
exclusions' containing block.
<table class=propdef>
@@ -452,16 +477,17 @@
empty.
</dl>
- <p class=note id=note-floats-are-considered-exclusions-fo> Note, Floats are
- considered exclusions for compatibility and ‘<a
- href="#wrap-flow"><code class=property>wrap-flow</code></a>’
- computes to ‘<code class=property>auto</code>’ when the
- ‘<code class=property>float</code>’ property is anything other
- than ‘<code class=property>clear</code>’.
+ <p id=note-floats-are-considered-exclusions-fo> Note, floats are considered
+ exclusions for compatibility and ‘<a href="#wrap-flow"><code
+ class=property>wrap-flow</code></a>’ computes to ‘<code
+ class=property>auto</code>’ when the ‘<code
+ class=property>float</code>’ property is anything other than
+ ‘<code class=property>clear</code>’.
<div class=example>
- <p id=wrap-flow-auto-applied-to-an-absolutely-> wrap-flow: auto applied to
- an absolutely positioned element:</p>
+ <p id=the-wrap-flow-property-values-applied-to> The ‘<a
+ href="#wrap-flow"><code class=property>wrap-flow</code></a>’
+ property values applied to an absolutely positioned element.</p>
<pre><code class=html>
<style type="text/css">
@@ -523,13 +549,14 @@
<h3 id=scope-and-effect-of-exclusions><span class=secno>2.2. </span>Scope
and Effect of Exclusions</h3>
- <p id=exclusions-affect-the-inline-flow-conten> Exclusions affect the
- inline flow content inside of their containing blocks (defined in <a
- href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">CSS
- 2.1 10.1</a>) and that of all descendent elements of the same containing
- block. All inline flow content inside the containing block of the
- exclusions is affected. To stop the effect of exclusions defined outside
- any element, the ‘<a href="#wrap-through"><code
+ <p id=an-exclusion-affects-the-inline-flow-con> An exclusion affects the
+ inline flow content descended from the exclusion's containing blocks
+ (defined in <a
+ href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
+ CSS 2.1 10.1</a>) and that of all descendant elements of the same
+ containing block. All inline flow content inside the containing block of
+ the exclusions is affected. To stop the effect of exclusions defined
+ outside any element, the ‘<a href="#wrap-through"><code
class=property>wrap-through</code></a>’ property can be used (see
definition of Propagation of Exclusions below).
@@ -643,15 +670,6 @@
<td>the absolute length
</table>
-
- <p id=content-area-><dfn id=content-area>Content Area</dfn>
-
- <p id=the-area-used-for-layout-of-the-inline-f> The area used for layout of
- the inline flow content of an element. By default the area is equivalent
- to the <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
- content box. This specification modifies this definition by the
- introduction of ‘<a href="#shape-inside"><code
- class=property>shape-inside</code></a>’ property.</p>
<!-- End section "wrap-padding property" -->
<!-- End section "Scope and Efect of Exclusions" -->
@@ -663,7 +681,8 @@
block of the exclusion. In order to prevent wrapping of inline flow
content on any element around exclusions, the ‘<a
href="#wrap-through"><code class=property>wrap-through</code></a>’
- property can be used. Setting the property to ‘<code
+ property can be used. Setting the ‘<a href="#wrap-through"><code
+ class=property>wrap-through</code></a>’ property to ‘<code
class=property>none</code>’ will prevent the wrapping of inline flow
content around exclusion elements defined outside. The ‘<a
href="#wrap-through"><code class=property>wrap-through</code></a>’
@@ -733,8 +752,9 @@
</dl>
<div class=example>
- <p id=wrap-through--controlling-the-effect-of-> wrap-through - controlling
- the effect of exclusions</p>
+ <p id=using-the-wrap-through-property-to-contr> Using the ‘<a
+ href="#wrap-through"><code class=property>wrap-through</code></a>’
+ property to control the effect of exclusions.</p>
<pre><code class=html>
<style type="text/css">
@@ -805,7 +825,7 @@
<p id=the-wrap-property-is-a-shorthand-propert> The ‘<a
href="#wrap0"><code class=property>wrap</code></a>’ property is a
- shorthand property for setting the exclusoins properties at the same place
+ 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" -->
@@ -817,12 +837,12 @@
follows 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 descendent of the same containing
+ other preceding exclusions or elements descendant of the same containing
block. To change the ordering of positioned exclusions, z-index can be
used.
<div class=example>
- <p id=ordering-of-exclusions>Ordering of exclusions</p>
+ <p id=ordering-of-exclusions.>Ordering of exclusions.</p>
<pre><code class=html>
<style type="text/css">
@@ -887,7 +907,7 @@
(compared to non-exclusions auto-positioned elements).
<p id=similar-dependency-exists-for-exclusions> Similar dependency exists
- for exclusions whose size or position is specified in percentage and their
+ for exclusions whose size or position is specified in percentage and the
containing block size is specified as ‘<code
class=property>auto</code>’. In such cases the size or position of
the exclusion is calculated based on the size of the containing block
@@ -923,16 +943,16 @@
‘<code class=property>table-cell</code>’ or ‘<code
class=property>inline-block</code>’.
- <p class=note id=note-while-the-boundaries-used-for-wrapp> Note, While the
+ <p class=note id=note-while-the-boundaries-used-for-wrapp> Note, while the
boundaries used for wrapping inline flow content outside and inside an
element can be defined using shapes, the actual box model does not change.
If the element has specified margins, borders or paddings they will be
- computed and rendered according to the CSS Box Model module.
+ computed and rendered according to the [[CSS3-Box]] module.
<div class=example>
- <p id=css-shape-and-css-box-model-relation>CSS ‘<a
+ <p id=css-shape-and-css-box-model-relation.>CSS ‘<a
href="#shape"><code class=property>shape</code></a>’ and CSS box
- model relation</p>
+ model relation.</p>
<pre><code class=html>
<style type="text/css">
@@ -999,7 +1019,7 @@
The y-axis coordinate of the center of the circle
<li id=r--the-radius-of-the-circle.-note-cannot><strong>r</strong> - The
- radius of the circle. Note, Cannot be expressed as a percentage.
+ radius of the circle. Note, cannot be expressed as a percentage.
</ul>
</dl>
@@ -1045,10 +1065,10 @@
<br>
</dl>
- <p class=note id=note-in-case-the-polygon-is-not-closed-t> Note, in case
- the polygon is not closed the user-agent will assume an additional vertex
- at the end.</p>
- <!-- End section "Shapes from SVG Syntax -->
+ <p id=when-a-polygon-is-not-closed-the-user-ag> When a ‘<code
+ class=property>polygon</code>’ is not closed the user-agent will
+ assume an additional vertex at the end.
+ <!-- End section "Shapes from SVG Syntax -->
<h3 id=shapes-from-image><span class=secno>3.2. </span>Shapes from Image</h3>
@@ -1066,7 +1086,7 @@
class=property>shape-image-threshold</code></a>’ is not specified,
the initial value to be considered is 0.5.
- <p class=note id=note-images-can-also-define-cavities-and> Note, Images can
+ <p class=note id=note-images-can-also-define-cavities-and> Note, images can
also define cavities and inline flow content should wrap inside them. In
order to avoid that, another exclusion element can be overlaid.</p>
<!-- End section "Shapes from image" -->
@@ -1080,8 +1100,9 @@
or a combination for both properties. Using the ‘<a
href="#shape-outside"><code class=property>shape-outside</code></a>’
property changes the geometry of default shape used for exclusions, which
- is the outter border box of the element. The outside shape has visual
- effect when the element is exclusion (otherwise this property is ignored).
+ is the ‘<a href="#exclusion-area"><code class=css>exclusion
+ area</code></a>’ of the element. The outside shape has visual effect
+ when the element is an exclusion (otherwise the property has no affect).
Using the ‘<a href="#shape-inside"><code
class=property>shape-inside</code></a>’ property, the content box of
an element is redefined and inline flow content wraps into that shape.
@@ -1179,16 +1200,6 @@
modifies the shape of the inner inline flow content from rectangular
content box to an arbitrary geometry.
- <p id=when-the-property-is-set-to-auto-the-sha> When the property is set to
- ‘<code class=property>auto</code>’, the shape is taken from
- the value of ‘<a href="#shape-outside"><code
- class=property>shape-outside</code></a>’. In case both values of
- ‘<a href="#shape-inside"><code
- class=property>shape-inside</code></a>’ and ‘<a
- href="#shape-outside"><code class=property>shape-outside</code></a>’
- are specified as ‘<code class=property>auto</code>’, the
- content box of the element is used as the shape.
-
<table class=propdef>
<tbody>
<tr>
@@ -1278,9 +1289,9 @@
<p id=the-shape-image-threshold-defines-the-al> The ‘<a
href="#shape-image-threshold"><code
class=property>shape-image-threshold</code></a>’ defines the alpha
- channel threshold used to extract the shape using an image. The initial
- value of 0.5 means that all the pixels that are more than 50% transparent
- define the path of the exclusion shape. The ‘<a
+ channel threshold used to extract the shape using an image. A value of 0.5
+ means that all the pixels that are more than 50% transparent define the
+ path of the exclusion shape. The ‘<a
href="#shape-image-threshold"><code
class=property>shape-image-threshold</code></a>’ applies to both
‘<a href="#shape-outside"><code
@@ -1346,10 +1357,9 @@
<dt><dfn id=ltalphavaluegt
title="'shape-image-threshold'!!'<alphavalue>'"><alphavalue></dfn>
- <dd> Syntactically a <number>. The shape-image-threshold setting to
- be used when extracting a shape from an image. Any values outside the
- range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to
- this range.
+ <dd> A <number> value used to set the threshold used for extracting
+ a shape from an image. Any values outside the range 0.0 (fully
+ transparent) to 1.0 (fully opaque) will be clamped to this range.
</dl>
<!-- End section "The shape-image-threshold property" -->
@@ -1409,7 +1419,7 @@
<div class=example>
<p id=style-declaration-using-the-shape-shorth>Style declaration using the
‘<a href="#shape"><code class=property>shape</code></a>’
- shorthand property</p>
+ shorthand property.</p>
<pre><code class=html>
<style type="text/css">
@@ -1677,7 +1687,10 @@
title="authoring tool"><strong>4.2.</strong></a>
<li>Content Area, <a href="#content-area"
- title="Content Area"><strong>2.2.2.</strong></a>
+ title="Content Area"><strong>1.3.</strong></a>
+
+ <li>Exclusion Area, <a href="#exclusion-area"
+ title="Exclusion Area"><strong>1.3.</strong></a>
<li>Flow Container, <a href="#flow-container"
title="Flow Container"><strong>3.</strong></a>
Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Exclusions.src.html 18 Oct 2011 04:34:40 -0000 1.3
+++ Exclusions.src.html 21 Oct 2011 05:33:35 -0000 1.4
@@ -93,17 +93,32 @@
repeated explicitly.
</p>
+ <h3 id="definitions">Definitions</h3>
+ <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.
+ </p>
+
+ <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 [[!CSS21]] content box. This specification modifies this
+ definition by the introduction of 'shape-inside' property.
+ </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 outside
- border box 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
+ 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.
</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 descendant
+ 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.
</p>
@@ -117,12 +132,12 @@
<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 border box. The initial value for this property is 'auto', in this case
+ 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 'clear'.
+ property is specified to a value other than 'none'.
</p>
<p>
- The element will be considered an exclusion for all inline flow content descendent
+ The element will be considered as an exclusion for all inline flow content descendants
of the exclusions' containing block.
</p>
<table class="propdef">
@@ -201,13 +216,13 @@
the areas to the left and right of the exclusion empty.
</dd>
</dl>
- <p class="note">
- Note, Floats are considered exclusions for compatibility and 'wrap-flow' computes
- to 'auto' when the 'float' property is anything other than 'clear'.
- </p>
+
+ Note, floats are considered exclusions for compatibility and 'wrap-flow' computes
+ to 'auto' when the 'float' property is anything other than 'clear'.
+
<div class="example">
<p>
- wrap-flow: auto applied to an absolutely positioned element:
+ The 'wrap-flow' property values applied to an absolutely positioned element.
</p>
<pre><code class="html">
<style type="text/css">
@@ -255,11 +270,11 @@
<h3 id="scope-and-effect-of-exclusions">Scope and Effect of Exclusions</h3>
<p>
- Exclusions affect the inline flow content inside of their containing blocks (defined
- in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">CSS 2.1
- 10.1</a>) and that of all descendent elements of the same containing block.
- All inline flow content inside the containing block of the exclusions is affected.
- To stop the effect of exclusions defined outside any element, the 'wrap-through'
+ An exclusion affects the inline flow content descended from the exclusion's containing
+ blocks (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
+ CSS 2.1 10.1</a>) and that of all descendant elements of the same containing
+ block. All inline flow content inside the containing block of the exclusions is
+ affected. To stop the effect of exclusions defined outside any element, the 'wrap-through'
property can be used (see definition of Propagation of Exclusions below).
</p>
@@ -347,13 +362,6 @@
<td>the absolute length</td>
</tr>
</table>
-
- <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 [[!CSS21]] content box. This specification modifies this
- definition by the introduction of 'shape-inside' property.
- </p>
<!-- End section "wrap-padding property" -->
<!-- End section "Scope and Efect of Exclusions" -->
@@ -362,9 +370,9 @@
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 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.
+ 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.
</p>
<h4 id="wrap-through-property">The 'wrap-through' Property</h4>
@@ -418,7 +426,7 @@
</dl>
<div class="example">
<p>
- wrap-through - controlling the effect of exclusions
+ Using the 'wrap-through' property to control the effect of exclusions.
</p>
<pre><code class="html">
<style type="text/css">
@@ -476,7 +484,7 @@
</tr>
</table>
<p>
- The 'wrap' property is a shorthand property for setting the exclusoins properties
+ 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" -->
@@ -487,12 +495,12 @@
The ordering of exclusions follows 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 descendent of the same containing block. To change the ordering
+ exclusions or elements descendant of the same containing block. To change the ordering
of positioned exclusions, z-index can be used.
</p>
<div class="example">
- <p>Ordering of exclusions</p>
+ <p>Ordering of exclusions.</p>
<pre><code class="html">
<style type="text/css">
.exclusion {
@@ -535,7 +543,7 @@
<p>
Exclusions can be specified on positioned elements and elements can be positioned
from their <a href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
- position</a>. Since, the static position of such elements depends on the inline
+ position</a>. Since, the static position of such elements depends on the inline
flow content affected by the exclusion itself; there is a circular dependency between
the two layout tasks. To break this circular dependency a two-pass layout approach
is recommended. The first layout pass computes the static positions of all auto-positioned
@@ -549,8 +557,8 @@
</p>
<p>
Similar dependency exists for exclusions whose size or position is specified in
- percentage and their containing block size is specified as 'auto'. In such cases
- the size or position of the exclusion is calculated based on the size of the containing
+ percentage and the containing block size is specified as 'auto'. In such cases the
+ size or position of the exclusion is calculated based on the size of the containing
block calculated in the first layout pass.
</p>
<p>
@@ -578,14 +586,14 @@
'table-cell' or 'inline-block'.
</p>
<p class="note">
- Note, While the boundaries used for wrapping inline flow content outside and inside
+ Note, while the boundaries used for wrapping inline flow content outside and inside
an element can be defined using shapes, the actual box model does not change. If
the element has specified margins, borders or paddings they will be computed and
- rendered according to the CSS Box Model module.
+ rendered according to the [[CSS3-Box]] module.
</p>
<div class="example">
- <p>CSS 'shape' and CSS box model relation</p>
+ <p>CSS 'shape' and CSS box model relation.</p>
<pre><code class="html">
<style type="text/css">
.exclusion {
@@ -632,7 +640,7 @@
<ul>
<li><strong>cx</strong> - The x-axis coordinate of the center of the circle</li>
<li><strong>cy</strong> - The y-axis coordinate of the center of the circle</li>
- <li><strong>r</strong> - The radius of the circle. Note, Cannot be expressed as a percentage.</li>
+ <li><strong>r</strong> - The radius of the circle. Note, cannot be expressed as a percentage.</li>
</ul>
</dd>
</dl>
@@ -664,11 +672,9 @@
</dd>
</dl>
- <p class="note">
- Note, in case the polygon is not closed the user-agent will assume an additional
- vertex at the end.
- </p>
- <!-- End section "Shapes from SVG Syntax -->
+ When a 'polygon' is not closed the user-agent will assume an additional vertex
+ at the end.
+ <!-- End section "Shapes from SVG Syntax -->
<h3 id="shapes-from-image">Shapes from Image</h3>
<p>
@@ -682,7 +688,7 @@
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 also define cavities and inline flow content should wrap inside
them. In order to avoid that, another exclusion element can be overlaid.
</p>
<!-- End section "Shapes from image" -->
@@ -691,10 +697,10 @@
<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 outter border box of the element.
- The outside shape has visual effect when the element is exclusion (otherwise this
- property is ignored). Using the 'shape-inside' property, the content box of an element
- is redefined and inline flow content wraps into that shape.
+ 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.
</p>
<h4 id="shape-outside-property">The 'shape-outside' Property</h4>
@@ -765,11 +771,6 @@
The 'shape-inside' modifies the shape of the inner inline flow content from rectangular
content box to an arbitrary geometry.
</p>
- <p>
- When the property is set to 'auto', the shape is taken from the value of 'shape-outside'.
- In case both values of 'shape-inside' and 'shape-outside' are specified as 'auto',
- the content box of the element is used as the shape.
- </p>
<table class="propdef">
<tr>
@@ -836,8 +837,8 @@
<h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4>
<p>
The 'shape-image-threshold' defines the alpha channel threshold used to extract
- the shape using an image. The initial value of 0.5 means that all the pixels that
- are more than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold'
+ the shape using an image. A value of 0.5 means that all the pixels that are more
+ than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold'
applies to both 'shape-outside' and 'shape-inside'.
</p>
<p class="note">
@@ -883,9 +884,9 @@
<dl>
<dt><dfn title="'shape-image-threshold'!!'<alphavalue>'"><alphavalue></dfn></dt>
<dd>
- Syntactically a <number>. The shape-image-threshold setting to be used when
- extracting a shape from an image. Any values outside the range 0.0 (fully transparent)
- to 1.0 (fully opaque) will be clamped to this range.
+ A <number> value used to set the threshold used for extracting a shape from
+ an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
+ will be clamped to this range.
</dd>
</dl>
<!-- End section "The shape-image-threshold property" -->
@@ -931,7 +932,7 @@
</p>
<div class="example">
- <p>Style declaration using the 'shape' shorthand property</p>
+ <p>Style declaration using the 'shape' shorthand property.</p>
<pre><code class="html">
<style type="text/css">
.shape {
Received on Friday, 21 October 2011 05:33:44 UTC