I'm currently writing my master thesis with Prince and at several places I'm using the page margins to display small summaries (see attached image).

These margin summaries should be on the outside margins of the book. On left pages in the left margin, on right pages in the right margin. Unfortunately I haven't found a way to do this with Prince. More specifically I haven't found a way to apply different styles to the summary paragraphs for left and right pages.

I can specify different margins for left and right pages:

@page:left { margin-left: 5cm; }
@page:right { margin-right: 5cm; }

But I can't combine the @page selector other selectors. So this doesn't work:

p.summary { position: absolute; width: 4.5cm; }
@page:left p.summary { left: 0.25cm; }
@page:right p.summary { right: 0.25cm; }

I realize this conflicts with named page selectors. And skimming over the CSS Paged Media Module Level 3 I haven't found anything in this direction. However combining the @page selector with other selectors seemed like the obvious thing to do. And usually this approach works with Prince. Like float: column-bottom or column-top, that really saved my day once. Thanks for that btw.

After realizing that @page selectors will probably not work I tried to use JavaScript. With box tracking in the current alpha I got the page number of each margin summary. With that I can then set appropriate CSS classes or styles. But I can only get the page number at the "complete" event of the Prince object. And changing CSS classes or properties seems to have no effect after the complete event is fired (somewhat obvious, but I still had hope).

Before that event getPrinceBoxes() returns an empty array. So I can't get the page number before the complete event. I guess this makes sense to avoid endless relayouting loops. But I'm fresh out of ideas how to move summaries on left pages to the left and on right pages to the right.

Is there any way I have missed?

1. thesis-page3.png‎ 160.3 kB ‎
   Page with two small margin summaries

You can use "float: inside" and "float: outside" combined with negative margin applied with the margin-inside and margin-outside properties.

Tried it and it works way better than the "position: absolute;" approach I used before. Thanks for the answer.

Me too - I don't understand why e.g. @page:left p.summary doesn't work. Seems the obvious thing to do to me. Why doesn't it work - is there some very good reason why it SHOULDN'T work?

This would be very complex to implement as it could cause infinite loops if you did something like this:

@page:left p.summary { page-break-before: right }
@page:right p.summary { page-break-before: left }

There are also questions about which style properties can be changed for elements that are split across multiple pages.