From 6900e41f298ea48e84ea12f1a736e16e0b6a04fe Mon Sep 17 00:00:00 2001 From: Johannes Wilm Date: Fri, 26 Jun 2015 22:03:01 +0200 Subject: [PATCH] [css-page-floats] Add details on process of page float placement. --- css-page-floats/Overview.bs | 305 +++++++++++++++++++----------------- 1 file changed, 161 insertions(+), 144 deletions(-) diff --git a/css-page-floats/Overview.bs b/css-page-floats/Overview.bs index 614ef202f41..6a746c94baa 100644 --- a/css-page-floats/Overview.bs +++ b/css-page-floats/Overview.bs @@ -16,7 +16,7 @@ Abstract: publications in which figures and photos are moved to the top or botto Abstract: of columns or pages, along with their captions. Abstract: This draft describes how to achieve this effects for floats within pages, Abstract: columns, regions and elements. -Ignored Terms: near, 3em, intrude, top-corner, bottom-corner, left, right, both, element, none, floats, float-stacking-order, inline, max-width, max-height +Ignored Terms: near, 3em, intrude, top-corner, bottom-corner, left, right, both, element, none, floats, inline, max-width, max-height @@ -28,18 +28,16 @@ Ignored Terms: near, 3em, intrude, top-corner, bottom-corner, left, right, both, This document allows to specify whether a float floats to align with a float reference inline box, column, region or page. In the case of floats - with a reference column, region or page, placement can be deferred to a - subsequent column, region or page with the float-defer properties. + with a reference 'fragmentation container', placement can be deferred to a + subsequent 'fragmentation container' with the float-defer properties. - Floats with a column reference can be set to span several columns, thereby - supporting commonly used newspaper layouts. New values on the 'clear' property - add further ways of refining layouts. + New values on the 'clear' property add further ways of refining layouts. The way contents wrap around floats can be controlled by changing the value of - the 'wrap-flow' property which initially is set to 'both' for floats. + the 'wrap-flow' property which initially is set to 'both' for page floats.

- Floats as defined here work with different types of fragmentation types + Page floats as defined here work with different types of fragmentation types (columns, regions, pages) as well as container elements. The specification is no longer specific to print or to pages. At the same time, inline floats and page floats differ in many ways, and it may @@ -70,8 +68,8 @@ Terminology The block formatting context inside of which the float is embedded.

Initial float reference
- The entity to which the float is aligned initially, before automatic float - deference takes place. + The entity to which the float is aligned initially, before float + placement takes place.
Float reference
The entity to which the float is aligned. @@ -418,36 +416,9 @@ table { float: snap-block(3em 2em, bottom) }
- More examples with regions and elements as float references needed. + More examples with regions as float references needed.
-

-Stacking floats

- - Floats for any given line/column/region/page are placed in the order they appear - in the source document. This means that floats that have been deferred from - previous columns/regions/pages will be placed first, and thereafter floats from - the current line/column/region/page. - - Floats with the same float reference are made to never overlap. If the - float reference is a column, region or page and the float containing - context is limited in size, and there is not enough space to draw a particular - float, that float is automatically deferred to the next column/region/page. - - The stacking order of the floats within a related to a particular float - reference are determined by the block flow and inline directions. - -

- Detailed instructions and examples for float placement are needed, including - how top/bottom and left/right floats interact, and how floats with different - float references interact. - -

- Examples and property definition of 'float-stacking-order' needed! Such as "The - first float with the float property set to a particular value is floated as the - outermost element. The second as the second outermost element, etc. ." - -

The 'clear' property

@@ -470,20 +441,14 @@ The 'clear' property
inline-start
- If applied to a block-level element or a float with a 'float-reference' set - to inline, requires that the block-start outer edge of the box comes after - the block-end outer edge of any inline-start-floats with an - inline-start-float-reference that resulted from elements earlier in the - source document. + If applied to an inline float, requires that the block-start outer edge of + the box comes after the block-end outer edge of any inline-start-floats + with an inline-start-float-reference that resulted from elements earlier + in the source document. - If applied to a float with a 'float-reference' set to column/region/page, it - requires that the block-start outer edge of the box follows the block-end - outer edge of any inline-start-floats with a inline-start-float-reference - that resulted from elements earlier in the source document. If the float - reference's height is limited and there is insufficient space to place - this float, it requires that this and all further inline-start-floats - relating to the same float reference are deferred to the next - page/column/region. + If applied to a page float, the 'float reference' in which the page float + is placed will be seen as full when determining whether it can host + subsequent page floats that float in the inline-start direction.
inline-end
@@ -493,14 +458,9 @@ The 'clear' property inline-end-float-reference that resulted from elements earlier in the source document. - If applied to a float with a 'float-reference' set to column/region/page, it - requires that the block-start outer edge of the box follows the block-end - outer edge of any inline-end-floats with a inline-end-float-reference that - resulted from elements earlier in the source document. If the float - reference's height is limited and there is insufficient space to place - this float, it requires that this and all further inline-end-floats - relating to the same float reference are deferred to the next - page/column/region. + If applied to a page float, the 'float reference' in which the page float + is placed will be seen as full when determining whether it can host + subsequent page floats that float in the inline-end direction.
block-start @@ -508,9 +468,9 @@ The 'clear' property If applied to a block-level element or a float with a 'float-reference' set to inline, behave like inline-start. - If applied to a float with a 'float-reference' set to column/region/page, - requires that this and all further block-start-floats relating to the same - float reference are deferred to the next page/column/region. + If applied to a page float, the 'float reference' in which the page float + is placed will be seen as full when determining whether it can host + subsequent page floats that float in the block-start direction.
block-end @@ -518,9 +478,9 @@ The 'clear' property If applied to a block-level element or a float with a 'float-reference' set to inline, behave like inline-end. - If applied to a float with a 'float-reference' set to column/region/page, - requires that this and all further block-end-floats relating to the same - float reference are deferred to the next page/column/region. + If applied to a page float, the 'float reference' in which the page float + is placed will be seen as full when determining whether it can host + subsequent page floats that float in the block-end direction.
left @@ -576,7 +536,8 @@ The 'clear' property
- In this example, the two figures may appear at the bottom of the same column due to clearing only at the top: + In this example, the two figures may appear at the bottom of the same column + due to clearing only at the top: 
 .figure { float-reference: column; float: bottom; clear: top }
