Home Specs Ideas Testing About
You are here: CSS Working Group Wiki » Ideas and Resolutions » Introduction

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
ideas:css3-floats-use-cases [2011/07/26 05:10] – [UC 4: disjoint shapes] rcalimanideas:css3-floats-use-cases [2011/10/28 10:21] – vhardy
Line 1: Line 1:
 ===== Introduction ===== ===== Introduction =====
  
-This page contains use cases for exclusions and comparative examples of markup using the CSS Exclusions proposal, CSS3 Floats and Daniel Glazman's proposal.+THIS PAGE IS DEPRECATED AND REPLACED BY: [ http://wiki.csswg.org/ideas/css3-exclusions-use-cases ] 
 + 
 +This page contains use cases for exclusions and comparative examples of markup using the CSS Exclusions and Shapes proposal, CSS3 Floats and Daniel Glazman's proposal.
  
 ==== Proposals ==== ==== Proposals ====
  
-  * CSS Exclusions: [ http://dev.w3.org/csswg/css3-exclusions/ ]+  * CSS Exclusions and Shapes: [ http://dev.w3.org/csswg/css3-exclusions/ ]
   * CSS3 Floats: [ http://www.interoperabilitybridges.com/css3-floats/ ]   * CSS3 Floats: [ http://www.interoperabilitybridges.com/css3-floats/ ]
   * Daniel Glazman: [ http://lists.w3.org/Archives/Public/www-style/2011Jun/0457.html ]   * Daniel Glazman: [ http://lists.w3.org/Archives/Public/www-style/2011Jun/0457.html ]
Line 17: Line 19:
   * What is affected by an exclusion?   * What is affected by an exclusion?
  
-=== CSS Exclusion Proposal in 3 Questions ===+=== CSS Exclusions and Shapes Proposal in 3 Questions ===
  
 == How do you define an exclusion shape? == == How do you define an exclusion shape? ==
  
-Done by the wrap-shape-mode property. By default, the wrap/exclusion shape is the element's box. A different shape can be defined by the wrap-shape mode property. The same shape applies to both the inside content and the outside content.+Done by the wrap-flow property. By default, the wrap/exclusion shape is the element's box. A different shape can be defined by the shape-outside mode property. The same shape applies to both the inside content and the outside content.
  
 == What is the container model? == == What is the container model? ==
  
-There are two sides to this: the wrap-shape for the internal content and the exclusion shape for other content.+There are two sides to this: the shape-inside for the internal content and the exclusion shape defined shape-outside for the content outside the exclusion element. By default the shape-inside property is the same as shape-outside.
  
-For internal content, the closest wrap-shape, defined on an ancestor, defines what shape the content wraps into (note that this works in conjunction with exclusions as well).+For internal content, the closest shape-inside, defined on an ancestor, defines what shape the content wraps into (note that this works in conjunction with exclusions as well).
  
-For external content, the wrap-shape-order property controls which elements are affected by exclusions, orthogonal to the container relations. See next question.+For external content, the z-index property controls the order of exclusions applied to elements. Elements can also be protected from exclusions overlapping them.  See next question.
  
 == What is affected by an exclusion? == == What is affected by an exclusion? ==
  
-The wrap-shape-order property controls which elements are affected by an exclusion: Exclusions will only affect block elements with equal or smaller ‘wrap-shape-order’ value in the same wrapping context. A wrapping context is created by an element which sets its wrap-shape-order to a value other than auto (and that is not an exclusion).+Exclusions are applied in reverse to the document order in which they are defined.   
 +The last exclusion appears on top of all other exclusions. 
 +  
 +For elements with a position value other than static, the z-index property can alter the order of applying the exclusions. The exclusion element with the highest z-index value will apply on top of other elements with lower z-index values, regardless of their document order.  
  
-There are dependency issues, as illustrated in example IX of the draft.+The wrapping contex of sibling elements of an exclusion element will be affected by the exclusion. To protect the wrapping context of an element the 'wrap-through' property needs to be set to none on the element to be protected. 
  
 === CSS3 Floats Proposal in 3 Questions === === CSS3 Floats Proposal in 3 Questions ===
Line 74: Line 79:
 {{:ideas:css3-floats-use-cases:exclusions_simple.jpg?500|}} {{:ideas:css3-floats-use-cases:exclusions_simple.jpg?500|}}
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 <code html> <code html>
 <html> <html>
Line 87: Line 92:
  /* with SVG shape */  /* with SVG shape */
  #shape{  #shape{
- position:absolute; + position: absolute; 
- top:50%; + top: 50%; 
- left:50%; + left: 50%; 
- wrap-shape-mode: around; + wrap-flow: both; 
- wrap-shape: poly(x1,y1 ... xn,yn);    + shape-outside: circle(50%, 50%, 30%);    
  }   } 
   
  /* with image */  /* with image */
  #shape{  #shape{
- position:absolute; + position: absolute; 
- top:50%; + top: 50%; 
- left:50%; + left: 50%; 
- wrap-shape-mode: around;  + wrap-flow: both;  
- wrap-shape-image: url(mycircle.png); + shape-outside: url(mycircle.png); 
- wrap-shape-image-threshold: 100%;+ shape-image-threshold: 100%;
  }  }
   
