We are trying to produce a catalog with a simple layout:

--------------
| picture | table |
--------------

--------------
| picture | table |
--------------
.....

for left pages

and

--------------
| table | picture |
--------------

--------------
| table | picture |
--------------
......

for right pages.

Can we set the image float depending on the left/right page?

Something like

@page:left img.product {
float: left;
}

@page:right img.product {
float: right;
}


At least in my example HTML this won't work.

You can use "float: inside" and "float: outside" to float towards the inside or outside of a two page spread.

Thanks Mike - this works perfectly.

One remaining issue: what controls what the direction of "outside" (left or right) on the first page is. By default "outside" means right on the first page. Any way to change that? We have possibly the need to create several PDF documents with different behavior regarding float:outside and merging them together later somehow.

At the moment this would require inserting a blank page at the beginning of the document, eg. with "page-break-before: left".