Re: [csswg-drafts] [css-page-float] order of page floats with different float references

Here is what prince outputs. It seems to be close to what the spec currently says. It prioritizes page flaots over ccolumn floats.

I think as a minimum the current mode needs to continue to be supported. I wonder if the mode you are proposing should be something that one should be able to turn on for the element that contains all floats (the document/body for page floats) or whether it should be per float. If it is per float, I would expect that the algorythm needs to be more complex.  If it is per container element, then we may just need to add two different algorythms for the two ways of placing floats.

@kwkbtr In the case of the client who asked for this. what did that cleint expect in terms of filling the empty space with extra content (text) or not?

> - If two floats are floated to top and stacked in the “reversed” order, then the latter “page” float should be floated to bottom rather than top. Such behavior is impossible with any of the current `float` values in the spec. (`snap-block` is similar but how the float direction is determined is different.) Perhaps we need a new value of `float` for this.

Agreed, this would be apart from the question of order of column and page floats, right?

> - If such a “reversed” order happens, the latter float should be deferred to the next fragmentainer. In this way we can always guarantee the “correct” order, but more floats are deferred even if there is enough room for them.

Are you saying that you want to add a way of specifying for a column float that "If any page floats have been placed on the same page already, then defer this column float to the next page. And if any further page floats will eb placed on this page, then please defer them to the next page?" Could this be covered by creating a second placement logic?

[float.pdf](https://github.com/w3c/csswg-drafts/files/945428/float.pdf)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page floats</title>
  <style>
    .float {
      border: blue 2px solid;
      margin: 5px;
      padding: 5px;
      height: 5em;
    }
    .top {
      float: top;
    }
    .bottom {
      float: bottom;
    }
    .bottom-column {
       float: column-bottom;
    }
    body { 
       column-count: 2;
    }
  </style>
</head>
<body>
  <div class="float top">Top float 1</div>
  <div class="float bottom">Bottom float 1</div>
  <div class="float bottom">Bottom float 2</div>
  <div class="float bottom">Bottom float 3</div>
  <div class="float bottom-column">Column bottom float 1</div>
  <div class="float bottom">Bottom float 4</div>
  <div class="float top">Top float 2</div>
  <div class="float top">Top float 3</div>
  <div class="float bottom">Bottom float 5</div>
  <div class="float top">Top float 4</div>
  <div class="float top">Top float 5</div>
  <div class="float bottom-column">Column bottom float 2</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus est, lacinia quis lorem vitae, laoreet scelerisque nulla. Donec id hendrerit eros. Suspendisse auctor sem ac ornare convallis. Proin posuere fermentum mi et vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget quam pulvinar massa rhoncus posuere venenatis sit amet mi. Nulla facilisis metus quam, at tincidunt augue bibendum id. Quisque sapien purus, condimentum vel dui tempus, gravida bibendum lacus. Donec ligula nunc, fringilla in facilisis et, malesuada nec neque. Duis viverra sed orci et blandit. Sed lobortis pretium nunc in sollicitudin. Mauris augue elit, pellentesque id consectetur nec, finibus ac arcu. Quisque tempor venenatis iaculis. Vivamus gravida nunc vel lorem semper, sit amet cursus felis dignissim.</p>
  <div class="float bottom-column">Column bottom float 3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus est, lacinia quis lorem vitae, laoreet scelerisque nulla. Donec id hendrerit eros. Suspendisse auctor sem ac ornare convallis. Proin posuere fermentum mi et vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget quam pulvinar massa rhoncus posuere venenatis sit amet mi. Nulla facilisis metus quam, at tincidunt augue bibendum id. Quisque sapien purus, condimentum vel dui tempus, gravida bibendum lacus. Donec ligula nunc, fringilla in facilisis et, malesuada nec neque. Duis viverra sed orci et blandit. Sed lobortis pretium nunc in sollicitudin. Mauris augue elit, pellentesque id consectetur nec, finibus ac arcu. Quisque tempor venenatis iaculis. Vivamus gravida nunc vel lorem semper, sit amet cursus felis dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus est, lacinia quis lorem vitae, laoreet scelerisque nulla. Donec id hendrerit eros. Suspendisse auctor sem ac ornare convallis. Proin posuere fermentum mi et vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget quam pulvinar massa rhoncus posuere venenatis sit amet mi. Nulla facilisis metus quam, at tincidunt augue bibendum id. Quisque sapien purus, condimentum vel dui tempus, gravida bibendum lacus. Donec ligula nunc, fringilla in facilisis et, malesuada nec neque. Duis viverra sed orci et blandit. Sed lobortis pretium nunc in sollicitudin. Mauris augue elit, pellentesque id consectetur nec, finibus ac arcu. Quisque tempor venenatis iaculis. Vivamus gravida nunc vel lorem semper, sit amet cursus felis dignissim.</p>
</body>
</html>


-- 
GitHub Notification of comment by johanneswilm
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1239#issuecomment-295911939 using your GitHub account

Received on Thursday, 20 April 2017 21:03:23 UTC