Line 134: Line 139:
  top:50%;  top:50%;
  left:50%;  left:50%;
- wrap-shape: poly(x1,y1 ... xn,yn);    + wrap-shape: polygon(x1,y1 ... xn,yn);    
  }   } 
   
Line 189: Line 194:
 {{:ideas:css3-floats-use-cases:exclusions_overlapping.jpg?500|}} {{:ideas:css3-floats-use-cases:exclusions_overlapping.jpg?500|}}
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 <code html> <code html>
 <html> <html>
Line 200: Line 205:
  }  }
   
- #shape1{ + #circle{ 
- position:absolute; + position: absolute; 
- top:20%; + top: 20%; 
- left:60%;    + left: 60%;    
- color:red;+ color: red;
   
- wrap-shape-order: 2; /* avoid being affected by #shape2 */ + z-index: 1; /* avoid being affected by #square */ 
- wrap-shape-mode: around;  + wrap-flow: both;  
- wrap-shape-margin:10px; + wrap-margin: 10px; 
- wrap-shape: poly(x1,y1 ... xn,yn);    + wrap-shape: circle(50%, 50%, 30%);    
  }  }
   
- #shape2{+ /* will be affected by #circle because the z-index is 0 by default */    
 + #square{
  position:absolute;  position:absolute;
  bottom:20%;  bottom:20%;
Line 218: Line 224:
  color:blue;      color:blue;    
   
- wrap-shape-order: 1; /* will be affected by #shape1 */ + wrap-flow: both;   
- wrap-shape-mode: around;   + wrap-shape: rect(10%, 50%, 200px 200px);
- wrap-shape-margin:10px; +
- wrap-shape: rect(x, y, 200px 200px);+
  }   } 
   
Line 235: Line 239:
 </html>  </html> 
 </code> </code>
- +        
  
 ==== CSS3 Floats ==== ==== CSS3 Floats ====
Line 251: Line 254:
  /* with SVG shape */  /* with SVG shape */
  #shape1{  #shape1{
- float:positioned; + float: positioned; 
- position:absolute; + position: absolute; 
- top:20%; + top: 20%; 
- left:60%;    + left: 60%;    
- color:red;+ color: red;
                  
- z-index:2;     + z-index: 2;     
- wrap-shape: poly(x1,y1 ... xn,yn);     + wrap-shape: polygon(x1,y1 ... xn,yn);     
- wrap-margin:10px;+ wrap-margin: 10px;
  }  }
   
  #shape2{  #shape2{
- float:positioned; + float: positioned; 
- position:absolute; + position: absolute; 
- bottom:20%; + bottom: 20%; 
- left:30%; + left: 30%; 
- color:blue;    + color: blue;    
   
- z-index:1; + z-index: 1; 
- wrap-shape: rect(x, y, 200px 200px);     + wrap-shape: rectangle(x, y, 200px 200px);     
- wrap-margin:10px;+ wrap-margin: 10px;
  }   } 
   
Line 353: Line 356:
  
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====    
 +<html><span style="color:red">No support for repeating exclusion shapes. Solution:TBD</span></html> 
 <code html> <code html>
 <html> <html>
Line 369: Line 374:
  width:20px;  width:20px;
  left:0;  left:0;
-     
- wrap-shape-mode: right; 
- wrap-shape: url("triangle_90deg.png");  
- wrap-shape-image-position: top left; 
- wrap-shape-image-repeat: repeat-y; 
- wrap-image-image-threshold: 100%;  
  }                           }                         
   
Line 470: Line 469:
 {{:ideas:css3-floats-use-cases:exclusions_disjoint_shapes_mask.png?300|}} {{:ideas:css3-floats-use-cases:exclusions_disjoint_shapes_mask.png?300|}}
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
  
 Multiple solutions possible with single image, multiple positioned images or SVG shapes. Multiple solutions possible with single image, multiple positioned images or SVG shapes.
