Forum › How do I...?
float: unless-fit vs unless-room
The GCPM spec is still changing, see the work in progress here:
http://dev.w3.org/csswg/css-gcpm/
http://dev.w3.org/csswg/css-gcpm/
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.
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.
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)
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)
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.
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.
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.
.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.
So, the big question is whether (or when will) prince supports this?
The prince-snap value doesn't seem to have the expected behavior.
The prince-snap value doesn't seem to have the expected behavior.