Differences

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

--- spec:css3-regions:regions-use-cases [2012/09/11 17:41] – astearns
+++ spec:css3-regions:regions-use-cases [2014/12/09 15:48] (current) – external edit 127.0.0.1
@@ Line 124: / Line 124: @@
   wrap-flow: both;
   /* prevent the content from touching the edges of the box */
-  wrap-padding: 20px;
+  shape-padding: 20px;
   color: lightblue;
   font-size: 2em;
@@ Line 235: / Line 235: @@
     flow-from: breaking-news;
-    /* allow scrolling when content overflows the region */
+    /* allow scrolling when content overflows the last region in the named flow */
-    region-overflow: auto;
+    region-fragment: auto;
     overflow: auto;
 }
@@ Line 286: / Line 286: @@
 </code>
-This works only if the class="segment" elements have no direct content, because we only have > * to work with. It would be better if there was an "all content" selector we could use, or if this styling would work for this use case (see https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819)
+This works only if the class="segment" elements have no direct content, because we only have > * to work with. It would be better if there was an "all content" selector we could use.
-<code css>
-.segment {
-  flow-into: combined-segments;
-  flow-from: combined-segments;
-  height: 50vh;
-}
-</code>
 ==== Capturing region overflow content ====
@@ Line 326: / Line 318: @@
     margin-top:10%;
-    /* This region will catch all the overflow content */
+    /* Control the overflow behavior of the last region in the named flow */
-    region-overflow:auto;
+    region-fragment:auto;
     overflow:auto;
 }
@@ Line 367: / Line 359: @@
   position: absolute;
   /* prevent text from touching the edges of the slices */
-  wrap-padding: 10px;
+  shape-padding: 10px;
 }
 #slice_1 {
@@ Line 417: / Line 409: @@
 {{:spec:css3-regions:multi-lingual.png?700|}}
+==== Content re-ordering on the client ====
+There are content management systems that assemble markup on demand, but have limited options for changing the markup (and therefore the layout) based on the capabilities of the client that requests a page. One not-so-good solution is to offer a separate 'mobile' page using a different URL if there are layout considerations that require re-ordering the markup to achieve the layout desired on mobile. Using named flows and region chains allows you to define radically different layouts based on media queries in your CSS without changing the underlying markup.
 ==== CSSOM use cases ====
@@ Line 422: / Line 418: @@
 The spec includes more than the usual amount of CSSOM, as the basic capabilities of named flows and region chains are very well suited to being extended via script. Here are some use cases for the scripting access included in the spec.
-  - Modifying the region chain based on content changes or window resizing. This could involve adding or removing CSS Regions, or changing region geometry.
+  - Modifying the region chain based on content changes or window resizing. This could involve adding or removing CSS Regions, or changing region geometry. This case makes use of the regionLayoutUpdate event for noticing when changes may be required Then the NamedFlow.overset, NamedFlow.firstEmptyRegionIndex, and Region.regionOverset properties are used to determine what needs done.
-  - Handing events on named flow contents - using the OM to determine the CSS Region(s) that contain the content.
+  - Modifying the content based on the region chain. This is the reverse of the first use case. If the size and position of the region chain is fixed, script can modify the contents (usually through font-size) to make it fit. This can take the form of enlarging headlines to fill the available space, or slightly reducing body text size to bring in a few lines of overset text. NamedFlow.overset is particularly useful here.
-  - Layout extensions implemented via script (script-based layout constraints can adapt region chain geometry).
+  - Handing events on named flow contents - using the OM to determine the CSS Region(s) that contain the content. NamedFlow.getRegionsByContent() allows you to move from the contents to the containers.
-  - Paginated views that use script to navigate or search (use the OM to determine the page to display).
+  - Layout extensions implemented via script (script-based layout constraints). If you have a script-based layout system that uses a different set of constraints than existing CSS layout modes, script access to the region chain through NamedFlow.getRegions() and NamedFlow.getRegionsByContent() is required to solve the layout puzzle.
+  - Paginated views. Until pagination has an agreed-upon solution, script-based paginated views will need OM access to named flow contents and region chains. And the eventual agreed-upon pagination solution will likely have some voids that can be filled by script, so OM access will continue to be useful (for a smaller set of requirements).