You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2093 lines
69 KiB
2093 lines
69 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head profile="http://www.w3.org/2006/03/hcard"><meta
|
|
content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Exclusions and Shapes Module Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
|
|
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
|
|
/* The fonts are not applied if only loaded from the alternate stylesheet */
|
|
|
|
/* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */
|
|
@import url(fonts/Droid-Serif-fontfacekit/stylesheet.css);
|
|
@import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css);
|
|
|
|
.singleImgExample {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.example-table {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.example-table tr td img {
|
|
width: 90%;
|
|
}
|
|
|
|
a.toggle {
|
|
position: fixed;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
font-size: smaller;
|
|
color: gray;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
a.toggle:hover {
|
|
opacity: 1;
|
|
color: #46A4E9;
|
|
}
|
|
|
|
.issue-marker a {
|
|
background: #c00;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0.5em;
|
|
}
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
<link href=alternate-spec-style.css id=st rel="alternate stylesheet"
|
|
title="alternate spec styles" type="text/css">
|
|
|
|
<body>
|
|
<div class=head id=div-head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 13 December
|
|
2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-exclusions/">http://www.w3.org/TR/css3-exclusions/</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>None
|
|
|
|
<dt>Editors:
|
|
|
|
<dd class=vcard><span class=fn>Vincent Hardy</span>, <span
|
|
class=org>Adobe Systems, Inc.</span>, <span
|
|
class=email>vhardy@adobe.com</span>
|
|
|
|
<dd class=vcard><span class=fn>Rossen Atanassov</span>, <span
|
|
class=org>Microsoft Corporation</span>, <span
|
|
class=email>ratan@microsoft.com</span>
|
|
|
|
<dt>Issues List
|
|
|
|
<dd><a
|
|
href="http://wiki.csswg.org/ideas/css3-exclusions">http://wiki.csswg.org/ideas/css3-exclusions</a>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym
|
|
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p> 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> CSS Shapes control the geometric shapes used for wrapping inline flow
|
|
content outside or inside an element.
|
|
|
|
<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.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-exclusions” in the subject, preferably like this:
|
|
“[<!---->css3-exclusions<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>This is the First Public Working Draft of the CSS Exclusions and Shapes
|
|
Level 3 Module.
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#intro"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#definitions"><span class=secno>2. </span>Definitions</a>
|
|
|
|
<li><a href="#exclusions"><span class=secno>3. </span>Exclusions</a>
|
|
<ul class=toc>
|
|
<li><a href="#declaring-exclusions"><span class=secno>3.1.
|
|
</span>Declaring exclusions</a>
|
|
<ul class=toc>
|
|
<li><a href="#wrap-flow-property"><span class=secno>3.1.1. </span>The
|
|
‘<code class=property>wrap-flow</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
|
|
</span>Scope and Effect of Exclusions</a>
|
|
<ul class=toc>
|
|
<li><a href="#wrap-margin-property"><span class=secno>3.2.1.
|
|
</span>The ‘<code class=property>wrap-margin</code>’
|
|
Property</a>
|
|
|
|
<li><a href="#wrap-padding-property"><span class=secno>3.2.2.
|
|
</span>The ‘<code class=property>wrap-padding</code>’
|
|
Property</a>
|
|
</ul>
|
|
|
|
<li><a href="#propagation-of-exclusions"><span class=secno>3.3.
|
|
</span>Propagation of Exclusions</a>
|
|
<ul class=toc>
|
|
<li><a href="#wrap-through-property"><span class=secno>3.3.1.
|
|
</span>The ‘<code class=property>wrap-through</code>’
|
|
Property</a>
|
|
|
|
<li><a href="#wrap-shorthand-property"><span class=secno>3.3.2.
|
|
</span>The ‘<code class=property>wrap</code>’ Shorthand
|
|
Property</a>
|
|
</ul>
|
|
|
|
<li><a href="#exclusions-order"><span class=secno>3.4. </span>Exclusions
|
|
order</a>
|
|
|
|
<li><a href="#exclusions-implementation-note"><span class=secno>3.5.
|
|
</span>Exclusions implementation note</a>
|
|
</ul>
|
|
|
|
<li><a href="#shapes"><span class=secno>4. </span>Shapes</a>
|
|
<ul class=toc>
|
|
<li><a href="#shapes-from-svg-syntax"><span class=secno>4.1.
|
|
</span>Shapes from SVG Syntax</a>
|
|
<ul class=toc>
|
|
<li><a href="#supported-svg-shapes"><span class=secno>4.1.1.
|
|
</span>Supported SVG Shapes</a>
|
|
|
|
<li><a href="#referencing-svg-shapes"><span class=secno>4.1.2.
|
|
</span>Referencing SVG shapes</a>
|
|
</ul>
|
|
|
|
<li><a href="#shapes-from-image"><span class=secno>4.2. </span>Shapes
|
|
from Image</a>
|
|
|
|
<li><a href="#declaring-shapes"><span class=secno>4.3. </span>Declaring
|
|
Shapes</a>
|
|
<ul class=toc>
|
|
<li><a href="#shape-outside-property"><span class=secno>4.3.1.
|
|
</span>The ‘<code class=property>shape-outside</code>’
|
|
Property</a>
|
|
|
|
<li><a href="#shape-inside-property"><span class=secno>4.3.2.
|
|
</span>The ‘<code class=property>shape-inside</code>’
|
|
Property</a>
|
|
|
|
<li><a href="#shape-image-threshold-property"><span class=secno>4.3.3.
|
|
</span>The ‘<code
|
|
class=property>shape-image-threshold</code>’ Property</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#conventions"><span class=secno>5.1. </span>Document
|
|
Conventions</a>
|
|
|
|
<li><a href="#conformance-classes"><span class=secno>5.2.
|
|
</span>Conformance Classes</a>
|
|
|
|
<li><a href="#partial"><span class=secno>5.3. </span> Partial
|
|
Implementations</a>
|
|
|
|
<li><a href="#experimental"><span class=secno>5.4. </span> Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#testing"><span class=secno>5.5. </span> Non-Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
|
|
Criteria</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=intro><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p> The exclusions section of this specification defines features that
|
|
allow inline flow content to wrap around outside the <a
|
|
href="#exclusion-area">exclusion area</a> of elements.
|
|
|
|
<p> The shapes section of the specification defines properties to control
|
|
the geometry of an element's <a href="#exclusion-area">exclusion area</a>
|
|
as well as the geometry used for wrapping an element's inline flow
|
|
content.
|
|
|
|
<h2 id=definitions><span class=secno>2. </span>Definitions</h2>
|
|
|
|
<p><dfn id=exclusion-element>Exclusion element</dfn>
|
|
|
|
<p> An element that defines an <a href="#exclusion-area">exclusion area</a>
|
|
for other elements. The ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ property is used to make an
|
|
element an exclusion element. An exclusion element contributes its <a
|
|
href="#exclusion-area">exclusion area</a> to its <a
|
|
href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
|
|
containing block's</a> <a href="#wrapping-context">wrapping context</a>
|
|
|
|
<p><dfn id=exclusion-area>Exclusion area</dfn>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>
|
|
|
|
<p> The area used for excluding inline flow content around an exclusion
|
|
element. The exclusion area is equivalent to the <a
|
|
href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border box</a>
|
|
for elements with ‘<code class=property>float</code>’ property
|
|
computed to ‘<code class=property>none</code>’ and the <a
|
|
href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>
|
|
for elements with ‘<code class=property>float</code>’ property
|
|
computed to a value other than ‘<code
|
|
class=property>none</code>’. This specification's ‘<a
|
|
href="#shape-outside"><code class=property>shape-outside</code></a>’
|
|
property can be used to define arbitrary, non-rectangular exclusion areas.
|
|
|
|
|
|
<p><dfn id=wrapping-context>Wrapping context</dfn>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>
|
|
|
|
<p> The wrapping context of an element is a collection of ‘<code
|
|
class=css>exclusion areas</code>’. The wrapping context is used to
|
|
wrap around inline flow content during layout. An element will wrap its
|
|
inline flow content in the area that corresponds to the subtraction of its
|
|
wrapping context from its own <a href="#content-area">content area</a>.
|
|
|
|
<p> An element inherits its <a
|
|
href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
|
|
block's</a> wrapping context unless it specifically resets it using the
|
|
‘<a href="#wrap-through"><code
|
|
class=property>wrap-through</code></a>’ property.
|
|
|
|
<p><dfn id=content-area>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 ‘<a href="#shape-inside"><code
|
|
class=property>shape-inside</code></a>’ property can define
|
|
arbitrary, non-rectangular content areas.
|
|
|
|
<p><dfn id=outside-and-inside title=outside-inside>Outside and inside</dfn>
|
|
|
|
|
|
<p> In this specification, ‘<code
|
|
class=property>outside</code>’ refers to DOM content that is not a
|
|
descendant of an element while ‘<code
|
|
class=property>inside</code>’ refers to the element's descendants.
|
|
|
|
<h2 id=exclusions><span class=secno>3. </span>Exclusions</h2>
|
|
|
|
<p> 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 <a
|
|
href="#content-area">content area</a> 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 ‘<code
|
|
class=property>z-index</code>’ 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.
|
|
|
|
<h3 id=declaring-exclusions><span class=secno>3.1. </span>Declaring
|
|
exclusions</h3>
|
|
|
|
<p> An element becomes an exclusion when its ‘<a
|
|
href="#wrap-flow"><code class=property>wrap-flow</code></a>’
|
|
property has a computed value other than ‘<code
|
|
class=property>auto</code>’.
|
|
|
|
<h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The ‘<a
|
|
href="#wrap-flow"><code class=property>wrap-flow</code></a>’
|
|
property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=wrap-flow title="'wrap-flow'">wrap-flow</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var>auto</var> | <var>both</var> | <var>start</var> |
|
|
<var>end</var> | <var>maximum</var> | <var>clear</var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified, except for floats all values compute to ‘<code
|
|
class=property>auto</code>’
|
|
</table>
|
|
|
|
<p>The values of this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
|
|
|
|
<dd> For floats an exclusion is created, for all other elements an
|
|
exclusion is not created.
|
|
|
|
<dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>
|
|
|
|
<dd> Inline flow content can flow on all sides of the exclusion.
|
|
|
|
<dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>
|
|
|
|
<dd> Inline flow content can wrap on the start edge of the exclusion area
|
|
but must leave the area to end edge of the exclusion area empty.
|
|
|
|
<dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>
|
|
|
|
<dd> Inline flow content can wrap on the end side of the exclusion area
|
|
but must leave the area to the start edge of the exclusion area empty.
|
|
|
|
<dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>
|
|
|
|
<dd> 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.
|
|
|
|
<dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>
|
|
|
|
<dd> Inline flow content can only wrap on top and bottom of the exclusion
|
|
and must leave the areas to the start and end edges of the exclusion box
|
|
empty.
|
|
</dl>
|
|
|
|
<p> Setting the ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ property to ‘<code
|
|
class=property>both</code>’, ‘<code
|
|
class=property>start</code>’, ‘<code
|
|
class=property>end</code>’, ‘<code
|
|
class=property>maximum</code>’ or ‘<code
|
|
class=property>clear</code>’ on an element makes that element an
|
|
<span>exclusion element. 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. </span>
|
|
|
|
<p> The initial value for this property is ‘<code
|
|
class=property>auto</code>’.
|
|
|
|
<p> When the property's computed value is ‘<code
|
|
class=property>auto</code>’, the element does not become an <a
|
|
href="#exclusion-element">exclusion element</a> unless its ‘<code
|
|
class=property>float</code>’ property computed value is not
|
|
‘<code class=property>none</code>’. In that case, the element
|
|
contributes its ‘<code class=css>border box</code>’ to its
|
|
containing block's <a href="#wrapping-context">wrapping context</a> and
|
|
content flows around it according to the ‘<code
|
|
class=property>clear</code>’ property.
|
|
|
|
<p> The element will be considered as an exclusion for all inline flow
|
|
content descendants of the exclusions' containing block.
|
|
|
|
<div class=figure> <img
|
|
alt="General illustration showing how exclusions combine"
|
|
src="images/exclusions-illustration.png" width="70%">
|
|
<p class=caption>Combining exclusions</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p>The above figure illustrates how exclusions combine. The red box
|
|
represents an element's content box. The A, B, C and D darker gray boxes
|
|
represent exclusions in the element's wrapping context. A, B, C and D
|
|
have their respective ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ set to ‘<code
|
|
class=property>both</code>’, ‘<code
|
|
class=property>start</code>’, ‘<code
|
|
class=property>end</code>’ and ‘<code
|
|
class=property>clear</code>’ respectively. The lighter gray areas
|
|
show the additional areas that are excluded for inline layout as a result
|
|
of the ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ value. For example, the area
|
|
to the right of ‘<code class=property>B</code>’ cannot be
|
|
used for inline layout because the ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ for ‘<code
|
|
class=property>B</code>’ is ‘<code
|
|
class=property>start</code>’.</p>
|
|
|
|
<p>The background ‘<code class=property>blue</code>’ area
|
|
shows what areas are available for inline content layout. All areas
|
|
represented with a light or dark shade of gray are not available for
|
|
inline content layout.</p>
|
|
</div>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>
|
|
|
|
<div class=example>
|
|
<p> The ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ property values applied to an
|
|
absolutely positioned element.</p>
|
|
<code class=html></code>
|
|
<pre>
|
|
<style type="text/css">
|
|
#exclusion {
|
|
position: absolute;
|
|
background: lightblue;
|
|
border: 3px solid blue;
|
|
}
|
|
</style>
|
|
|
|
<div style=”position: relative; border: 1px solid black;”>
|
|
<div id=”exclusion”>Donec metus messa, mollis...</div>
|
|
Lorem ipsum dolor sit amet...
|
|
</div>
|
|
</pre>
|
|
|
|
<table class=example-table>
|
|
<tbody>
|
|
<tr>
|
|
<td><code class=html>#exclusion{ wrap-flow: auto; }</code>
|
|
|
|
<td><code class=html>#exclusion{ wrap-flow: both; }</code>
|
|
|
|
<tr>
|
|
<td><img alt="Example rendering for wrap-side: auto"
|
|
src="images/exclusion_wrap_side_auto.png">
|
|
|
|
<td><img alt="Example rendering for wrap-side: both"
|
|
src="images/exclusion_wrap_side_both.png">
|
|
|
|
<tr>
|
|
<td><code class=html>#exclusion{ wrap-flow: start; }</code>
|
|
|
|
<td><code class=html>#exclusion{ wrap-flow: end; }</code>
|
|
|
|
<tr>
|
|
<td><img alt="Example rendering for wrap-side: start"
|
|
src="images/exclusion_wrap_side_left.png">
|
|
|
|
<td><img alt="Example rendering for wrap-side: end"
|
|
src="images/exclusion_wrap_side_right.png">
|
|
|
|
<tr>
|
|
<td><code class=html>#exclusion{ wrap-flow: maximum; }</code>
|
|
|
|
<td><code class=html>#exclusion{ wrap-flow: maximum; }</code>
|
|
|
|
<tr>
|
|
<td><img alt="Example rendering for wrap-side: maximum"
|
|
src="images/exclusion_wrap_side_maximum_L.png">
|
|
|
|
<td><img alt="Example rendering for wrap-side: maximum"
|
|
src="images/exclusion_wrap_side_maximum_R.png">
|
|
|
|
<tr>
|
|
<td><code class=html>#exclusion{ wrap-flow: clear; }</code>
|
|
|
|
<td><code class=html> </code>
|
|
|
|
<tr>
|
|
<td><img alt="Example rendering for wrap-side: clear"
|
|
src="images/exclusion_wrap_side_clear.png">
|
|
|
|
<td>
|
|
</table>
|
|
</div>
|
|
<!-- End section "wrap-flow Property" -->
|
|
<!-- End section "Declaring Exclusions" -->
|
|
|
|
<h3 id=scope-and-effect-of-exclusions><span class=secno>3.2. </span>Scope
|
|
and Effect of Exclusions</h3>
|
|
|
|
<p> 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).
|
|
|
|
<h4 id=wrap-margin-property><span class=secno>3.2.1. </span>The ‘<a
|
|
href="#wrap-margin"><code class=property>wrap-margin</code></a>’
|
|
Property</h4>
|
|
|
|
<p> The ‘<a href="#wrap-margin"><code
|
|
class=property>wrap-margin</code></a>’ property can be used to
|
|
offset the inline flow content wrapping on the outside of exclusions.
|
|
Offsets created by the ‘<a href="#wrap-margin"><code
|
|
class=property>wrap-margin</code></a>’ property are offset from the
|
|
outside of the exclusion. This property takes on positive values only.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=wrap-margin title="'wrap-margin'">wrap-margin</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var><length></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the absolute length
|
|
</table>
|
|
<!-- End secion "wrap-margin property" -->
|
|
|
|
<h4 id=wrap-padding-property><span class=secno>3.2.2. </span>The ‘<a
|
|
href="#wrap-padding"><code class=property>wrap-padding</code></a>’
|
|
Property</h4>
|
|
|
|
<p> The ‘<a href="#wrap-padding"><code
|
|
class=property>wrap-padding</code></a>’ property can be used to
|
|
offset to the inline flow content wrapping on the inside of elements.
|
|
Offsets created by the ‘<a href="#wrap-padding"><code
|
|
class=property>wrap-padding</code></a>’ property are offset from the
|
|
<a href="#content-area">content area</a> of the element. This property
|
|
takes on positive values only.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=wrap-padding title="'wrap-padding'">wrap-padding</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var><length></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the absolute length
|
|
</table>
|
|
<!-- End section "wrap-padding property" -->
|
|
|
|
<div class=note>Note that the ‘<a href="#wrap-padding"><code
|
|
class=property>wrap-padding</code></a>’ property affects layout of
|
|
content inside the element it applies to while the ‘<a
|
|
href="#wrap-margin"><code class=property>wrap-margin</code></a>’
|
|
property affects layout of content outside the element.</div>
|
|
<!-- End section "Scope and Effect of Exclusions" -->
|
|
|
|
<h3 id=propagation-of-exclusions><span class=secno>3.3. </span>Propagation
|
|
of Exclusions</h3>
|
|
|
|
<p> By default, an element inherits its parent <a
|
|
href="#wrapping-context">wrapping context</a>. In other words it is
|
|
subject to the exclusions defined <a href="#outside-and-inside"
|
|
title=outside-inside>outside the element. </a>
|
|
|
|
<p>Setting the ‘<a href="#wrap-through"><code
|
|
class=property>wrap-through</code></a>’ property to ‘<code
|
|
class=property>none</code>’ prevents an element from inheriting its
|
|
parent wrapping context. In other words, exclusions defined ‘<code
|
|
class=property>outside</code>’ the element, have not effect on the
|
|
element's children layout.
|
|
|
|
<div class=note> Exclusions defined by an element's descendants still
|
|
contribute to their containing block's <a
|
|
href="#wrapping-context">wrapping context</a>. If that containing block is
|
|
a child of an element with ‘<a href="#wrap-through"><code
|
|
class=property>wrap-through</code></a>’ 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><span class=secno>3.3.1. </span>The ‘<a
|
|
href="#wrap-through"><code class=property>wrap-through</code></a>’
|
|
Property</h4>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=wrap-through title="'wrap-through'">wrap-through</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#wrap0"><var>wrap</var></a> | <var>none</var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>wrap
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>The values of this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=wrap title="'wrap-through'!!'wrap'">wrap</dfn>
|
|
|
|
<dd> The element inherits its parent node's <a
|
|
href="#wrapping-context">wrapping context</a>. Its descendant inline
|
|
content wraps around exclusions defined <a href="#outside-and-inside"
|
|
title=outside-inside>outside</a> the element.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=none title="'wrap-through'!!'none'">none</dfn>
|
|
|
|
<dd> The element does not inherit its parent node's <a
|
|
href="#wrapping-context">wrapping context</a>. Its descendants are only
|
|
subject to exclusion shapes defined <a href="#outside-and-inside"
|
|
title=outside-inside>inside</a> the element.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p> 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">
|
|
.exclusion {
|
|
wrap-flow: both;
|
|
position: absolute;
|
|
background-color: rgba(220, 230, 242, 0.5);
|
|
}
|
|
</style>
|
|
|
|
<div style=”position: relative;”>
|
|
<div class=”exclusion”></div>
|
|
<div style=”wrap-through: wrap;”> Lorem ipsum dolor sit amet...</div>
|
|
<div style=”wrap-through: none;”> Lorem ipsum dolor sit amet...</div>
|
|
</div>
|
|
</code></pre>
|
|
<img alt="Example rendering of wrap-through: wrap | none"
|
|
class=singleImgExample src="images/exclusion_wrap_through.png"
|
|
style="max-width:40%"></div>
|
|
<!-- End section "wrap-through property" -->
|
|
|
|
<h4 id=wrap-shorthand-property><span class=secno>3.3.2. </span>The
|
|
‘<a href="#wrap0"><code class=property>wrap</code></a>’
|
|
Shorthand Property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=wrap0 title="'wrap'">wrap</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var><wrap-flow></var> || <var><wrap-margin></var> [ /
|
|
<var><wrap-padding></var>]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p> The ‘<a href="#wrap0"><code class=property>wrap</code></a>’
|
|
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=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
|
|
|
|
<p> Exclusions follow the painting order (See <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Appendix E). 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
|
|
exclusions with ‘<code class=property>position</code>’
|
|
property computed to a value other than ‘<code
|
|
class=property>static</code>’, ‘<code
|
|
class=property>z-index</code>’ can be used. Exclusions with
|
|
‘<code class=property>position</code>’ property computed to
|
|
‘<code class=property>static</code>’ are not affected by the
|
|
‘<code class=property>z-index</code>’ property, thus follow
|
|
the painting order.
|
|
|
|
<div class=example>
|
|
<p>Ordering of exclusions.</p>
|
|
|
|
<pre><code class=html>
|
|
<style type="text/css">
|
|
.exclusion {
|
|
wrap-flow: both;
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
</style>
|
|
|
|
<div class=”exclusion” style=”top: 0px; left: 0px;”>
|
|
Lorem ipsum dolor sit amet...
|
|
</div>
|
|
<div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”>
|
|
Lorem ipsum dolor sit amet...
|
|
</div>
|
|
<div class=”exclusion” style=”top: 50%; left: 50%;”>
|
|
Lorem ipsum dolor sit amet...
|
|
</div>
|
|
</code></pre>
|
|
|
|
<table class=example-table>
|
|
<tbody>
|
|
<tr>
|
|
<td style="width:50%"><code class=html>#orderedExclusion{ z-index:
|
|
auto; }</code>
|
|
|
|
<td style="width:50%"><code class=html>#orderedExclusion{ z-index: 1;
|
|
}</code>
|
|
|
|
<tr>
|
|
<td><img alt="Example rendering of default exclusion ordering."
|
|
class=singleImgExample src="images/exclusion_ordering.png">
|
|
|
|
<td><img alt="Example rendering of default exclusion ordering."
|
|
class=singleImgExample src="images/exclusion_ordering_z_order.png">
|
|
</table>
|
|
</div>
|
|
<!-- End section "Order of Exclusions" -->
|
|
|
|
<h3 id=exclusions-implementation-note><span class=secno>3.5.
|
|
</span>Exclusions implementation note</h3>
|
|
|
|
<div class=issue-marker><a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a></div>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<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 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 exclusions by laying out all
|
|
content besides exclusions. The second pass is layout of all elements
|
|
including all exclusions. Exclusions that depend on their static position
|
|
will use the position calculated during the first layout pass.
|
|
|
|
<p class=note> Note, this may cause exclusions to overlap or be distant
|
|
from their static position (compared to non-exclusions auto-positioned
|
|
elements).
|
|
|
|
<p> Similar dependency exists 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 calculated in the first layout pass.
|
|
|
|
<p> 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 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>
|
|
<!-- End section "Processing Model of Exclusions" -->
|
|
<!-- End section "Exclusions" -->
|
|
|
|
<h2 id=shapes><span class=secno>4. </span>Shapes</h2>
|
|
|
|
<div class=issue-marker> <a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br>
|
|
</div>
|
|
|
|
<p> Shapes define arbitrary geometric contours around which or into which
|
|
inline flow content flows. There are two different types of shapes –
|
|
‘<code class=property>outside</code>’ and ‘<code
|
|
class=property>inside</code>’. The outside shape defines the <a
|
|
href="#exclusion-area">exclusion area</a> for an <a
|
|
href="#exclusion-element">exclusion element</a>. The inside shape defines
|
|
an element's <span>content shape</span> and the element's inline content
|
|
will flow within that shape.
|
|
|
|
<p><dfn id=flow-container>Flow Container</dfn>
|
|
|
|
<p> A flow container is an element with a ‘<code
|
|
class=property>display</code>’ value that is computed as
|
|
‘<code class=property>block</code>’, ‘<code
|
|
class=property>table-cell</code>’ or ‘<code
|
|
class=property>inline-block</code>’.
|
|
|
|
<p class=note> 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
|
|
[[CSS3-Box]] module.
|
|
|
|
<div class=example>
|
|
<p>CSS ‘<code class=property>shape</code>’ and CSS box model
|
|
relation.</p>
|
|
|
|
<pre><code class=html>
|
|
<style type="text/css">
|
|
.exclusion {
|
|
wrap-flow: both;
|
|
position: absolute;
|
|
shape-outside: circle(50%, 50%, 50%);
|
|
border: 1px solid red;
|
|
}
|
|
</style>
|
|
|
|
<div style=”position: relative; border: 1px solid black;”>
|
|
<div class=”exclusion”></div>
|
|
Lorem ipsum dolor sit amet...
|
|
</div>
|
|
</code></pre>
|
|
<img alt="Example rendering of circle shape and box model."
|
|
class=singleImgExample src="images/shapes_CSS2.1_MBP.png"
|
|
style="max-width:40%"></div>
|
|
|
|
<h3 id=shapes-from-svg-syntax><span class=secno>4.1. </span>Shapes from SVG
|
|
Syntax</h3>
|
|
|
|
<p> Shapes can be specified using <a
|
|
href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>.
|
|
|
|
<h4 id=supported-svg-shapes><span class=secno>4.1.1. </span>Supported SVG
|
|
Shapes</h4>
|
|
|
|
<p> The following SVG shapes are supported by the CSS shapes module.
|
|
|
|
<dl>
|
|
<dt>rectangle(x, y, width, height, [[rx], ry])
|
|
|
|
<dd>
|
|
<ul>
|
|
<li><strong>x, y, width and height</strong> - define the bounding box of
|
|
the rectangle
|
|
|
|
<li><strong>rx</strong> - For rounded rectangles, the x-axis radius of
|
|
the ellipse used to round off the corners of the rectangle
|
|
|
|
<li><strong>ry</strong> - For rounded rectangles, the y-axis radius of
|
|
the ellipse used to round off the corners of the rectangle
|
|
</ul>
|
|
|
|
<dt>circle(cx, cy, r)
|
|
|
|
<dd>
|
|
<ul>
|
|
<li><strong>cx</strong> - The x-axis coordinate of the center of the
|
|
circle
|
|
|
|
<li><strong>cy</strong> - The y-axis coordinate of the center of the
|
|
circle
|
|
|
|
<li><strong>r</strong> - The radius of the circle
|
|
</ul>
|
|
|
|
<dt>ellipse(cx, cy, rx, ry)
|
|
|
|
<dd>
|
|
<ul>
|
|
<li><strong>cx</strong> - The x-axis coordinate of the center of the
|
|
ellipse
|
|
|
|
<li><strong>cy</strong> - The y-axis coordinate of the center of the
|
|
ellipse
|
|
|
|
<li><strong>rx</strong> - The x-axis radius of the ellipse
|
|
|
|
<li><strong>ry</strong> - The y-axis radius of the ellipse
|
|
</ul>
|
|
|
|
<dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)
|
|
|
|
<dd>
|
|
<ul>
|
|
<li><strong>fillRule</strong> - The filling rule used to determine the
|
|
interior of the polygon. See fill-rule property in SVG for details.
|
|
Possible values are nonzero or evenodd. Default value when omitted is
|
|
nonzero.
|
|
|
|
<li><strong>xi</strong> - The x-axis coordinate of the i-th vertex of
|
|
the polygon
|
|
|
|
<li><strong>yi</strong> - The y-axis coordinate of the i-th vertex of
|
|
the polygon
|
|
</ul>
|
|
|
|
<p> If the polygon is not closed the user-agent will automatically add a
|
|
new vertex at the end.</p>
|
|
<br>
|
|
</dl>
|
|
|
|
<h4 id=referencing-svg-shapes><span class=secno>4.1.2. </span>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>In all cases, percentages are resolved from the border box of the
|
|
element.
|
|
|
|
<div class=example> <code class=html></code>
|
|
<pre>
|
|
<style>
|
|
.in-a-circle {
|
|
shape-inside: url(#circle_shape);
|
|
}
|
|
|
|
.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>
|
|
</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 ‘<code
|
|
class=property>px</code>’ units. If the border box of the element is
|
|
dependent on auto sizing (i.e., the element's ‘<code
|
|
class=property>width</code>’ or ‘<code
|
|
class=property>height</code>’ property is ‘<code
|
|
class=property>auto</code>’), then the percentage values are
|
|
computed agains ‘<code class=css>0</code>’ and resolve to 0.</p>
|
|
<!-- End section "Shapes from SVG Syntax -->
|
|
|
|
<h3 id=shapes-from-image><span class=secno>4.2. </span>Shapes from Image</h3>
|
|
|
|
<div class=issue-marker> <a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br>
|
|
<a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br>
|
|
<a
|
|
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a></div>
|
|
|
|
<p> Another way of defining shapes is by specifying a source image whose
|
|
alpha channel is used to compute the inside or outside shape. The shape is
|
|
computed to be the path that encloses the area where the opacity of the
|
|
specified image is greater than the ‘<a
|
|
href="#shape-image-threshold"><code
|
|
class=property>shape-image-threshold</code></a>’ value. If the
|
|
‘<a href="#shape-image-threshold"><code
|
|
class=property>shape-image-threshold</code></a>’ is not specified,
|
|
the initial value to be considered is 0.5.
|
|
|
|
<p class=note> 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>
|
|
<!-- End section "Shapes from image" -->
|
|
|
|
<h3 id=declaring-shapes><span class=secno>4.3. </span>Declaring Shapes</h3>
|
|
|
|
<p> Shapes are declared with the ‘<a href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’ or ‘<a
|
|
href="#shape-inside"><code class=property>shape-inside</code></a>’
|
|
properties. The ‘<a href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’ property changes the
|
|
geometry of an <a href="#exclusion-element">exclusion
|
|
element</a>‘<code class=css>s <span>exclusion are</span>. If the
|
|
element is not an <a href="#exclusion-element">exclusion element</a> (see
|
|
the </code>’wrap-flow' property), then the ‘<a
|
|
href="#shape-outside"><code class=property>shape-outside</code></a>’
|
|
property has no effect.
|
|
|
|
<p> The ‘<a href="#shape-inside"><code
|
|
class=property>shape-inside</code></a>’ property defines an
|
|
element's <a href="#content-area">content area</a> and the element's
|
|
inline flow content wraps into that shape.
|
|
|
|
<h4 id=shape-outside-property><span class=secno>4.3.1. </span>The ‘<a
|
|
href="#shape-outside"><code class=property>shape-outside</code></a>’
|
|
Property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=shape-outside title="'shape-outside'">shape-outside</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var>auto</var> | <var><shape></var> | <var><uri></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>computed lengths for <shape>, the absolute URI for
|
|
<uri>, otherwise as specified
|
|
</table>
|
|
|
|
<p>The values of this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>
|
|
|
|
<dd>The shape is computed based on the border box of the element.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=ltshapegt
|
|
title="'shape-outside'!!'<shape>'"><shape></dfn>
|
|
|
|
<dd> The shape is computed based on the values of one of ‘<code
|
|
class=property>rectangle</code>’,‘<code class=css>
|
|
circle</code>’, ‘<code class=property>ellipse</code>’
|
|
or ‘<code class=property>polygon</code>’.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=lturigt
|
|
title="'shape-outside'!!'<uri>'"><uri></dfn>
|
|
|
|
<dd> 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 ‘<code
|
|
class=property>auto</code>’ had been specified.
|
|
</dl>
|
|
|
|
<div class=figure> <img
|
|
alt="arbitrary shapes for excluions. Illustrates how content flows around shapes"
|
|
src="images/shapes-exclusions.png" width="70%">
|
|
<p class=caption>Arbitrary shapes for exclusions</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p>The above figure shows how ‘<a href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’ shapes impact the
|
|
exclusion areas. The red box represents an element's content box and
|
|
‘<code class=property>A</code>’, ‘<code
|
|
class=property>B</code>’, ‘<code
|
|
class=property>C</code>’ and ‘<code
|
|
class=property>C</code>’ represent exclusions with a complex shape
|
|
and their ‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’ property set to ‘<code
|
|
class=property>both</code>’, ‘<code
|
|
class=property>start</code>’, ‘<code
|
|
class=property>end</code>’ and ‘<code
|
|
class=property>clear</code>’, respectively.</p>
|
|
|
|
<p>As illustrated in the picture, when an exclusion allows wrapping on all
|
|
sides, text can flow inside ‘<code
|
|
class=property>holes</code>’ in the exclusion (as for exclusion
|
|
‘<code class=property>A</code>’). Otherwise, the exclusion
|
|
clears the area on the side(s) defined by wrap flow, as illustrated for
|
|
‘<code class=property>B</code>’, ‘<code
|
|
class=property>C</code>’ and ‘<code
|
|
class=property>D</code>’ above.</p>
|
|
</div>
|
|
<!-- End section "The shape-outside Property" -->
|
|
|
|
<h4 id=shape-inside-property><span class=secno>4.3.2. </span>The ‘<a
|
|
href="#shape-inside"><code class=property>shape-inside</code></a>’
|
|
Property</h4>
|
|
|
|
<p> The ‘<a href="#shape-inside"><code
|
|
class=property>shape-inside</code></a>’ modifies the shape of the
|
|
inner inline flow content from rectangular content box to an arbitrary
|
|
geometry.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=shape-inside title="'shape-inside'">shape-inside</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var>outside-shape</var> | <var>auto</var> |
|
|
<var><shape></var> | <var><uri></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>outside-shape
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>computed lengths for <shape>, the absolute URI for
|
|
<uri>, otherwise as specified
|
|
</table>
|
|
|
|
<p>The values of this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=outside-shape
|
|
title="'shape-inside'!!'outside-shape'">outside-shape</dfn>
|
|
|
|
<dd> The shape is computed based on the computed value of the ‘<a
|
|
href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’ property.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=auto1 title="'shape-inside'!!'auto'">auto</dfn>
|
|
|
|
<dd> The shape is computed based on the content box of the element.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=ltshapegt0
|
|
title="'shape-inside'!!'<shape>'"><shape></dfn>
|
|
|
|
<dd> The shape is computed based on the values of one of ‘<code
|
|
class=property>rectangle</code>’,‘<code class=css>
|
|
circle</code>’, ‘<code class=property>ellipse</code>’
|
|
or ‘<code class=property>polygon</code>’.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><dfn id=lturigt0
|
|
title="'shape-inside'!!'<uri>'"><uri></dfn>
|
|
|
|
<dd> 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 ‘<code
|
|
class=property>auto</code>’ had been specified.
|
|
</dl>
|
|
<!-- End section "The shape-inside property" -->
|
|
|
|
<h4 id=shape-image-threshold-property><span class=secno>4.3.3. </span>The
|
|
‘<a href="#shape-image-threshold"><code
|
|
class=property>shape-image-threshold</code></a>’ Property</h4>
|
|
|
|
<p> 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. 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
|
|
class=property>shape-outside</code></a>’ and ‘<a
|
|
href="#shape-inside"><code class=property>shape-inside</code></a>’.
|
|
|
|
<p class=note> The specified value of ‘<a
|
|
href="#shape-image-threshold"><code
|
|
class=property>shape-image-threshold</code></a>’ is applied to both
|
|
images used for ‘<a href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’ and ‘<a
|
|
href="#shape-inside"><code class=property>shape-inside</code></a>’.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=shape-image-threshold
|
|
title="'shape-image-threshold'">shape-image-threshold</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var><alphavalue></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0.5
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>alpha channel of the image specified by <uri>
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>The same as the specified value after clipping the
|
|
<alphavalue> to the range [0.0,1.0].
|
|
</table>
|
|
|
|
<p>The values of this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=ltalphavaluegt
|
|
title="'shape-image-threshold'!!'<alphavalue>'"><alphavalue></dfn>
|
|
|
|
<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" -->
|
|
<!--
|
|
<h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
|
|
|
|
<table class="propdef">
|
|
<tr>
|
|
<th>Name:</th>
|
|
<td><dfn title="'shape'">shape</dfn></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Value:</th>
|
|
<td><var><shape-outside></var> [ / <var><shape-inside></var> ] || <var><shape-image-threshold></var></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Initial:</th>
|
|
<td>see individual properties</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Applies to:</th>
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Inherited:</th>
|
|
<td>no</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Percentages:</th>
|
|
<td>N/A</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Media:</th>
|
|
<td>visual</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Computed value:</th>
|
|
<td>see individual properties</td>
|
|
</tr>
|
|
</table>
|
|
<p>
|
|
The 'shape' property is a shorthand property for setting the individual shape properties
|
|
at the same place in a style sheet.
|
|
</p>
|
|
|
|
<div class="example">
|
|
<p>Style declaration using the 'shape' shorthand property.</p>
|
|
<pre><code class="html">
|
|
<style type="text/css">
|
|
.shape {
|
|
shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png") 0.7;
|
|
}
|
|
</style>
|
|
</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" -->
|
|
|
|
<h2 id=conformance><span class=secno>5. </span>Conformance</h2>
|
|
|
|
<h3 id=conventions><span class=secno>5.1. </span>Document Conventions</h3>
|
|
|
|
<p> Conformance requirements are expressed with a combination of
|
|
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
|
|
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”,
|
|
“SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and
|
|
“OPTIONAL” in the normative parts of this document are to be
|
|
interpreted as described in RFC 2119. However, for readability, these
|
|
words do not appear in all uppercase letters in this specification.
|
|
|
|
<p> All of the text of this specification is normative except sections
|
|
explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p> Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p> Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<h3 id=conformance-classes><span class=secno>5.2. </span>Conformance
|
|
Classes</h3>
|
|
|
|
<p>Conformance to CSS Exclusions and Shapes is defined for three
|
|
conformance classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=style-sheet title="style sheet!!as conformance class">style
|
|
sheet</dfn>
|
|
|
|
<dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
|
|
<dt><dfn id=renderer>renderer</dfn>
|
|
|
|
<dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that interprets the semantics of a style sheet and renders documents that
|
|
use them.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that writes a style sheet.
|
|
</dl>
|
|
|
|
<p> A style sheet is conformant to CSS Exclusions and Shapes if all of its
|
|
declarations that use properties defined in this module have values that
|
|
are valid according to the generic CSS grammar and the individual grammars
|
|
of each property as given in this module.
|
|
|
|
<p> A renderer is conformant to CSS Exclusions and Shapes if, in addition
|
|
to interpreting the style sheet as defined by the appropriate
|
|
specifications, it supports all the features defined by CSS Exclusions and
|
|
Shapes by parsing them correctly and rendering the document accordingly.
|
|
However, the inability of a UA to correctly render a document due to
|
|
limitations of the device does not make the UA non-conformant. (For
|
|
example, a UA is not required to render color on a monochrome monitor.)
|
|
|
|
<p> An authoring tool is conformant to CSS Exclusions and Shapes if it
|
|
writes style sheets that are syntactically correct according to the
|
|
generic CSS grammar and the individual grammars of each feature in this
|
|
module, and meet all other conformance requirements of style sheets as
|
|
described in this module.
|
|
|
|
<h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
|
|
|
|
<p> So that authors can exploit the forward-compatible parsing rules to
|
|
assign fallback values, CSS renderers <strong>must</strong> treat as
|
|
invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">
|
|
ignore as appropriate</a>) any at-rules, properties, property values,
|
|
keywords, and other syntactic constructs for which they have no usable
|
|
level of support. In particular, user agents <strong>must not</strong>
|
|
selectively ignore unsupported component values and honor supported values
|
|
in a single multi-value property declaration: if any value is considered
|
|
invalid (as unsupported values must be), CSS requires that the entire
|
|
declaration be ignored.
|
|
|
|
<h3 id=experimental><span class=secno>5.4. </span> Experimental
|
|
Implementations</h3>
|
|
|
|
<p> To avoid clashes with future CSS features, the CSS2.1 specification
|
|
reserves a <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
|
|
syntax</a> for proprietary and experimental extensions to CSS.
|
|
|
|
<p> Prior to a specification reaching the Candidate Recommendation stage in
|
|
the W3C process, all implementations of a CSS feature are considered
|
|
experimental. The CSS Working Group recommends that implementations use a
|
|
vendor-prefixed syntax for such features, including those in W3C Working
|
|
Drafts. This avoids incompatibilities with future changes in the draft.
|
|
|
|
<h3 id=testing><span class=secno>5.5. </span> Non-Experimental
|
|
Implementations</h3>
|
|
|
|
<p> Once a specification reaches the Candidate Recommendation stage,
|
|
non-experimental implementations are possible, and implementors should
|
|
release an unprefixed implementation of any CR-level feature they can
|
|
demonstrate to be correctly implemented according to spec.
|
|
|
|
<p> To establish and maintain the interoperability of CSS across
|
|
implementations, the CSS Working Group requests that non-experimental CSS
|
|
renderers submit an implementation report (and, if necessary, the
|
|
testcases used for that implementation report) to the W3C before releasing
|
|
an unprefixed implementation of any CSS features. Testcases submitted to
|
|
W3C are subject to review and correction by the CSS Working Group.
|
|
|
|
<p> Further information on submitting testcases and implementation reports
|
|
can be found from on the CSS Working Group's website at <a
|
|
href="http://www.w3.org/Style/CSS/Test/">
|
|
http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the
|
|
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite">
|
|
public-css-testsuite@w3.org</a> mailing list.
|
|
|
|
<h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
|
|
|
|
<p> For this specification to be advanced to Proposed Recommendation, there
|
|
must be at least two independent, interoperable implementations of each
|
|
feature. Each feature may be implemented by a different set of products,
|
|
there is no requirement that all features be implemented by a single
|
|
product. For the purposes of this criterion, we define the following
|
|
terms:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd> each implementation must be developed by a different party and cannot
|
|
share, reuse, or derive from code used by another qualifying
|
|
implementation. Sections of code that have no bearing on the
|
|
implementation of this specification are exempt from this requirement.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd> passing the respective test case(s) in the official CSS test suite,
|
|
or, if the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created if
|
|
such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then there
|
|
must one or more additional UAs which can also pass those equivalent
|
|
tests in the same way for the purpose of interoperability. The equivalent
|
|
tests must be made publicly available for the purposes of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd> a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>is available to the general public. The implementation may be a
|
|
shipping product or other publicly available version (i.e., beta
|
|
version, preview release, or “nightly build”). Non-shipping product
|
|
releases must have implemented the feature(s) for a period of at least
|
|
one month in order to demonstrate stability.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p> The specification will remain Candidate Recommendation for at least six
|
|
months.
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p> This specification is made possible by input from Stephen Zilles,
|
|
Alexandru Chiculita, Andrei Bucur, Mihnea Ovidenie, Peter Sorotokin,
|
|
Virgil Palanciuc, Alan Stearns, Arno Gourdol, Eugene Veselov, Arron
|
|
Eicholz, Alex Mogilevsky, Chris Jones, Marcus Mielke, and the CSS Working
|
|
Group members.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>authoring tool, <a href="#authoring-tool"
|
|
title="authoring tool"><strong>5.2.</strong></a>
|
|
|
|
<li>Content area, <a href="#content-area"
|
|
title="Content area"><strong>2.</strong></a>
|
|
|
|
<li>Exclusion area, <a href="#exclusion-area"
|
|
title="Exclusion area"><strong>2.</strong></a>
|
|
|
|
<li>Exclusion element, <a href="#exclusion-element"
|
|
title="Exclusion element"><strong>2.</strong></a>
|
|
|
|
<li>Flow Container, <a href="#flow-container"
|
|
title="Flow Container"><strong>4.</strong></a>
|
|
|
|
<li>outside-inside, <a href="#outside-and-inside"
|
|
title=outside-inside><strong>2.</strong></a>
|
|
|
|
<li>renderer, <a href="#renderer" title=renderer><strong>5.2.</strong></a>
|
|
|
|
|
|
<li>‘<a href="#shape-image-threshold"><code
|
|
class=property>shape-image-threshold</code></a>’, <a
|
|
href="#shape-image-threshold"
|
|
title="'shape-image-threshold'"><strong>4.3.3.</strong></a>
|
|
<ul>
|
|
<li>‘<code class=css><alphavalue></code>’, <a
|
|
href="#ltalphavaluegt"
|
|
title="'shape-image-threshold', '<alphavalue>'"><strong>4.3.3.</strong></a>
|
|
|
|
</ul>
|
|
|
|
<li>‘<a href="#shape-inside"><code
|
|
class=property>shape-inside</code></a>’, <a href="#shape-inside"
|
|
title="'shape-inside'"><strong>4.3.2.</strong></a>
|
|
<ul>
|
|
<li>‘<code class=property>auto</code>’, <a href="#auto1"
|
|
title="'shape-inside', 'auto'"><strong>4.3.2.</strong></a>
|
|
|
|
<li>‘<code class=property>outside-shape</code>’, <a
|
|
href="#outside-shape"
|
|
title="'shape-inside', 'outside-shape'"><strong>4.3.2.</strong></a>
|
|
|
|
<li>‘<code class=css><shape></code>’, <a
|
|
href="#ltshapegt0"
|
|
title="'shape-inside', '<shape>'"><strong>4.3.2.</strong></a>
|
|
|
|
<li>‘<code class=css><uri></code>’, <a
|
|
href="#lturigt0"
|
|
title="'shape-inside', '<uri>'"><strong>4.3.2.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<a href="#shape-outside"><code
|
|
class=property>shape-outside</code></a>’, <a href="#shape-outside"
|
|
title="'shape-outside'"><strong>4.3.1.</strong></a>
|
|
<ul>
|
|
<li>‘<code class=property>auto</code>’, <a href="#auto0"
|
|
title="'shape-outside', 'auto'"><strong>4.3.1.</strong></a>
|
|
|
|
<li>‘<code class=css><shape></code>’, <a
|
|
href="#ltshapegt"
|
|
title="'shape-outside', '<shape>'"><strong>4.3.1.</strong></a>
|
|
|
|
<li>‘<code class=css><uri></code>’, <a href="#lturigt"
|
|
title="'shape-outside', '<uri>'"><strong>4.3.1.</strong></a>
|
|
</ul>
|
|
|
|
<li>style sheet
|
|
<ul>
|
|
<li>as conformance class, <a href="#style-sheet"
|
|
title="style sheet, as conformance class"><strong>5.2.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<a href="#wrap0"><code class=property>wrap</code></a>’,
|
|
<a href="#wrap0" title="'wrap'"><strong>3.3.2.</strong></a>
|
|
|
|
<li>‘<a href="#wrap-flow"><code
|
|
class=property>wrap-flow</code></a>’, <a href="#wrap-flow"
|
|
title="'wrap-flow'"><strong>3.1.1.</strong></a>
|
|
<ul>
|
|
<li>‘<code class=property>auto</code>’, <a href="#auto"
|
|
title="'wrap-flow', 'auto'"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=property>both</code>’, <a href="#both"
|
|
title="'wrap-flow', 'both'"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=property>clear</code>’, <a href="#clear"
|
|
title="'wrap-flow', 'clear'"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=property>end</code>’, <a href="#end"
|
|
title="'wrap-flow', 'end'"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=property>maximum</code>’, <a
|
|
href="#maximum"
|
|
title="'wrap-flow', 'maximum'"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=property>start</code>’, <a href="#start"
|
|
title="'wrap-flow', 'start'"><strong>3.1.1.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<a href="#wrap-margin"><code
|
|
class=property>wrap-margin</code></a>’, <a href="#wrap-margin"
|
|
title="'wrap-margin'"><strong>3.2.1.</strong></a>
|
|
|
|
<li>‘<a href="#wrap-padding"><code
|
|
class=property>wrap-padding</code></a>’, <a href="#wrap-padding"
|
|
title="'wrap-padding'"><strong>3.2.2.</strong></a>
|
|
|
|
<li>Wrapping context, <a href="#wrapping-context"
|
|
title="Wrapping context"><strong>2.</strong></a>
|
|
|
|
<li>‘<a href="#wrap-through"><code
|
|
class=property>wrap-through</code></a>’, <a href="#wrap-through"
|
|
title="'wrap-through'"><strong>3.3.1.</strong></a>
|
|
<ul>
|
|
<li>‘<code class=property>none</code>’, <a href="#none"
|
|
title="'wrap-through', 'none'"><strong>3.3.1.</strong></a>
|
|
|
|
<li>‘<a href="#wrap0"><code class=property>wrap</code></a>’,
|
|
<a href="#wrap"
|
|
title="'wrap-through', 'wrap'"><strong>3.3.1.</strong></a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property
|
|
href="#shape-image-threshold">shape-image-threshold</a>
|
|
|
|
<td><alphavalue>
|
|
|
|
<td>0.5
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>alpha channel of the image specified by <uri>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#shape-inside">shape-inside</a>
|
|
|
|
<td>outside-shape | auto | <shape> | <uri>
|
|
|
|
<td>outside-shape
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#shape-outside">shape-outside</a>
|
|
|
|
<td>auto | <shape> | <uri>
|
|
|
|
<td>auto
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<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 | start | end | maximum | clear
|
|
|
|
<td>auto
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#wrap-margin">wrap-margin</a>
|
|
|
|
<td><length>
|
|
|
|
<td>0
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#wrap-padding">wrap-padding</a>
|
|
|
|
<td><length>
|
|
|
|
<td>0
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#wrap-through">wrap-through</a>
|
|
|
|
<td>wrap | none
|
|
|
|
<td>wrap
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|