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
ideas:css3-floats-use-cases [2011/07/26 05:10] – [UC 4: disjoint shapes] rcalimanideas:css3-floats-use-cases [2014/12/09 15:48] (current) – external edit 127.0.0.1
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