This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
spec:css3-regions:regions-print-use-cases [2012/05/03 12:45] – astearns | spec:css3-regions:regions-print-use-cases [2012/05/08 12:06] – astearns | ||
---|---|---|---|
Line 9: | Line 9: | ||
{{ : | {{ : | ||
- | 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 | + | 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 |
=== Interleaved flows === | === Interleaved flows === | ||
Line 15: | Line 15: | ||
{{ : | {{ : | ||
- | 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 |
+ | |||
+ | <code css> | ||
+ | article { | ||
+ | flow-into: article-flow | ||
+ | } | ||
+ | #timeline { | ||
+ | flow-into: timeline-flow | ||
+ | } | ||
+ | # | ||
+ | overflow-style: | ||
+ | } | ||
+ | |||
+ | @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; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
[[http:// | [[http:// | ||
Line 38: | Line 71: | ||
{{: | {{: | ||
+ | {{: | ||
+ | |||
+ | This layout has two linked flows, one in German and one in English. The first page has different column settings for each flow, but the following page(s) have similar column characteristics (though twined together in an interesting way). This could be done with page templates that define one layout for the first page, then fall back to a repeating page template to contain the remainder of the articles. |