CSS adjustments for inline sidenotes

[wf49670]

ppgen currently supports two kinds of sidnotes, normal or standalone, and inline. The former use the .sn directive, the latter use the <sn> inline markup tag. Standalong sidenotes use the "sidenote" CSS class, while inline sidenotes use "sni".

I need to correct a problem with inline sidenotes in HTML, as they end up enclosed inside their container. That is, if they are within a paragraph that is indented from the left margin (say, a block quote) they are also indented instead of being aligned with other sidenotes. Or, if they are within a ".nf b" (poetry, for example) they are fully contained within the margins of the poetry line, and interfere with the text. Similar things happen with tables.

Current CSS, derived from Charlie Howard's Sidenotes article in the
DP Wiki ( http://www.pgdp.net/wiki/Sidenotes ):

.sidenote, .sni { text-indent: 0; text-align: left; width: 9em; min-width: 9em;
max-width: 9em; padding-bottom: .1em; padding-top: .1em;
padding-left: .3em; padding-right: .3em; margin-right: 3.5em; float: left;
clear: left; margin-top: 0em; margin-bottom: 0em; font-size: small;
color: black; background-color: #eeeeee; border: thin dotted gray;
font-style: normal; font-weight: normal; font-variant: normal;
letter-spacing: 0em; text-decoration: none; }
@media handheld { .sidenote, .sni { float: left; clear: none; font-weight: bold; }}
.sni { text-indent: -.2em; }
.hidev { visibility: hidden; }

I have a demonstration of several of the problems on Dropbox,
https://dl.dropboxusercontent.com/u/3229599/ppgt138i.html

In that demo, the top part of the display (before the horizontal rule) uses sidenotes defined as above. Note that the stand-alone sidenote, and the First Sidenote look good. But the Second Sidenote is indented along with the paragraph that contains it.

In the poem the sidenote is within the poem itself, offsetting the lines.

In the table the sidenotes reside within each cell.

The sidenote on Footnote 1 is indented, and does not match the stand-alone sidenote for positioning.

---

The part below the horizontal rule uses sidenotes that specify a PPer-provided class, and the CSS for that class specifies {position: absolute; left: 8%;} (8% chosen to match up with the stand-alone sidenotes which are at the left margin, defined by ppgen as 8% for the body).

In the second part, to me, the sidenotes in the poem and in the table look good. However, the sidenotes in any kind of paragraph, or in a footnote, end up overlaying text.

So, position:absolute appears to work as a solution for sidenotes in poems and in tables, at least for browsers. I have not tried an epub/mobi test yet. But position absolute is a disaster for footnotes associated with paragraphs or footnotes.

Some questions:

• Will position:absolute cause a problem with epub/mobi?
• For indented paragraphs (block quotes) and footnotes, what would I need to generate to (a) break out of the containing element and (b) not overlay text in the containing element since, obviously, the use of position:absolute does not work well.

Any ideas?

Thanks,
Walt

[davem2]

One solution might be to increase the left margin when sidenotes are detected, then use absolute positioning to use the extra space opened by the margin. It would be similar to how page numbers are currently handled only on the left instead of the right. I'm concerned about possible epub/mobi issues with this though, and the waste of space it would create on a smaller screen.

Probably a dead end, but maybe !important could be used to "break out of the containing element"

Another solution may be to set the blockquote/paragraph/footnote to display: block (or add a div around it with display: block). This should cause the sidenote to float outside instead of the blockquote/paragraph/footnote flowing around the sidenote. The sidenote may need to be in a div for this to work, not sure. Another possible problem would be the sidenote could sit on top instead of the left if screen size is small. Also epub/mobi breakage. It would be something like .ic did, only for text instead of images (truncation issue on epub/mobi would be a possibility).

I'll do some tests and see if I can get anything usable. I wonder if anything like this has been posted to PG?

Easiest option is to not support inline sidenotes for nf blocks, tables etc.. For those cases sidenotes need to be relocated, or the PPer will need to come up with some other solution to deal with their unique case.

[davem2]

I'm not sure this would be acceptable, but another solution (more of a PPer workaround, not a ppgen change) would be to treat sidenotes like footnotes where a small hyperlink is shown in the original sidenote location, but the full text is contained in a sidenote section later in the text.

[wf49670]

That last idea is an interesting one, David. But I'm not sure I want to tackle it right now :)

By the way, Charlie reminded me that we still haven't seen a real sidenote in one of those locations "in the wild". The case Denis presesnted is one of "faux" sidenotes created from page headers. And actually, as i pointed out to him, that particular "sidenote" does not belong within the poem. It belongs at the top of the next paragraph, or perhaps about fifteen lines into it (and in that case actually on the next physical page of the book).

Charlie suggested simply waiting to figure out an implementation until we actually see one of those sidenotes. And that may be the better approach. I could either leave the code as it is, with the current warning in the doc (or maybe a bolder warning in the doc) that inline sidenotes may not work well in all locations. One step further would be to issue warning messages if ppgen finds them inside .nf blocks or tables or footnotes. A step beyond that might be to reject them completely, but it may be better simply to warn about them. That way a clever PPer might be able to find a way to make them work for some specific situation.