Quote:
Originally Posted by Jellby
The example says:
Code:
img { move-to: page-top; } /* move images to page-top */
@page { padding-top: 10em; } /* leave a gap at the top of the page */
body:after { /* place a box at the top of each page */
position: fixed; top: 0; left: 0; right: 0; height: 10em;
content: pending(page-top); /* insert the images moved to page-top */
}
"page-top" is not some special keyword, it's just an identifier, it could say "foobar" instead, so the img is simply moved to wherever we specify "pending(page-top)", and I don't see how we could say we want it at the next (or current) page top. Reading the rest of the example (@page and body:after), what is actually achieved, if I'm not mistaken, is that all images in the document are collected and placed at the top of every page, and with absolute positioning, which required adding manual padding.
|
It's just an example, and is not the only way you can use the properties. A more realistic example would target the images more precisely, e.g. with
img.floattotop (or even
.floattotop) instead of
img.
Likewise, a more realistic example would specify the width of the box, but would not specify the height. The pseudo-element would then either be zero height (if there are no images to float) or nonzero (the height of the floated images for that particular page).
Finally, it would not place every image on every page; it would place only the images since the last time you called
pending with the specified identifier. Section 5 has this to say about the
move-to property:
Quote:
The element is not displayed at the current location, but at the next occurrence of 'pending(<identifier>)' (where the identifiers match), with all other elements moved to that point, in document order. If at the end af the document (after the '::after' pseudo-elements of the root element) there are outstanding elements, then they are all inserted in document order at that point.
|
(Presumably it means "with all other
matching elements". Oops.) The main purpose of
move-to is to allow you to easily place footnotes at the bottom of each page.
That said, it would always be displayed at the
pending call
after the image, so if you wanted the image to float upwards instead of floating to the next page, you'd have to do something else.