Line 486: Line 485:
  /* with SVG paths */  /* with SVG paths */
  #disjoint-article{  #disjoint-article{
- position:absolute; + position: absolute; 
- width:100%; + width: 100%; 
- height:380px; /* disjoint-shapes-mask.png height*/ + height: 380px; 
- color:red; + color: red; 
- bottom:0;+ bottom: 0;
                
- wrap-shape-mode: around;  + wrap-flow: both; 
 + wrap-padding: 10px;  
  /* circle and triangle SVG shapes */  /* circle and triangle SVG shapes */
- wrap-shape: circle(cx,cy,r), path(Mx1,y1 Cx2,y2 ... Z);  + shape-outside: circle(cx,cy,r), polygon(x1, y1, x2, y2, x3, y3); 
 + 
 + /* the shape-inside propery for content inherits from shape-outside so we can ignore declaring it */
  }  }
        
Line 500: Line 502:
  /* with image */  /* with image */
  #disjoint-article{  #disjoint-article{
- position:absolute; + position: absolute; 
- width:100%; + width: 100%; 
- height:380px; /* disjoint-shapes-mask.png height*/ + height: 380px; /* disjoint-shapes-mask.png height*/ 
- color:red; + color: red; 
- bottom:0;+ bottom: 0;
      
- wrap-shape-mode: around;   + wrap-flow: both;   
- wrap-shape-image: url("disjoint-shapes-mask.png");  + shape-image: url("disjoint-shapes-mask.png");  
- wrap-shape-image-position: bottom left; + shape-image-threshold: 100%;
- wrap-shape-image-threshold: 100%;+
  }  }
   
Line 653: Line 654:
  
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 * low reusability: requires duplication of markup * low reusability: requires duplication of markup
 <code html> <code html>
Line 661: Line 662:
      
  #article1{   #article1{ 
- position:relative;+ position: relative;
  }  }
   
Line 668: Line 669:
  column-count: 2;  column-count: 2;
  column-gap: 1em;  column-gap: 1em;
- color:red; + color: red; 
  }  }
   
  /* with SVG Shape */  /* with SVG Shape */
  .exclusion{  .exclusion{
- position:absolute;+ position: absolute;
   
- wrap-shape-mode: around; + wrap-flow: both; 
- wrap-shape: polygon(x1,y1 ... xn,yn); + shape-outside: polygon(x1, y1 ... xn, yn); 
  }  }
   
  /* with image */  /* with image */
  .exclusion{  .exclusion{
- width:100px;  /* width of triangle.png */ + width: 100px;  /* width of triangle.png */ 
- height:200px; /* height of triangle.png */+ height: 200px; /* height of triangle.png */
   
- position:absolute;+ position: absolute;
   
- wrap-shape-mode: around;   + wrap-flow: both;   
- wrap-shape-image: url("triangle.png"); + shape-image: url("triangle.png"); 
- wrap-shape-image-position: top left; + shape-image-threshold: 100%;
- wrap-shape-image-threshold: 100%;+
  }  }
      
      
  #article1 .exclusion{  #article1 .exclusion{
- top:50%; + top: 50%; 
- left:30%+ left: 30%
  }  }
   
  #article2 .exclusion{  #article2 .exclusion{
- top:50%; + top: 50%; 
- left:70%+ left: 70%
  }   } 
   
Line 840: Line 840:
  
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 (!) Content inside the shape will have transformations applied, as well (!) Content inside the shape will have transformations applied, as well
  
Line 849: Line 849:
      
  #article1{   #article1{ 
- position:relative;+ position: relative;
  }  }
   
  #article2{   #article2{ 
- position:relative;+ position: relative;
  column-count: 2;  column-count: 2;
  column-gap: 1em;  column-gap: 1em;
- color:red; + color: red; 
  }  }
   
  /* with SVG Shape */  /* with SVG Shape */
  .exclusion{  .exclusion{
- position:absolute;+ position: absolute;
   
- wrap-shape-mode: around; + wrap-flow: both; 
- wrap-shape: polygon(x1,y1 ... xn,yn); + shape-outside: polygon(x1, y1 ... xn, yn); 
  }  }
   
Line 874: Line 874:
  position:absolute;  position:absolute;
   
- wrap-shape-mode: around;   + wrap-flow: both;   
- wrap-shape-image: url("triangle.png"); + shape-image: url("triangle.png"); 
- wrap-shape-image-position: top left; + shape-image-threshold: 100%;
- wrap-shape-image-threshold: 100%;+
  }  }
      
      
  #article1 .exclusion{  #article1 .exclusion{
