This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
ideas:css3-floats-use-cases [2011/07/26 05:10] – [UC 4: disjoint shapes] rcaliman | ideas:css3-floats-use-cases [2011/10/28 08:37] – [Each Model in 3 Questions] rcaliman | ||
---|---|---|---|
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' | + | This page contains use cases for exclusions and comparative examples of markup using the CSS Exclusions |
==== Proposals ==== | ==== Proposals ==== | ||
- | * CSS Exclusions: [ http:// | + | * CSS Exclusions |
* CSS3 Floats: [ http:// | * CSS3 Floats: [ http:// | ||
* Daniel Glazman: [ http:// | * Daniel Glazman: [ http:// | ||
Line 17: | Line 17: | ||
* What is affected by an exclusion? | * What is affected by an exclusion? | ||
- | === CSS Exclusion | + | === CSS Exclusions and Shapes |
== How do you define an exclusion shape? == | == How do you define an exclusion shape? == | ||
- | Done by the wrap-shape-mode | + | Done by the wrap-flow property. By default, the wrap/ |
== 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 internal content, the closest | + | 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 | + | For external content, the z-index property controls |
== What is affected by an exclusion? == | == What is affected by an exclusion? == | ||
- | The wrap-shape-order property controls | + | Exclusions are applied in reverse to the document |
+ | The last exclusion | ||
+ | |||
+ | For elements with a position value other than static, the z-index property can alter the order of applying | ||
- | There are dependency issues, as illustrated in example IX of the draft. | + | The wrapping contex |
=== CSS3 Floats Proposal in 3 Questions === | === CSS3 Floats Proposal in 3 Questions === | ||
Line 74: | Line 77: | ||
{{: | {{: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
<code html> | <code html> | ||
< | < | ||
Line 87: | Line 90: | ||
/* with SVG shape */ | /* with SVG shape */ | ||
#shape{ | #shape{ | ||
- | position: | + | position: absolute; |
- | top: | + | top: 50%; |
- | left: | + | 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: | + | position: absolute; |
- | top: | + | top: 50%; |
- | left: | + | left: 50%; |
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape-image: url(mycircle.png); | + | shape-outside: url(mycircle.png); |
- | wrap-shape-image-threshold: | + | shape-image-threshold: |
} | } | ||
Line 134: | Line 137: | ||
top:50%; | top:50%; | ||
left:50%; | left:50%; | ||
- | wrap-shape: | + | wrap-shape: |
} | } | ||
Line 189: | Line 192: | ||
{{: | {{: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
<code html> | <code html> | ||
< | < | ||
Line 200: | Line 203: | ||
} | } | ||
- | #shape1{ | + | #circle{ |
- | position: | + | position: absolute; |
- | top: | + | top: 20%; |
- | left: | + | left: 60%; |
- | color: | + | 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: | + | wrap-margin: |
- | wrap-shape: | + | wrap-shape: |
} | } | ||
- | #shape2{ | + | /* will be affected by #circle because the z-index is 0 by default */ |
+ | #square{ | ||
position: | position: | ||
bottom: | bottom: | ||
Line 218: | Line 222: | ||
color: | color: | ||
- | wrap-shape-order: 1; /* will be affected by #shape1 */ | + | wrap-flow: both; |
- | wrap-shape-mode: | + | wrap-shape: |
- | wrap-shape-margin: | + | |
- | wrap-shape: | + | |
} | } | ||
Line 235: | Line 237: | ||
</ | </ | ||
</ | </ | ||
- | + | | |
==== CSS3 Floats ==== | ==== CSS3 Floats ==== | ||
Line 251: | Line 252: | ||
/* with SVG shape */ | /* with SVG shape */ | ||
#shape1{ | #shape1{ | ||
- | float: | + | float: positioned; |
- | position: | + | position: absolute; |
- | top: | + | top: 20%; |
- | left: | + | left: 60%; |
- | color: | + | color: red; |
- | z-index: | + | z-index: 2; |
- | wrap-shape: | + | wrap-shape: |
- | wrap-margin: | + | wrap-margin: |
} | } | ||
#shape2{ | #shape2{ | ||
- | float: | + | float: positioned; |
- | position: | + | position: absolute; |
- | bottom: | + | bottom: 20%; |
- | left: | + | left: 30%; |
- | color: | + | color: blue; |
- | z-index: | + | z-index: 1; |
- | wrap-shape: | + | wrap-shape: |
- | wrap-margin: | + | wrap-margin: |
} | } | ||
Line 353: | Line 354: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
+ | < | ||
<code html> | <code html> | ||
< | < | ||
Line 369: | Line 372: | ||
width: | width: | ||
left:0; | left:0; | ||
- | |||
- | wrap-shape-mode: | ||
- | wrap-shape: | ||
- | wrap-shape-image-position: | ||
- | wrap-shape-image-repeat: | ||
- | wrap-image-image-threshold: | ||
} | } | ||
Line 470: | Line 467: | ||
{{: | {{: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
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 483: | ||
/* with SVG paths */ | /* with SVG paths */ | ||
# | # | ||
- | position: | + | position: absolute; |
- | width: | + | width: 100%; |
- | height: | + | height: 380px; |
- | color: | + | 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, | + | shape-outside: circle(cx, |
+ | |||
+ | /* the shape-inside propery for content inherits from shape-outside so we can ignore declaring it */ | ||
} | } | ||
| | ||
Line 500: | Line 500: | ||
/* with image */ | /* with image */ | ||
# | # | ||
- | position: | + | position: absolute; |
- | width: | + | width: 100%; |
- | height: | + | height: 380px; /* disjoint-shapes-mask.png height*/ |
- | color: | + | color: red; |
- | bottom:0; | + | bottom: 0; |
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape-image: | + | shape-image: |
- | wrap-shape-image-position: | + | shape-image-threshold: |
- | wrap-shape-image-threshold: | + | |
} | } | ||
Line 653: | Line 652: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
* low reusability: | * low reusability: | ||
<code html> | <code html> | ||
Line 661: | Line 660: | ||
# | # | ||
- | position: | + | position: relative; |
} | } | ||
Line 668: | Line 667: | ||
column-count: | column-count: | ||
column-gap: | column-gap: | ||
- | color: | + | color: red; |
} | } | ||
/* with SVG Shape */ | /* with SVG Shape */ | ||
.exclusion{ | .exclusion{ | ||
- | position: | + | position: absolute; |
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape: polygon(x1, | + | shape-outside: polygon(x1, y1 ... xn, yn); |
} | } | ||
/* with image */ | /* with image */ | ||
.exclusion{ | .exclusion{ | ||
- | width: | + | width: 100px; |
- | height: | + | height: 200px; /* height of triangle.png */ |
- | position: | + | position: absolute; |
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape-image: | + | shape-image: |
- | wrap-shape-image-position: | + | shape-image-threshold: |
- | wrap-shape-image-threshold: | + | |
} | } | ||
#article1 .exclusion{ | #article1 .exclusion{ | ||
- | top: | + | top: 50%; |
- | left:30% | + | left: 30% |
} | } | ||
#article2 .exclusion{ | #article2 .exclusion{ | ||
- | top: | + | top: 50%; |
- | left:70% | + | left: 70% |
} | } | ||
Line 840: | Line 838: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
(!) Content inside the shape will have transformations applied, as well | (!) Content inside the shape will have transformations applied, as well | ||
Line 849: | Line 847: | ||
# | # | ||
- | position: | + | position: relative; |
} | } | ||
# | # | ||
- | position: | + | position: relative; |
column-count: | column-count: | ||
column-gap: | column-gap: | ||
- | color: | + | color: red; |
} | } | ||
/* with SVG Shape */ | /* with SVG Shape */ | ||
.exclusion{ | .exclusion{ | ||
- | position: | + | position: absolute; |
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape: polygon(x1, | + | shape-outside: polygon(x1, y1 ... xn, yn); |
} | } | ||
Line 874: | Line 872: | ||
position: | position: | ||
- | wrap-shape-mode: around; | + | wrap-flow: both; |
- | wrap-shape-image: | + | shape-image: |
- | wrap-shape-image-position: | + | shape-image-threshold: |
- | wrap-shape-image-threshold: | + | |
} | } | ||
#article1 .exclusion{ | #article1 .exclusion{ | ||
- | top: | + | top: 50%; |
- | left:30% | + | left: 30% |
} | } | ||
#article2 .exclusion{ | #article2 .exclusion{ | ||
- | top: | + | top: 50%; |
- | left: | + | left: 70%; |
+ | |||
/* increase scale, then flip on x-axis */ | /* increase scale, then flip on x-axis */ | ||
| | ||
Line 997: | Line 995: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
<code html> | <code html> | ||
< | < | ||
Line 1010: | Line 1008: | ||
/* with SVG shape */ | /* with SVG shape */ | ||
#shape{ | #shape{ | ||
- | position: | + | position: absolute; |
- | top: | + | top: 50%; |
- | left: | + | left: 50%; |
- | color: | + | 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: |
- | wrap-shape-padding: 5px; | + | wrap-padding: |
} | } | ||
Line 1128: | Line 1126: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
<code html> | <code html> | ||
< | < | ||
Line 1136: | Line 1134: | ||
/* with SVG shape */ | /* with SVG shape */ | ||
#article{ | #article{ | ||
- | wrap-shape-mode: content; | + | shape-inside: polygon(x1, |
- | wrap-shape: polygon(x1, | + | wrap-padding: |
background-image: | background-image: | ||
background-position: | background-position: | ||
- | | + | |
color: | color: | ||
} | } | ||
Line 1147: | Line 1145: | ||
/* with image */ | /* with image */ | ||
#article{ | #article{ | ||
- | wrap-shape-mode: | + | shape-image: |
- | wrap-shape-image: | + | shape-image-threshold: |
- | wrap-shape-image-threshold: | + | wrap-padding: |
background-image: | background-image: | ||
background-position: | background-position: | ||
- | | + | |
color: | color: | ||
} | } | ||
Line 1241: | Line 1239: | ||
{{: | {{: | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
<code html> | <code html> | ||
< | < | ||
/* with SVG shape */ | /* with SVG shape */ | ||
- | # | + | # |
- | wrap-shape: polygon(0px, | + | |
- | wrap-shape-mode: | + | shape-outside: polygon(0px, |
} | } | ||
/* with image */ | /* with image */ | ||
# | # | ||
- | wrap-shape-mode: around; | + | wrap-flow: right; |
- | wrap-image: url(shape-for-many.png); | + | shape-image: url(shape-for-many.png); |
- | wrap-image-threshold: | + | shape-image-threshold: |
} | } | ||
</ | </ | ||
Line 1296: | Line 1294: | ||
===== Issues ===== | ===== Issues ===== | ||
- | ==== CSS Exclusions ==== | + | ==== CSS Exclusions |
- | === Limitations overview: === | + | === Limitations overview: === |
- | * Probable dependencies on child layout to determine parent' | + | * [regression] no support for repeating exclusion shapes or images |
+ | * (?) [TBD: is this still applicable? | ||
* 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 " | ||
==== CSS3 Floats ==== | ==== CSS3 Floats ==== |