[css-page-float] order of page floats with different float references

[frivoal]

In what order should page floats with different float references be placed?

For example, when there are a block-end page float with “page” float reference (A) followed by a block-end page float with “column” float reference (B):

• According to the current spec, all page floats with “page” float reference should be placed before layout of “column” page floats begins. In that case, the “page” float A is placed below the “column” float B.

• In the above case, the order of the floats (B -> A) is “reversed”. Some people may prefer them placed in the “right” order (A -> B). However, if we place the floats in this order, space next to the “column” float B gets isolated from the rest of the space by the page-wide float A. Should the main text flow into the isolated space, or should it be kept empty?

[frivoal]

Live example

[johanneswilm]

@frivoal Does this come from a user? In that case, what did the user expect to happen?

The reason the spec was written that way was mainly to make it very clear which float goes where and how the placement process takes place and because the amount of usecases for the other seemed limited. Usually one wants a page top float to float to the top of the page, and a column float to stay within its column, also when that column is smaller due to a page float moving on top of it.

[kwkbtr]

Does this come from a user? In that case, what did the user expect to happen?

Yes. One of our users asked us to order the floats "correctly" in such a case.
It may be a matter of taste, though (I am personally fine with the “reversed” order).

From a user's point of view, expected behavior may be either of the following:

• 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.
• 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.

[johanneswilm]

Here is what prince outputs. It seems to be close to what the spec currently says. It prioritizes page floats 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

<!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>

[johanneswilm]

@kwkbtr Maybe we could add something like float-policy [1] to allow for the behavior you mention?

I would absolutely be in favor of that. I just wonder if we maybe shoudl create two different levels of the spec for that. The current level ws made with the understanding that this could possibly some day be something browsers impelment. With increasing complexity and various optiosn, the likelihood of that is decreasing, so it may be an idea to create two levels of the spec and then have Vivliostyle and others implement the higher level and let the lower level be something for browsers.

[1] https://figures.spec.whatwg.org/#page-float-preferences:-float-policy

[johanneswilm]

As for the usecase of treating column and page floats differently: They may be used differently semantically and therefore have little to do with one-another. For example,

• One could image page floats being used for sponsor advertisement that goes toward paying for a free/cheap text book. COlumn floats would be used for illustrations within the text. They are therefore clsoer to the text and it would make no sense for column and page floats to be displayed in order.

• Pictures vs. figures: A book about Mexico uses photos of various parts of Mexico as page floats. The page floats are not directly related to specific parts in the text and their main purpose is to make the reader relate to Mexican history and culture and remember his/her mostinteresting trips to Mexico while reading the book. Column floats, on the other hand, are used to show graphs and maps that are fairly closely realted to speccific parts of the text. It makes no sense to place column floats above top page floats nor for them to "wait" for another.

• An online newspaper that wants its website to look more like a traditional paper and has chosen a two column layout and a page-turning function instead of end-less scroll. It uses Page floats for three large pictures placed in different parts of the article. The newspaper doesn't know what size the reading decvice has, which is why they choose page floats for placement. Additionally, they use 2-15 column floats for facta boxes throughout the articles.