[css-page-float] float property syntax

[MurakamiShinyu]

Current spec:
https://drafts.csswg.org/css-page-floats/#float-property

I think the following syntax would be better for further extensibility:

float: none | [ block-start || block-end || inline-start || inline-end || 
                left || right || top || bottom ]

Examples:

float: top;        // float to top edge
float: top left;   // float to top left corner
float: top bottom; // float to top or bottom edge (like 'snap-block' in old proposal)
float: left right; // float to left or right edge (like 'snap-inline' in old proposal)
float: top bottom left;       // float to top left or bottom left corner
float: top bottom left right; // float to top left, top right, bottom left, 
                              // or bottom right corner

[johanneswilm]

@MurakamiShinyu: "top bottom" instead of "snap" sounds OK to me. What I am more concerned about are the last two examples: What happens when there is a second float with the same 2 dimensions? In which direction do they stack?

If one goes in the bottom left corner, can there also be float into the bottom right corner?

What if you have these three floats in the in this order on a page of English text that is 5in wide:

1. Bottom right, shape: square with sides of 2 in

2. Bottom right, shape: rectangular with a height of 2in and a width of 4in.

3. Bottom left, shape: square with sides of 2 in

Will float 2 stack upward?
Will the float 3 "jump" over float 2 to be placed in the bottom left corner?

I believe these were some of the questions that made us go with th current model.

[johanneswilm]

@MurakamiShinyu As for the floating "right left" -- is this meant as only being used in vertical text? If so, then this may indeed work as an equivalent of "top bottom".

But if the idea is to make text that is going in the horizontal direction float vertically and horizontally in the same way, then this may not make so much sense.

If we think of English language text, it is fairly easy to establish wehther the text is closer to the top or the bottom and as it moves through the page, there will usually only be one point where it changes.

If, on the other hand, we look at the lefr-right axis, it is changing wiuthin every line. The flaot anchor will be in a rather random posiiton on this axis initially and the placement of the page float will likely move it again. So whether the float ends up on the right or the left side will appaer completely random to the end user.

[MurakamiShinyu]

Will float 2 stack upward?
Will the float 3 "jump" over float 2 to be placed in the bottom left corner?

I think the result of this case shoud be similar to traditional css float: left/right.
See http://output.jsbin.com/zabeju
AH's bottom left/right float result is same, stacking top to bottom document order. (note: AH's page floats are stacked only in block-axis, I think now this is not very good.)

[MurakamiShinyu]

As for the floating "right left" -- is this meant as only being used in vertical text? If so, then this may indeed work as an equivalent of "top bottom".

But if the idea is to make text that is going in the horizontal direction float vertically and horizontally in the same way, then this may not make so much sense.

The idea is to replace snap-inline with inline-start inline-end (same as left right in English), but I understand your concern. I think left right means simply float to left or right, and we have to rethink the algorithm, not depending on anchor position.
(this issue is about syntax and the algorithm should be in separate issue)

[manuelmeister]

I would still like to do

img {
  float: right bottom;
}
p {
  display: flow-root;
}

<p><img src="…">Long text text text … text</p>

Is this the right issue?