Forum How do I...?

float: unless-fit vs unless-room

alexmilowski
Hasn't "unless-fit" become "unless-room" [1]?

[1] http://www.w3.org/TR/css3-gcpm/#float-modifiers
mikeday
The GCPM spec is still changing, see the work in progress here:
http://dev.w3.org/csswg/css-gcpm/
alexmilowski
OK. Now I'm playing catch-up. So, what's the new equivalent of "unless-fit" ?
howcome
Basically, you'd say:

div.figure { float: snap }

and the figure (or image, or pull-quote or..) would snap to the closest edge (in the block direction) without leaving a white hole. The specification is here:

http://dev.w3.org/csswg/css-gcpm/#floating-to-the-topbottom-top-bottom-sna

The topic is discussed here:

http://lists.w3.org/Archives/Public/www-style/2012Aug/0463.html

One particularly interesting (at least, in my ecyclipedic mind) use case is shown here:

http://people.opera.com/howcome/2013/02-reader/#dictionary

Feedback welcome.
howcome
I've added some more examples to the spec, example 50 should now illustrate your use case?

http://dev.w3.org/csswg/css-gcpm/#floating-to-the-topbottom-top-bottom-sna

(Example numbers change over time, it's the example with the '.figure { float: snap }' code snippet in it)
alexmilowski
I was doing this:

figure {
float: top unless-fit;
}

which gives me the figure in position unless it doesn't fit on the page.

I like the idea of snap but what I'd really like is a set of rules:

1. snap to the nearest edge within a certain short distance (i.e. avoid odd short paragraphs above/below an image).

2. position the figure in its natural position unless it won't fit.

Snap gives me (1) but is (2) possible somehow?

The current version of prince seems to have the option of prince-snap but I'm not certain that it has the same semantics. The output is decidedly worse (strange page breaks around large figures) when I change to using it.
howcome
Yes, (2) is also possible. By reducing the "reach" of snap to zero, you can express that the figure should be left in its natural position if it fits there; otherwise it should be turned into a page float:

.figure { float: snap(0) }

Given the zero-length reach of snap, the figure will never be turned into a float for being too close to an edge. However, if the figure naturally causes a column/page break, it will end up on top of the next column, having a zero-width distance to the top. Thus, snap kicks in and the figure is turned into a page float.

So, I believe (1) and (2) are really the same, it's just a matter of adjusting the reach. Normally, you probably want to have a reach of a few lines, thus the '2em' default value. These concepts need review, let me know if your requirements are not met, or if you have a better syntax.
alexmilowski
So, the big question is whether (or when will) prince supports this?

The prince-snap value doesn't seem to have the expected behavior.
alexmilowski
BTW, thanks for all the information. I now understand how this is suppose to work.