Full-page illustration that doesn’t interrupt the text

[Jellby]

This part of CSS3 looks more promising, though.

[dgatwood]

Originally Posted by Jellby

The example says:

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:

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.