- From: Daniel Holbert <dholbert@mozilla.com>
- Date: Tue, 23 Apr 2013 14:59:57 -0700
- To: www-style <www-style@w3.org>
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?)
Thanks,
~Daniel
Received on Tuesday, 23 April 2013 22:00:25 UTC