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
spec:css3-regions:regions-print-use-cases [2012/05/03 12:52] astearnsspec:css3-regions:regions-print-use-cases [2012/05/08 12:06] astearns
Line 15: Line 15:
 {{ :spec:css3-regions:gutter-flow.png?nolink |}} {{ :spec:css3-regions:gutter-flow.png?nolink |}}
  
-Here there are two named flows, but the contents are related. The flow running through the gutter of the main article is a timeline of events the article refers to. This can be accomplished in either continuous or paged media with sets of three regions.+Here there are two named flows, but the contents are related. The flow running through the gutter of the main article is a timeline of events the article refers to. This can be accomplished in either continuous or paginated contexts with sets of three regions. Here's a paginated solution using Page Templates (assuming content to refer to and a box to paginate in). There is also a full [[http://adobe.github.com/web-platform/utilities/css-pagination-template/demo/wired-layout.html|mockup]] that works in the WebKit nightly build or Chrome 19 with the regions features turned on. 
 + 
 +<code css> 
 +article { 
 +  flow-into: article-flow 
 +
 +#timeline { 
 +  flow-into: timeline-flow 
 +
 +#combine-articles { 
 +  overflow-style: paged-x; 
 +}  
 + 
 +@template interleaved-layout{ 
 + 
 +  @slot left {   
 +    width: 35%; 
 +    float: left; 
 +    flow-from: article-flow; 
 +  } 
 +   
 +  @slot time {   
 +    width: 25%; 
 +    float: left; 
 +    flow-from: timeline-flow; 
 +  }  
 +   
 +  @slot right { 
 +    width: 35%; 
 +    float: left; 
 +    flow-from: article-flow; 
 +  } 
 +
 +</code>
  
 [[http://disruptive-innovations.com/zoo/customers/Adobe/regions.html|{{ :spec:css3-regions:2regions.png?400 |}}]] [[http://disruptive-innovations.com/zoo/customers/Adobe/regions.html|{{ :spec:css3-regions:2regions.png?400 |}}]]
 
spec/css3-regions/regions-print-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