I’m formatting an essay that have several footnotes with two paragraphs, but if you put a <p> tag inside <span class="footnote"> it breaks the footnote and renders in the body text; and if you use a block element for footnotes (say <aside>) it breaks the flow of the document inserting a line break before the marker. How can I achieve said behaviour?

Alternatively, I was thinking in fake a paragraph by filling the vertical space an then insert a line break, but can’t get that to work either. Do anyone have any ideas on that?

We put footnotes in a div after the paragraph with the callout, so as to avoid putting block elements inside paragraphs. A negative margin on the paragraph after the footnote div fixes the line break. See attached file for an example.

Dave

1. footnotes.html‎ 3.1 kB

Thanks! That’s very clever; I've tried it and it works.

However, this method has some inconveniences.

• If you are using automatically numbered footnotes, the counter will not be incremented until the <div> with the footnote body appears. This, however, could be solved relatively easy by using a manual counter for both type of notes.
• If the paragraph is splitted in two pages and the call is in the beginning, the call will be in one page and the note in the other. This is especially relevant when working with older text, which tend to have very large paragraphs (sometimes occupying several pages).
• If there’s another footnote after the call and before the paragraph ending, then the later will appear before the former in the footnote area, and with the same number (depending on how the counter is incremented).

So, I kept thinking and came with a surprisingly simple solution: put every paragraph of the footnote between a span and then display then as block. Something like

<p>This is a paragraph in the body of the text<span class="footnote"><span class="footnote-p">And this is a footnote with two fake paragraphs. This is the first one.</span><span class="footnote-p">And this is the second one.</span></span> with many important thing to say.</p>

And the relevant css

span.footnote-p {display: block;}
span.footnote-p + span.footnote-p {text-indent: 2ex;}

This keep the code cleaner and avoid the problems listed above. I attach a working html for anyone interested to see.

1. footnotes-span.html‎ 2.8 kB

Great idea! What do you two do anyway?

Jim Albright
Wycliffe Bible Translators

I’m a philosophy grad student, working in my dissertation. There’s not many resources available for humanities students, aside from LaTeX, which I have used, but it’s a mess changing the layout. CSS is much more flexible and easy to maintain; besides, I will need an HTML version anyway. Prince is a better fit overall, except for the bibliography management.

I work for one of the "big five" trade publishers in the U.S. We're creating literally millions of books using Prince (including the current #3 and #6 Hardcover Fiction bestsellers on the NYTimes list). I babysit our typesetting system, and am also editing the W3C specs that cover paged media and books.

Dave