- top:50%; + top: 50%; 
- left:30%+ left: 30%
  }  }
   
  #article2 .exclusion{  #article2 .exclusion{
- top:50%; + top: 50%; 
- left:70%; + left: 70%;  
 +
  /* increase scale, then flip on x-axis */    /* increase scale, then flip on x-axis */  
      transform: scale(1.5) scale(1, -1);      transform: scale(1.5) scale(1, -1);
Line 997: Line 997:
  
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 <code html> <code html>
 <html> <html>
Line 1010: Line 1010:
  /* with SVG shape */  /* with SVG shape */
  #shape{  #shape{
- position:absolute; + position: absolute; 
- top:50%; + top: 50%; 
- left:50%;    + left: 50%;    
- color:blue;+ color: blue;
                  
- wrap-shape-mode: around;     + wrap-flow: both;     
- wrap-shape: poly(x1,y1 ... xn,yn); + shape-outside: polygon(x1, y1, ... xn, yn); 
- wrap-shape-margin: 15px;     + wrap-margin: 15px;     
- wrap-shape-padding: 5px;    + wrap-padding: 5px;    
  }  }
   
Line 1128: Line 1128:
  
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 <code html> <code html>
 <html> <html>
Line 1136: Line 1136:
  /* with SVG shape */   /* with SVG shape */ 
  #article{  #article{
- wrap-shape-mode: content;     + shape-inside: polygon(x1,y1 ...xn,yn);  
- wrap-shape: polygon(x1,y1 ...xn,yn);+ wrap-padding: 10px;
      
  background-image: url(airplane.png);   background-image: url(airplane.png); 
  background-position: center center;   background-position: center center; 
-         mask-box-image: url(circle.png) 100 stretch;+     mask-box-image: url(circle.png) 100 stretch;
  color:blue;  color:blue;
  }  }
Line 1147: Line 1147:
  /* with image */   /* with image */ 
  #article{  #article{
- wrap-shape-mode: content;     + shape-image: url(circle.png); 
- wrap-shape-image: url(circle.png); + shape-image-threshold: 100%;  
- wrap-shape-image-threshold: 100%;+ wrap-padding: 10px;
      
  background-image: url(airplane.png);   background-image: url(airplane.png); 
  background-position: center center;   background-position: center center; 
-         mask-box-image: url(circle.png) 100 stretch;+     mask-box-image: url(circle.png) 100 stretch;
  color:blue;  color:blue;
  }  }
Line 1241: Line 1241:
 {{:ideas:css3-floats-use-cases:exclusions-dropcap.png?500|}} {{:ideas:css3-floats-use-cases:exclusions-dropcap.png?500|}}
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
 <code html> <code html>
 <style> <style>
  /* with SVG shape */  /* with SVG shape */
- #dropMany{ + #dropMany{       
- wrap-shape: polygon(0px,0px 280px,0px 220px,125px 0px,125px); +     wrap-flow: right; 
- wrap-shape-mode: around;+ shape-outside: polygon(0px,0px 280px,0px 220px,125px 0px,125px);
  }    }  
   
  /* with image */  /* with image */
  #dropMany{     #dropMany{   
- wrap-shape-mode: around; + wrap-flow: right; 
- wrap-image: url(shape-for-many.png); + shape-image: url(shape-for-many.png); 
- wrap-image-threshold: 100%; + shape-image-threshold: 100%; 
  }  }
 </style> </style>
Line 1296: Line 1296:
 ===== Issues ===== ===== Issues =====
  
-==== CSS Exclusions ====+==== CSS Exclusions and Shapes ====
  
-=== Limitations overview: === +=== Limitations overview: ===  
-  * Probable dependencies on child layout to determine parent's layout and exclusion goes against classic CSS thinking / implementation.+  * [regression] no support for repeating exclusion shapes or images 
 +  * (?) [TBD: is this still applicable?] Probable dependencies on child layout to determine parent's layout and exclusion goes against classic CSS thinking / implementation.
     * Possible circular dependencies     * Possible circular dependencies
   * reusability of shapes requires duplication of HTML markup   * reusability of shapes requires duplication of HTML markup
-  * -no support for repeating shapes- repeating shapes can be achieved only with "wrap-shape-image" and "wrap-shape-image-repeat" 
  
 ==== CSS3 Floats ==== ==== CSS3 Floats ====
 
ideas/css3-floats-use-cases.txt · Last modified: 2014/12/09 15:48 by 127.0.0.1
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki