Re: [css-flexbox] when fragmenting a column-reverse flex container, which page gets the first flex item?

On Tue, Apr 23, 2013 at 2:59 PM, Daniel Holbert <dholbert@mozilla.com> wrote:
> tl;dr: When a UA paginates (fragments) a "column-reverse" flex
> container, should the first flex item end up at the bottom of the *last*
> page or the bottom of the *first* page?
>
> EXAMPLE:
>
> Consider this HTML markup:
>  <div style="display: flex; flex-direction: column-reverse">
>    <div>A</div>
>    <div>B</div>
>    <div>C</div>
>    <div>D</div>
>    <div>E</div>
>  </div>
>
> So, the on-screen rendering looks like this:
>   +-------+
>   |   E   |
>   |   D   |
>   |   C   |
>   |   B   |
>   |   A   |
>   +-------+
>
> QUESTION: If we paginate this content, where should the first flex-item
> ("A") appear, when printed?
>
> Option 1: first item goes at the bottom of the *last* page:
>    Pg1    Pg2    Pg3
>   +---+  +---+  +---+
>   | E |  | C |  | A |
>   | D |  | B |  |   |
>   +---+  +---+  +---+
>
> Option 2: first item goes at the bottom of the *first* page:
>    Pg1    Pg2    Pg3
>   +---+  +---+  +---+
>   | B |  | D |  | E |
>   | A |  | C |  |   |
>   +---+  +---+  +---+
>
> Right now Chrome implements Option 1.  However, I think I prefer Option
> 2, and I also believe the spec's sample fragmentation algorithm yields
> Option 2 (if you read the heading "Single-line column flex container" to
> include both column and column-reverse, which is reasonable IMHO given
> that there's no sample algorithm at all provided for column-reverse.)
>
> In particular, the spec's sample algorithm for "Single-line column flex
> container" says:
>   # 2. Lay out as many consecutive flex items... as possible...
>   # starting from the first, until there is no more room on the
>   # page or a forced break is encountered.
> http://dev.w3.org/csswg/css-flexbox/#pagination-algo
>
> So that pretty clearly indicates that the first flex item should end up
> on the first page.
>
> Moreover, Option 2 is very analogous to how multi-line flex containers
> partition their items into flex lines. (The first flex item always ends
> up on the first flex line, regardless of whether we're column or
> column-reverse.)
>
> Thoughts? Perhaps the spec could be clarified on this point? (If there's
> general agreement that Option 2 is reasonable, then maybe we should
> change the sample-algorithm header-text "Single-line column flex
> container" to explicitly mention "column-reverse", and similar for the
> other sample algorithms?)

I agree with you that Option 2 is the better option.  The most
compelling argument, I think, is that it's similar to how a multi-line
flexbox would break.

We can try to fix up the text to more explicitly indicate that.

(I think Chrome's behavior is accidental - we just have shitty
page-break handling, is all.)

~TJ

Received on Wednesday, 1 May 2013 20:08:50 UTC