W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-exclusions Exclusions.src.html,1.7,1.8 Overview.html,1.7,1.8 alternate-spec-style.css,1.1,1.2 style-toggle.js,1.1,1.2

From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
Date: Thu, 27 Oct 2011 01:09:03 +0000
To: public-css-commits@w3.org
Message-Id: <E1RJESt-0002y8-K7@lionel-hutz.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>&lt;wrap-flow&gt; || &lt;wrap-margin&gt; [ / &lt;wrap-padding&gt;]
+
+     <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 @@
 &lt;/div&gt;
 </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... 
 &lt;/div&gt;
 </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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 27 October 2011 01:09:07 GMT