While I love how simple Prince makes turning some inline text into footnotes, that solution just doesn't cut it for some of my documents. For these, due to the nature of the text, the extension of the notes, or both, I use different markup. I've tried to make these work, but I'm kind of stuck halfway.
First, the markup. I use
<p>[...]blah blah blah[...] <a href="#footnote_xyz" class="footnote_call">and there's a reason why this is so</a> [...] more text [...] </p>
<div class="footnote" id="footnote_xyz">
<p>A really lengthy aside.</p>
<p>These even take some paragraphs sometimes.</p>
</div>
which degrades gracefully when reading on a text-only browser like Links or Lynx, whereas inline text wouldn't. As I style them, these footnotes appear on screen when the call is clicked on (pure CSS, no js),
or as paragraphs interspersed with the main text on paper:
The latter is what I want to turn into 'proper' footnotes. The functionality provided by Prince quickly got me to:
which shows the two problems I don't know how to solve yet:
1) Footnote-calls: I've tried to hide them, float them into the previous paragraph, make them 1 or 0 pixels (see the two red pixels above?). They still take up one full line in the text flow, even with "content: none;". This appears to be a long-standing issue, BTW.
I understand Prince needs to know where footnote elements were, but can't it be done invisibly? This I can live with, but it doesn't look good if paragraph separation on paper is zero lines.
2) Since I use my own footnote call elements, which appear before the footnotes themselves, the footnote counter is not updated yet when their ":after" pseudoelements are generated. I.e., their number is always one unit less than it should.
I thought this could be solved with "counter-increment: footnote" either inside "a.footnote_call { }" or "a.footnote_call:after { }", and maybe decrement the counter again from the footnotes themselves. But the footnote counter wasn't incremented in the first place.
Am I doing something obviously wrong, or...?
First, the markup. I use
<p>[...]blah blah blah[...] <a href="#footnote_xyz" class="footnote_call">and there's a reason why this is so</a> [...] more text [...] </p>
<div class="footnote" id="footnote_xyz">
<p>A really lengthy aside.</p>
<p>These even take some paragraphs sometimes.</p>
</div>
which degrades gracefully when reading on a text-only browser like Links or Lynx, whereas inline text wouldn't. As I style them, these footnotes appear on screen when the call is clicked on (pure CSS, no js),
or as paragraphs interspersed with the main text on paper:
The latter is what I want to turn into 'proper' footnotes. The functionality provided by Prince quickly got me to:
which shows the two problems I don't know how to solve yet:
1) Footnote-calls: I've tried to hide them, float them into the previous paragraph, make them 1 or 0 pixels (see the two red pixels above?). They still take up one full line in the text flow, even with "content: none;". This appears to be a long-standing issue, BTW.
I understand Prince needs to know where footnote elements were, but can't it be done invisibly? This I can live with, but it doesn't look good if paragraph separation on paper is zero lines.
2) Since I use my own footnote call elements, which appear before the footnotes themselves, the footnote counter is not updated yet when their ":after" pseudoelements are generated. I.e., their number is always one unit less than it should.
I thought this could be solved with "counter-increment: footnote" either inside "a.footnote_call { }" or "a.footnote_call:after { }", and maybe decrement the counter again from the footnotes themselves. But the footnote counter wasn't incremented in the first place.
Am I doing something obviously wrong, or...?
Edited by mrwarper
