- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 27 Oct 2011 01:09:03 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv11367
Modified Files:
Exclusions.src.html Overview.html alternate-spec-style.css
style-toggle.js
Log Message:
Updated spec. with new style and added illustrations for exclusions and shapes
Index: style-toggle.js
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/style-toggle.js,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- style-toggle.js 24 Oct 2011 19:23:01 -0000 1.1
+++ style-toggle.js 27 Oct 2011 01:09:01 -0000 1.2
@@ -7,7 +7,7 @@
function toggleStyle() {
var st = document.getElementById('st');
- if (st.getAttribute('disabled') === 'true') {
+ if (st.hasAttribute('disabled') === true) {
st.removeAttribute('disabled');
toggle.textContent = defaultStyleText;
} else {
@@ -17,11 +17,18 @@
}
window.onload = function() {
+ var st = document.getElementById('st');
var divHead = document.getElementById('div-head');
+ var defaultText = additionalStyleText;
+
+ if (st.hasAttribute('disabled') === false) {
+ defaultText = defaultStyleText;
+ }
+
toggle = document.createElement('a');
divHead.insertBefore(toggle, divHead.firstChild);
- toggle.textContent = additionalStyleText;
+ toggle.textContent = defaultText;
toggle.setAttribute('class', 'toggle');
toggle.setAttribute('href', '#');
toggle.addEventListener("click", toggleStyle, false);
@@ -29,3 +36,4 @@
})();
+
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Overview.html 26 Oct 2011 17:38:49 -0000 1.7
+++ Overview.html 27 Oct 2011 01:09:01 -0000 1.8
@@ -9,7 +9,7 @@
<link href=default.css rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
- <link disabled=true href=alternate-spec-style.css id=st rel=stylesheet
+ <link disabled href=alternate-spec-style.css id=st rel=stylesheet
title="additional spec styles" type="text/css">
<script src=style-toggle.js type="text/javascript"></script>
@@ -41,23 +41,54 @@
opacity: 1;
color: #46A4E9;
[...1547 lines suppressed...]
<tr>
+ <th><a class=property href="#wrap0">wrap</a>
+
+ <td><wrap-flow> || <wrap-margin> [ / <wrap-padding>]
+
+ <td>see individual properties
+
+ <td>block-level elements
+
+ <td>no
+
+ <td>N/A
+
+ <td>visual
+
+ <tr>
<th><a class=property href="#wrap-flow">wrap-flow</a>
<td>auto | both | left | right | maximum | clear
Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/alternate-spec-style.css,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- alternate-spec-style.css 24 Oct 2011 19:23:01 -0000 1.1
+++ alternate-spec-style.css 27 Oct 2011 01:09:01 -0000 1.2
@@ -1,9 +1,9 @@
-@import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);
-@import url(http://fonts.googleapis.com/css?family=Inconsolata);
+@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
body {
- font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
- font-size: 16px;
+ font-family: 'Droid Serif', serif;
+ font-size: 14px;
width: 36em;
color: #2f2f2f;
line-height: 1.5em;
@@ -14,12 +14,28 @@
font-weight: bold;
}
+h1 {
+ font-size: 200%;
+}
+
+h2 {
+ font-size: 160%;
+}
+
+h3 {
+ font-size: 140%;
+}
+
+h4, h5 {
+ font-size: 120%;
+}
+
h2, h3, h4, h5, h6 {
margin-top: 1.2em;
}
h1, h2, h3, h4, h5, h6, table, th, tr, td {
- font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
+ font-family: 'Droid Serif', serif;
}
h1+h2 {
@@ -31,7 +47,6 @@
h1 {
margin-bottom: 0em;
line-height: 1em;
- font-size: 180%;
}
a, a:visited, a:link, :link {
@@ -65,12 +80,12 @@
}
pre, code {
- font-family: Inconsolata, monospace;
+ font-family: 'Droid Sans Mono', Inconsolata, monospace;
font-size: 83%;
line-height: 1.4em;
}
-code.xml {
+code.xml, code.html, code.css {
color: #3f3f3f;
}
@@ -336,7 +351,6 @@
#div-head > h1:before {
content: '';
background-image: url(http://www.w3.org/2008/site/images/logo-w3c-mobile-lg);
- background-color: gray;
display: block;
width: 90px;
height: 53px;
Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Exclusions.src.html 26 Oct 2011 17:38:49 -0000 1.7
+++ Exclusions.src.html 27 Oct 2011 01:09:01 -0000 1.8
@@ -8,7 +8,7 @@
<link id="st" href="alternate-spec-style.css" rel="stylesheet"
- type="text/css" disabled="true" title="additional spec styles">
+ type="text/css" disabled title="additional spec styles">
<script type="text/javascript" src="style-toggle.js"></script>
@@ -40,13 +40,44 @@
opacity: 1;
color: #46A4E9;
}
+
+
+
+ div.issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -26ex;
+ padding-right: 0.5em;
+ font-weight: normal;
+ font-size: 11px;
+ text-align: right;
+ background-color: white;
+ font-size: 90%;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ div.issue-marker a {
+ color: red;
+ }
+
+ div.issue-marker .desc {
+ font-size: 80%;
+ line-height: 1.4em;
+ }
+
+ div.issue-marker .desc strong {
+ font-weight: bold;
+ font-size: 120%;
+ color: red;
+ }
</style>
</head>
<body>
<div id="div-head" class="head">
<!--logo-->
- <h1 id="css-exclusions-module">CSS exclusions and shapes module level 1</h1>
+ <h1 id="css-exclusions-module">CSS exclusions and shapes</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
@@ -124,12 +155,12 @@
<p>
An element's wrapping context holds the collection of areas that an element should 'wrap around'
when laying out its inline flow content. An element will wrap its content in the area that
- correspond to the substraction of its wrapping context shapes from its own <span>content area</span>.
+ correspond to the subtraction of its wrapping context from its own <span>content area</span>.
</p>
<p>
An element inherit its
- <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a>'s
+ <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 'wrap-through' property.
</p>
@@ -260,10 +291,23 @@
of the exclusions' containing block.
</p>
- <div class="issue">
- What is the expected behavior if we have two positioned exclusions at the same height position,
- but with conflicting 'wrap-flow' values. For example, two circles, one with wrap-flow: right and
- one with wrap-flow: left?
+ <div class="figure">
+ <img 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
+ 'wrap-flow' set to 'both', 'left', 'right' and 'clear' respectively. The lighter gray
+ areas show the additional areas that are excluded for inline layout as a result of the
+ 'wrap-flow' value. For example, the area to the right of 'B' cannot be used for inline
+ layout because the 'wrap-flow' for 'B' is 'left'.</p>
+
+ <p>The background 'blue' 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="example">
@@ -508,10 +552,11 @@
</div>
</code></pre>
- <img class="singleImgExample" src="images/exclusion_wrap_through.png" alt="Example rendering of wrap-through: wrap | none" />
+ <img class="singleImgExample" src="images/exclusion_wrap_through.png" alt="Example rendering of wrap-through: wrap | none" style="max-width:50%"/>
</div>
<!-- End section "wrap-through property" -->
- <!--
+
+
<h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
<table class="propdef">
<tr>
@@ -551,11 +596,17 @@
The 'wrap' property is a shorthand property for setting the exclusions properties
at the same place in the style sheet.
</p>
- -->
+
+
<!-- End section "wrap shorthand property" -->
<!-- End section "Propagation of Exclusions" -->
<h3 id="exclusions-order">Exclusions order</h3>
+
+ <div class="issue-marker"><p class="desc"><strong>Issue 1</strong>: z-index only applies to positioned elements. Since any element can
+ be an exclusion and since they can overlap, should we say that the order of a statically positioned
+ exclusion cannot be controlled?</p></div>
+
<p>
Exclusions follow the painting order (See [[!CSS21]] Appendix E). Exclusions are applied in reverse
to the document order in which they are defined. The last exclusion appears on top
@@ -564,9 +615,6 @@
of positioned exclusions, z-index can be used.
</p>
- <div class="issue">z-index only applies to positioned elements. Since any element can
- be an exclusion and since they can overlap, should we say that the order of a statically positioned
- exclusion cannot be controlled?</div>
<div class="example">
<p>Ordering of exclusions.</p>
@@ -605,7 +653,7 @@
</div>
<!-- End section "Order of Exclusions" -->
- <h3 id="processing-model-of-exclusions">Processing Model of Exclusions</h3>
+ <h3 id="exclusions-implementation-note">Exclusions implementation note</h3>
<p><em>This section is not normative.</em></p>
<p>
Exclusions can be specified on positioned elements and elements can be positioned
@@ -637,8 +685,6 @@
containing block is the initial containing block.
</p>
- <div class="issue">Should we move this at the end in an 'implementation note' section?</div>
-
<!-- End section "Processing Model of Exclusions" -->
<!-- End section "Exclusions" -->
@@ -680,7 +726,7 @@
Lorem ipsum dolor sit amet...
</div>
</code></pre>
- <img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model." />
+ <img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model." style="max-width:40%"/>
</div>
<h3 id="shapes-from-svg-syntax">Shapes from SVG Syntax</h3>
@@ -770,11 +816,9 @@
in percentages are resolved from the border box of the element. The coordinate system for the
shape has its origin on the top-left corder of the border box with the x-axis running to the right
and the y-axis running downwards. If the SVG element uses unitless coordinate values, they are equivalent
- to using 'px' units. When defining shapes using percentages,
- the border box of the element must always be fully known in advance.</p>
+ to using 'px' units. If the border box of the element is dependent on auto sizing (i.e., the element's
+ 'width' or 'height' property is 'auto'), then the percentage values are computed agains '0' and resolve to 0.</p>
- <div class="issue">We need to clarify what this last sentence means.</div>
-
<!-- End section "Shapes from SVG Syntax -->
<h3 id="shapes-from-image">Shapes from Image</h3>
@@ -784,7 +828,7 @@
values of the 'background-image' property can be applied.
</p>
- <div class="issue">Need to clarify what we mean by this last sentence.</div>
+ <div class="issue-marker"><p class="desc"><strong>Issue 2</strong>: Need to clarify what we mean by this last sentence.</div>
<p>
The shape is computed to be the path that encloses the area where the opacity of
@@ -797,8 +841,6 @@
them. In order to avoid that, another exclusion element can be overlaid.
</p>
- <div class="issue">Need to say how content clears shapes with cavities</div>
-
<!-- End section "Shapes from image" -->
<h3 id="declaring-shapes">Declaring Shapes</h3>
@@ -873,6 +915,23 @@
effect is as if the value 'auto' had been specified.
</dd>
</dl>
+
+ <div class='figure'>
+ <img src="images/shapes-exclusions.png" width="70%"/>
+ <p class="caption">Arbitrary shapes for exclusions</p>
+ </div>
+
+ <div>
+ <p>The above figure shows how 'shape-outside' shapes impact the exclusion areas.
+ The red box represents an element's content box and 'A', 'B', 'C' and 'C'
+ represent exclusions with a complex shape and their 'wrap-flow' property set
+ to 'both', 'left', 'right' and 'clear', respectively.</p>
+
+ <p>As illustrated in the picture, when an exclusion allows wrapping on all sides,
+ text can flow inside 'holes' in the exclusion (as for exclusion 'A'). Otherwise,
+ the exclusion clears the area on the side(s) defined by wrap flow, as illustrated
+ for 'B', 'C' and 'D' above.</p>
+ </div>
<!-- End section "The shape-outside Property" -->
<h4 id="shape-inside-property">The 'shape-inside' Property</h4>
Received on Thursday, 27 October 2011 01:09:05 UTC