Hi,

I'm trying to style Footnotes so that instead of appearing on the page that they are referenced on, they appear at the end of a chapter. I need to do this because in our case, a page could have dozens and dozens of footnotes and it looks bad taking up more than half a page.

I tried using Named Pages but it's not working for me. Any ideas?

Example CSS:

@page {
  size: a5;
  margin: 2cm;
  font-size: 9pt;
}

@page footnotes_placeholder {
  @footnotes {
    border-top: thin solid black;
    padding: 0.3em 0;
    margin-top: 0.6em;
  }
}

div.chapter > p:last-child {
	page: footnotes_placeholder;
	background-color: red; /* Visual proof of selection */
}

div.chapter { 
	counter-reset: footnote 
}

.footnote {
	font-family: "Times New Roman" !important;
	display: none;
	display: footnote;
	display: prince-footnote;
	position: footnote;
	counter-increment: footnote;
	list-style-position: inside;
	margin-left: 1.4em;
	font-size: 90%;
	line-height: 1.4;
}

Structure of a document will look something like

<div class="chapter">
<h2>Title of chapter</h2>
<p>Blah blah  <span class="footnote">Foo</span> Blah blah blah  <span class="footnote">Bar</span></p> <!-- [...] -->
<p>Last paragraph</p>
</div>

Any ideas?

These are endnotes, and are best done by transforming the document structure instead of CSS. What you can do is use JavaScript (or your scripting language of choice) to move the content of the endnotes to the end of the chapter, leaving links to them in the text. Technically this is actually easier than footnotes, as you have fewer issues with trying to fit them onto the page.

Thanks for the reply.

Can you give more details on the transformation? You want me to change the way the HTML is generated?

As I'm getting a lot for free by using the .footnote style with prince attributes, I'm not sure I understand what you are saying. I should manually generate what I am looking for?

Regards,

If you are generating the HTML, then yes it would probably be easiest to generate it with the notes at the end, and leave links to them in the text. These links can be styled with CSS.

The JavaScript approach is another option when you can't change the way the HTML is generated, and need to run a script within Prince to transform it before the document is converted.

Ok. I can do this. Cheers.