@@ -589,7 +550,8 @@ The 'clear' property
- In this example, the two figures will appear in different columns due to clearing at the bottom: + In this example, the two figures will appear in different columns due to + clearing at the bottom: 
 .figure { float-reference: column; float: bottom; clear: bottom }
@@ -603,7 +565,8 @@ The 'clear' property
 
 
   

-    In this example, the two figures end up the top corner of two different pages:
+    In this example, the two figures end up the top corner of two different
+    pages:
 
 
 .figure { float-reference: page; float: top; clear: top }
@@ -630,13 +593,12 @@ The 'clear' property
 
 
Deferring floats

 
-  A float can be deferred to a following column/region/page, depending on its
-  float reference. Floats with 'float-reference' set to 'inline' cannot be
-  deferred.
+  A page float can be deferred to another 'fragmentation container' than where
+  the `float anchor` is placed.
 
-  Specified float deferring takes place before float stacking. Float stacking can
-  lead to floats being deferred to the next column/region/page if the
-  column/region/page they were targeted for originally lacks the required space.
+  Float deferring assigns an `initial float reference`, yet float stacking can
+  lead page floats being moved to the subsequent `fragmentation containers` if
+  their `initial float reference` lacks the space to host them.
 
   This new property is introduced to control deferring floats:
 
@@ -655,89 +617,164 @@ The 'clear' property
     

 
 
-    This property specifies whether a floats should appear in their natural
-    column/region/page, or in a following column/region/page. Values are:
+    This property specifies whether the `initial float reference` of a page
+    float is the 'fragmentation container' in which the `float anchor` is placed
+    after previous page floats have been placed, or in another one. Values are:
 
     

       
none
-      
the page float appears in the natural column/region/page
+      
The `initial float reference` is the 'fragmentation container' in which the
+      `float anchor` is placed after all previous page floats have been placed.
 
       
<integer>
       

-        A positive integer value indicates that the page float should be
-        displayed in a following column/region/page. A negative integer value
-        indicates that the page float should be displayed in a following
-        column/region/page, counted from the last column/region/page. Zero is not
-        a legal value.
+        A positive integer value indicates that the `initial float reference` of
+        the page float should be Nth 'fragmentation container' of the `fragmentation
+        flow`, where N is the value of the `float-defer` property plus the order
+        number of the 'fragmentation container' in which the `float anchor` is placed
+        after all previous page floats have been placed within the given
+        'fragmentation flow'. If N is larger than the order number of the last
+        'fragmentation container' within the given 'fragmentation flow' at the time of
+        assignment, then N is the order number of the last 'fragmentation container'
+        within the given 'fragmentation flow'.
+
+        A negative integer value indicates that the `initial float reference` of
+        the page float should be the Nth 'fragmentation container' of the
+        'fragmentation flow', where N is 1 plus the order number of the last
+        'fragmentation container' within the given 'fragmentation flow' after all
+        previous page floats have been placed plus the value of the `float-defer`
+        property.
+
+        Zero is the same as `none`.
+
+      
last
+      

+        The `initial float reference` is the last 'fragmentation container' within
+        the given 'fragmentation flow' after all previous page floats have been
+        placed.
 
+    

 
-        

-          Float figure to the top of the column that follows the natural column:
+    

+      Float figure to the top of the region that follows the region in which
+      the float anchor is placed:
 
 
-.figure { float-reference: column }
+.figure { float-reference: region }
 .figure { float: top }
 .figure { float-defer: 1 }
 

 
-        

+    

 
-        

-          Float figure to the top of the next-to-last column:
+    

+      Float figure to the top of the next-to-last column:
 
 
-.figure { float-reference: column; float: top; float-defer: -1 }
+.figure { float-reference: column; float: top; float-defer: -2 }
 

 
-          sample rendering
-        

+      sample rendering
+    

 
-        

-          Float figure to top of the last column of the multicol element on the current page:
+    

