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
Next revisionBoth sides next revision
spec:css3-regions:regions-print-use-cases [2012/05/03 12:30] astearnsspec:css3-regions:regions-print-use-cases [2012/05/03 12:51] astearns
Line 1: Line 1:
 +==== Use Cases from Print Layouts for Regions ====
 +
 === Changing gutter and column widths === === Changing gutter and column widths ===
  
 {{ :spec:css3-regions:column-widths.png?nolink |}} {{ :spec:css3-regions:column-widths.png?nolink |}}
 +
 +The layout above uses different column widths to generate visual interest. In this case, the column width differences are mirrored for the two-page spread. While on-screen paginated experiences tend to show one page at a time, this technique could be used in continuous media. If each pair of columns is shorter than the viewport height, the wider column could shift from side to side as the reader scrolls down.
 + 
 {{ :spec:css3-regions:2reg_1excl.png?nolink |}} {{ :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).
  
 === Interleaved flows === === Interleaved flows ===
  
 {{ :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.
  
 [[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 |}}]]
Line 28: Line 37:
 === Templates with multiple flows ===  === Templates with multiple flows === 
  
-{{ :spec:css3-regions:expo-nentiell-page-1.png?nolink |}} +{{:spec:css3-regions:expo-nentiell-page-1.png?nolink|}} 
-{{ :spec:css3-regions:expo-nentiell-page-2.png?nolink |}}+{{:spec:css3-regions:expo-nentiell-page-2.png?nolink|}} 
 + 
 +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.
 
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