I thought my original epub footnote problems were over (Incorrect epub formatting of footnote in blockquote), but…
The compiler is unfortunately making a dog’s meal of the footnotes again. Not only is it back to using blockquote in the footnote itself, but it is overwriting lines in the notes and getting the font size of footnotes wrong. Same problem evident in Kindle Previewer, calibre, apple books and sigil.
Here is a screenshot from sigil:
Maybe the CSS files will help:
default:
/* Default paragraph formatting */
p { margin: 0rem 0rem 0rem 0rem; text-indent: 1.5rem; }
/* Separators */
.separator { }
/* Styles */
.attribution { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; text-align: right; }
blockquote { margin: 1rem 0rem 1rem 0rem; }
blockquote p { margin: 0.08rem 0rem 0.08rem 0rem; text-indent: 0.94rem; font-size: 0.83rem; }
.body { margin: 0rem 0rem 0rem 0rem; text-indent: 1.5rem; }
.bordered-title { margin: 0rem 0rem 0.83rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.33rem; font-weight: normal; }
.caption { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; text-align: center; font-size: 0.83rem; }
figcaption { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; text-align: center; font-size: 0.83rem; }
caption { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; text-align: center; font-size: 0.83rem; caption-side: bottom; }
.chapter-number { margin: 0rem 0rem 1.67rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.67rem; font-weight: normal; }
pre > code { white-space: pre-wrap; -webkit-hyphens: none; hyphens: none; }
code { font-weight: normal; font-style: normal; text-decoration: none; }
.footnotes { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; }
.heading-1 { margin: 0rem 0rem 1.33rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.33rem; font-weight: normal; }
.heading-2 { margin: 0.67rem 0rem 0.67rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.08rem; font-weight: normal; }
.page-title { margin: 0rem 0rem 1rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.17rem; font-weight: normal; }
.section-number { margin: 0rem 0rem 1.33rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.33rem; font-weight: normal; }
.sub-heading { margin: 0.67rem 0rem 0.67rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.08rem; font-weight: normal; }
.subtitle { margin: 0rem 0rem 1.33rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.33rem; font-weight: normal; font-style: italic; }
.title { margin: 0rem 0rem 0.83rem 0rem; text-indent: 0rem; text-align: center; line-height: 1em; font-size: 1.33rem; font-weight: normal; }
/* Footnotes */
a.fn-marker { font-size: 0.65em; vertical-align: super; line-height: 1em; text-decoration: none; }
a.fn-label { text-decoration: none; }
/* Page padding */
.part-number-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.part-number-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.part-title-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.chapter-heading-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.chapter-title-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.chapter-title-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.chapter-title-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.heading-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.heading-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.chapter-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.titled-chapter-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
.titled-chapter-page-padding { margin: 0rem 0rem 0rem 0rem; font-size: 1rem; line-height: 6rem; }
/* Tables */
/* Reset all potential built-in rendering assumptions so we have full control. */
table, table * {
border: none;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
table {
/* Will centre tables on iBooks and others, but annoyingly, not ADE-based devices, which ignore auto margins. */
margin: 1em auto 1em auto;
border-spacing: 0em;
border: solid #000;
border-width: 0pt 0pt 1pt 1pt;
}
table caption {
margin-top: 0.25em;
caption-side: bottom;
text-align: center;
}
/* Insert a little padding within cells, mainly horizontal, to keep tables from being cramped to the content width of each cell. */
th, td {
padding: 0.25em 0.35em;
border: solid #000;
border-width: 1pt 1pt 0pt 0pt;
}
/* Avoid text indents in paragraphs inside cells. */
td p { margin: 0rem 0rem 0rem 0rem; text-indent: 0rem; }
/* Images */
img { display: block; margin: 1rem auto 1rem auto; }
img + figcaption { margin-top: -0.75rem; }
/* Numbered lists */
/* 1. a. i. ... */
/* Level Two */
ol ol {
list-style-type: lower-alpha;
}
/* Level Three */
ol ol ol {
list-style-type: lower-roman;
}
/* Level Four */
ol ol ol ol {
list-style-type: decimal;
}
/* Level Five */
ol ol ol ol ol {
list-style-type: lower-alpha;
}
/* Level Six */
ol ol ol ol ol ol {
list-style-type: lower-roman;
}
/* Level Seven */
ol ol ol ol ol ol ol {
list-style-type: decimal;
}
/* Bullets */
/* Bullets, and then it's Dashes all the way down. */
ul ul {
list-style: none;
display: block;
text-indent: -0.6em;
}
ul ul li:before {
content: '⁃ ';
}
/* Table of contents navigation */
nav#toc ol { list-style: none; padding: 0em; text-align: center; line-height: 1.5em; margin-top: 0.5rem; margin-bottom: 0.5rem; }
nav#toc ol li:before { content: none; }
/* Small-caps */
.small-caps { font-variant: small-caps; }
custom (appended)
/* Amend title to have lines above and below. */
.bordered-title { margin-left: 10%; margin-right: 10%; border-top: 1px solid black; padding-top: 12px; border-bottom: 1px solid black; padding-bottom: 12px; }
/* When a subtitle appears below a title, move it down a little so that it's not too close to the border. */
.bordered-title + .subtitle { padding-top: 16px; }
/* Override block quotes to indent at either side and override top and bottom spacing. */
blockquote {
margin-top: 0rem;
margin-bottom: 0rem;
margin-left: 2rem;
margin-right: 2rem;
}
.attribution { margin-left: 2rem; margin-right: 2rem; }
/* Move the quote attribution up a little when below a quote because otherwise the quote's bottom margin will leave a big gap between quote and attribution. */
blockquote + .attribution { margin-top: -0.5rem; }
/* Keep figures and captions together if possible. Also ensure images are centered. */
figure { page-break-inside: avoid; text-align: center; }
blockquote > .footnotes { margin-left: -2rem; }
blockquote .footnotes:first-child { margin-top: -1rem; }
blockquote .footnotes:last-child { margin-bottom: -1rem; }
The CSS adjustments for the margins on the blockquote footnotes don’t match the numbers currently being for the blockquotes. Looking at the CSS presented for the blockquotes, you currently have:
blockquote { margin: 1rem 0rem 1rem 0rem; }
blockquote p { margin: 0.08rem 0rem 0.08rem 0rem; text-indent: 0.94rem; font-size: 0.83rem; }
but then further down you also have
/* Override block quotes to indent at either side and override top and bottom spacing. */
blockquote {
margin-top: 0rem;
margin-bottom: 0rem;
margin-left: 2rem;
margin-right: 2rem;
}
The second overrides the first for any properties defined in both, so the final blockquote margins are 0 on top and bottom, and 2rem on the left and right. Since you already have a 0 margin for the top and bottom of all blockquotes, you don’t need need these lines:
blockquote .footnotes:first-child { margin-top: -1rem; }
blockquote .footnotes:last-child { margin-bottom: -1rem; }
Those are both there to counteract the 1rem top and bottom margins that are in the default stylesheet so that blockquotes in the footnote section would be spaced the same as other paragraphs, without that extra top/bottom padding. In the original, it would be saying 1 - 1 = 0. Now you’ve got 0 - 1 = -1, creating negative line spacing that’s causing lines to overlap.
The appended blockquote style is also setting a 2rem margin on the right and left. Your current declaration for the footnotes within the blockquote counteracts that for the left margin but not for the right, so you’ll want to add that as well:
blockquote > .footnotes { margin-left: -2rem; margin-right: -2rem; }
Your current stylesheet also reduces the font size for paragraphs in the blockquote to 0.83rem; you can set the footnotes in blockquotes to the normal size by adding font-size: 1rem; to the blockquote > .footnotes declaration:
blockquote > .footnotes { margin-left: -2rem; margin-right: -2rem; font-size: 1rem; }
Or you might rather just create a separate footnotes line in the appended CSS so that the font setting will apply to all footnotes, in case you want to alter it later and be sure it applies to the notes in and out of blockquotes. For that, leave the font-size out of the blockquotes > .footnotes line and instead create an additional line:
.footnotes { font-size: 1rem; }
Just note in either case that if you change the footnote size via a style in Scrivener’s compile format designer, that change would go into the default CSS and you’d need to remove your font-size addition in the appended CSS to avoid it overriding the change in the default.
I’m beginning to understand that I can’t expect to get a good ebook out of my book without descending into the innards of epub. If I remove the blockquote around a footnote in sigil - for example:
<blockquote>
<p class="footnotes"><a href="body6.xhtml#fn1" class="fn-label" id="fn1">1.</a> Anahareo [Gertrude Bernard] (2014). <em>Devil in Deerskins: My Life with Grey Owl</em> (Edited and with an Afterword by Sophie McCall ed.). Winnipeg: University of Manitoba Press. p. 148.</p>
</blockquote>
everything falls into place without any further fuss. The footnotes are properly formatted and the editor font is retained.
Surely this is the root cause of the formatting problem and won’t be properly fixed until the compiler is changed to stop generating this construction.
May I ask if this bug has been “formally” recognised and a bug fix planned? When can I expect a bug fix release?
Some of this code was added as a fix for Epub blockquote format: How do I control the fomatting? - #9 by AmberV.
It seems to me we are trying to fix something that oughtn’t to be broken. See my previous reply to this post, which crossed with yours.
Yes, the CSS adjustment is just to workaround the issue with the ePub conversion that’s causing the footnotes applied to text within blockquotes to be placed in blockquote elements themselves. Rather than making the stylesheet adjustments, you could, as you did, dig into the epub after compile and delete all the <blockquote> elements from the footnotes XHTML page and solve the problem. The stylesheet tweak is just an option that might let you make the change one time in the compiler and then not need to edit the file each time afterward.
The bug was filed when you reported it earlier, but I can’t give an estimate on when a fix will be available. Epubs are created by way of MutliMarkdown conversion to XHTML, and I don’t know how difficult it may be to adjust how the conversion is handled or correct after the fact. Hopefully it will be a simple matter to strip the unwanted blockquote elements and we’ll have a fix out before long; in the meanwhile, with Sigil or Calibre you should be able to do a find/replace to strip them quickly from your own epub.
Many thanks for the suggestion and the heads up about the bug fix!
I’m trying to understand the process you’re describing. Am I right in thinking that after compiling I am to open the epub file in, say, Sigil, and do a search and replace in the Notes file?
I’m sure you would agree this is not an efficient process and I’m looking forward to a bug fix release!
Right, the two options are
The first option doesn’t need to be redone each time you compile, but if you make further tweaks to the appearance of blockquotes or footnotes generally, you might need to also make those changes to the added lines that affect the footnotes in blockquotes. The second you would do each time but would be the same find/replace procedure on the same file, so you might be able to create a macro to make it faster if you’re really doing it frequently.
Using the Regex mode in Sigil’s find/replace, you can search for <\/?blockquote> and replace it with nothing, searching only the current file (with footnotes.xhtml selected as the current file!). That will remove both the opening <blockquote> and the closing </blockquote> tags.