+      Float figure to the top of the last page:
+
+
+.figure { float-reference: page }
+.figure { float: top }
+.figure { float-defer: -1 }
+

+    

+
+    

+      Float figure to the top of the last column:
+
+
+.figure { float-reference: column }
+.figure { float: top }
+.figure { float-defer: last }
+

+
+    

+
+    

+      Float figure to top of the last column:
 
 
 .figure { float-reference: column; float: top; float-defer: last }
 

 
-          sample rendering
-        

+sample rendering
+    

 
+
Page float placement

 
+  Page floats are placed one by one in the order they appear in the DOM. The
+  placement of a single page float is a process that has to be terminated
+  entirely before the placement of a subsequent page float can be initiated. The
+  placement process consists of the following steps:
 
+  
    
 
+    
  1. Determine of the `initial float reference` through consideration of
+    the `float-defer` value. The 'float reference' is set to be the `initial
+    float reference`.
    2. 
 
+    
  2. Determine if the given 'float reference' has enough space or can be
+    expanded to host the page float, if the rules of 'float stacking' and 'float
+    reference growth' are to be followed. If this is not the case, and the
+    'float reference' is not the last 'fragmentation container' within the given
+    'fragmentation flow', then make the following 'fragmentation container'
+    within the given 'fragmentation flow' the 'float reference'.
    3. 
 
-        
    
-          Float figure to the top of the first column on the next-to-last page:
+    
  3. If the 'float reference' is the last 'fragmentation container' within
+    the given 'fragmentation flow', and it has not enough space and cannot be
+    expanded to host the page float, then do the following:
    4. 
 
-
    -.figure { float-reference: page }
-.figure { float: top }
-.figure { float-defer: -1 }
-
    
-        
    
+    
      
+      
    1. If the 'fragmentation context' allows for the addition of another
+      'fragmentation container' and an additional 'fragmentation container'
+      would have the needed size to host the page float, a new 'fragmentation
+      container' is added to the end of the 'fragmentation context'. The 'float
+      reference' is set the newly created 'fragmentation container'.
      2. 
 
-      
      last
-      
      
-        The page float should be displayed in the last colum, region or page.
+      
    2. Otherwise, if the 'fragmentation container' is a region, then the
+      'regionOverset` attribute of the 'fragmentation container' is set to
+      `overset`.
+    
    
 
-        
    
-          Float figure to the top of the last column:
+    
  4. The page float is placed in the 'float reference' according to the rules
+    of 'float stacking' and 'float reference growth'.
    5. 
 
-
    -.figure { float-reference: column }
-.figure { float: top }
-.figure { float-defer: last }
-
    
+  

 
-        

+
Float reference growth

 
-      
none
-      
The floats should appear in their natural column/region/page, if possible.
+Float reference can grow up to the their `max-height` and `max-width` or their
+`available size`, whichever is the lowest, in order to accommodate page floats.
 
-    
+
Rules for Float stacking

+
+Page floats are stacked within a given 'float reference' in the order of their
+placement and in the direction of the inline- and flow-directions of the
+'fragmentation flow' without overlapping with other page floats with the same
+'float reference' and by keeping a distance N from padding edge of the 'float
+reference' as well as previously placed page floats with the same 'float
+reference' and the same 'float' value. For the placement it is assumed that the
+page floats in the block directions fill the entire line size of the 'float
+reference' and page floats in the inline direction fill the entire block size of
+the 'float reference'.
+
+If the page float has a defined 'clear'-value, then the 'float reference' is
+closed for all subsequent page floats that floating in the direction specified
+by the 'clear'-value.
+
+

+  This definition may be a bit too simple, as it does not allow for page floats
+  that go in the line direction and block direction within the same
+  'fragmentation container'.
 
-    Zero is not a legal value.
 
 
Wrapping around floats

 
@@ -830,32 +867,6 @@ img {
-

- Size determination of float references and automatic deferring of page floats -

- - Float references are grown up to the their `max-height` and `max-width` or their - `available size`, whichever is the lowest, as they are filled up until it cannot - contain the following page float. All subsequent page floats are automatically - deferred to the next `fragmentation container`. - -

- Automatic deferring of page floats beyond the last `fragmentation container` -

- - If the process of automatic deferring leads to floats being deferred from the - last available `fragmentation container`, and the `fragmentation context` allows - for the addition of another `fragmentation container`, a new `fragmentation - container` is added to the end of the `fragmentation context`. - - If the process of automatic deferring leads to floats being deferred from the - last available `fragmentation container`, the `fragmentation context` does - not allow for the addition of another `fragmentation container`, and the - `fragmentation container` is a `region`, then the `regionOverset` attribute of - the `fragmentation container` is set to `overset` and a `regionoversetchange` - event for the corresponding `NamedFlow`. - -

Floats and absolutely positioned exclusions

@@ -1065,6 +1076,12 @@ p { float-reference: page; float: top; float-defer: last } :
    +
  1. + Added details on placement process of page floats. +
    2. +
  2. + Use "fragmentation container" term instead of "column/region/page". +
  3. Added info on variably sized float references and deferring beyond the last fragmentation container.