So, I'm having trouble finding a notation for writing a CSS class that will place content in the outer margin of the book.

I would like to follow the page canon that Tschichold called the "golden canon" - page content in the box from 1/9 in from the top and interior to 2/9 in from the bottom and exterior.

I would also like to place my sidebars in the margin, like the blue text in this mock:

http://retinart.net/wp-content/uploads/media/images/secret-law-of-page-harmony/canon-3B-L.jpg

Initially I tried to write a rule which was scoped to @page:left and @page:right which would use absolute or fixed positioning, but I couldn't find a selector or nested rule that'd fire (even on text color.)

So then I tried using float:outer, which got me most of what I need. However, whether placed inside of or outside of the matching paragraph, if that paragraph spills over onto the following page, the content will be lost to the previous page as an orphan, which isn't acceptable.

A screenshot is attached which shows the problem on the phrase "test 7." I would like for that rule's target to be on the following page, to the right of "sed ud" et cetera, instead.

Is there a way to do automatic left/right margin placement which also honors orphan rules?

John Haugeland is http://fullof.bs/

1. prince orphan problem.png‎ 543.0 kB

Sidenotes are interesting, and is within scope of what Prince should be able to do. Could you post a link to your source code?

BTW, Here's another document which uses sidenotes:

http://css4.pub/2015/textbook/somatosensory.html
http://css4.pub/2015/textbook/somatosensory.pdf

A slightly more advanced mechanism for sidenotes is described here:

https://books.spec.whatwg.org/#named-areas

But it hasn't been implemented.

I've created a small sample document where the sidenotes follow their paragraphs.

http://www.princexml.com/howcome/2015/tests/float-sidenote2.pdf
http://www.princexml.com/howcome/2015/tests/float-sidenote2.html

This is what you asked for, no?

(One problem with this solution is that it leaves white hole on the preceding page. I'd like for the main text to continue uninterrupted on all pages, and move unbreakable sidenotes to the nex page where there's room.)

What I'm currently doing:

<style type="text/css">

  @prince-pdf { prince-pdf-page-layout : two-column-right; }

  @page       { padding: 0; margin-top: 11.111%; margin-bottom: 22.222%; }
  @page:left  { margin-left: 22.222%; margin-right: 11.111%; }
  @page:right { margin-left: 11.111%; margin-right: 22.222%; }

  .inMargin   { width: 18.888%; float: outside; background-color: cyan; margin: 0 -22.222%; }

</style>

That sort-of-works, but has the orphanning problem.

A better solution would be something like

.inMargin   { width: 16.6666%; position: fixed; background-color: cyan; }

@page:left  { .inMargin { left : 5.5555%; color: red; } }
@page:right { .inMargin { right: 5.5555%; color: red; } }

or

.inMargin   { width: 16.6666%; position: fixed; background-color: cyan; }

@page:left  .inMargin { left : 5.5555%; color: red; }
@page:right .inMargin { right: 5.5555%; color: red; }

or something. (The color: red part is just to see if the rule is being applied; in neither case is it.)

But I can't find a notation that allows me to style a given selector solely within one @page context (or however you would say that in CSS-speak.)

John Haugeland is http://fullof.bs/

Edited 12 Apr 2015 by StoneCypher

Currently, there is no way to select elements on certain pages. This specification sketches some possible solutions, much like you also propose:

https://books.spec.whatwg.org/#selecting-elements-within-pages

However, it has not been implemented. Implementing it could be hard. For example, you could select an element on a certain page, and then give it some values that changes the layout which pushes the element to another page etc. etc.

Anyway, you should be able to avoid orphans by borrowing code from my previous example, no?

Edited 12 Apr 2015 by howcome

The code before simply causes a second orphan to be emitted. Granted, now the orphan on the sidebar now lines up with the orphan on the paragraph.

But I want zero orphans, not two. I want the out-cut to line up with the paragraph it comes from, the way it would with relative or absolute positioning.

John Haugeland is http://fullof.bs/

I don't understand what you mean by "two orphans". Are you referring to this document?:

http://www.princexml.com/howcome/2015/tests/float-sidenote2.pdf

If so, on which page are you seeing two orphans?

Setting the orphan size to 1 simply allows Prince to put a single line of the paragraph and a single line of the outcall on the previous document. Whereas they now line up, they also now both are single-line orphans.

The desired behavior is to delay both to the second page.

John Haugeland is http://fullof.bs/

1. prince orphan problem 2.png‎ 253.5 kB

Perhaps we talk past each other; in my mind the sample document gives you exactly what you are asking for. In this document:

http://www.princexml.com/howcome/2015/tests/float-sidenote2.pdf

on page 4, you can see that both the sidenote and the corresponding paragraph have been delayed. Therefore, on page 3, there is a white hole at the bottom of the page.

Isn't this what you are asking for?

Well, except that it prevents all page breaking inside ever, which can cause widows instead

John Haugeland is http://fullof.bs/

but yeah I guess that is an improvement, isn't it

John Haugeland is http://fullof.bs/

Indeed, if you have long sidenotes, the white holes can grow unreasonably big. This is one reason why I want a more flexible system where the relationship between the sidenote and the reference point can be stretched; the body text should continue normally, while the sidenote can be pushed around a bit. Much like page floats can be moved to the top or bottom of the page.