Differences

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

--- spec:css3-regions:regions-print-use-cases [2012/05/03 12:52] – astearns
+++ spec:css3-regions:regions-print-use-cases [2014/12/09 15:48] (current) – external edit 127.0.0.1
@@ 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 |}}]]