Differences

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

--- spec:css3-regions:regions-print-use-cases [2012/05/03 12:51] – astearns
+++ spec:css3-regions:regions-print-use-cases [2012/05/08 12:06] – astearns
@@ Line 9: / Line 9: @@
 {{ :spec:css3-regions:2reg_1excl.png?nolink |}}
-Here the layout uses the two-page spread to hold large graphics. Consider how something like this could look on a wide screen, with the columns of text depending on the size and shape of the graphic elements. This view could be generated with two regions (the second with multicol properties set).
+Here the layout uses the two-page spread to hold large graphics. Consider how something like this could look on a wide screen, with the placement of the text columns depending on the size and shape of the graphic elements. This particular arrangement could be generated with two regions (the second with multicol properties set).
 === Interleaved flows ===
@@ Line 15: / Line 15: @@
 {{ :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 |}}]]