Big margins in Kindle footnote pop-up

413Michele · 12-12-2021, 12:10 PM

Hello, I've got a problem with an AZW3 file that I converted from EPUB with calibre to send to my Kindle PW1. It wasn't a well made e-book, so before conversion I opened it with calibre's editor to improve it.

Among the things I modified were the endnotes and although they look good on my pc, they have a big margin on my Paperwhite, but only in the popup view. At the end of the book, with all the notes together, they have the right spacing.

This is a sample of the code I used (already converted to AZW3):

Code:

<body class="calibre">
  <h2 class="notes-title"><em class="calibre4">Note</em></h2>

  <div class="endnotes">

    <div class="endnote">
      <p class="note"><a href="part0002.html#note-1" id="endnote-1">1</a> Come venir sotterrato nella sabbia e rimpinzato di uova di scarabeo.</p>
    </div>

  </div>

</body>

Code:

.endnotes {
    display: block;
    font-size: 0.8em;
    margin-top: 4em
    }
.endnote {
    display: block;
    margin-bottom: 0.5em
    }
.note {
    display: block;
    text-indent: 0;
    margin: 1em 0 0.2em
    }

The results are attached. Is the Kindle's renderer inflating the spacing? Or did I make a mistake? Because The 2nd screenshot is exactly as I want it, but in the 1st there is a huge bottom margin I'd like to remove.

Thanks for the help

jhowell · 12-12-2021, 03:17 PM

I don’t think it is a bottom margin. It is just that the box displaying the footnote is a fixed size.

413Michele · 12-12-2021, 03:34 PM

Quote:

Originally Posted by jhowell

I don’t think it is a bottom margin. It is just that the box displaying the footnote is a fixed size.

That's not it, I've got other books that show the popup correctly and the box size changes, with both short and long notes (and without any margin). I will check their CSS and change my book accordingly if I don't find a solution, but as far as I can tell my method should work too

jhowell · 12-12-2021, 04:45 PM

You have a fairly old Kindle that cannot run the latest firmware. I suspect that the results may vary based on Kindle firmware version and file format.

I am curious to learn what you find from examining other books.

413Michele · 12-12-2021, 05:20 PM

Ok, I did some testing in the file and half the space disappears if I remove the div container for the single note. The other half disappears if I remove the div from the following note (I had ~20 notes in the file that I didn't include in the sample code here). There may remain a very little margin, but I'm not sure.

It would seem that my Kindle's renderer doesn't like a note incapsulated in a div. Removing them would be a bit annoying since I have some notes which are made of 2 paragraphs.

Now it's night time where I am, but I'll try other combinations tomorrow

Tex2002ans · 12-12-2021, 06:39 PM

Quote:

Originally Posted by 413Michele

Ok, I did some testing in the file and half the space disappears if I remove the div container for the single note

There's probably no need for all that display:block stuff.

Remove that from all 3 of those classes, and that may fix your issue.

Hitch · 12-13-2021, 11:24 AM

Quote:

Originally Posted by Tex2002ans

There's probably no need for all that display:block stuff.

Remove that from all 3 of those classes, and that may fix your issue.

We never do that. I wouldn't put footnotes in divs, nor in display blocks. It doesn't gain you anything, particularly in the popups.

Hitch

413Michele · 12-14-2021, 07:30 AM

Quote:

Originally Posted by Tex2002ans

There's probably no need for all that display:block stuff.

Remove that from all 3 of those classes, and that may fix your issue.

Curiously I didn't remember putting them in, and in fact they were added by calibre during the conversion. Removing them has no effect though, the space remains.

The original EPUB formatting was this:

Code:

.endnotes {
  font-size: 0.8em;
  margin-top: 4em;
}
.endnote {
  margin-bottom: 0.5em;
}
.note {
  text-indent: 0;
  margin: 1em 0 0.2em
}

Quote:

Originally Posted by Hitch

We never do that. I wouldn't put footnotes in divs, nor in display blocks. It doesn't gain you anything, particularly in the popups.

Hitch

Regarding the divs, this book uses footnotes a lot (it's from the Discworld series by Terry Pratchett) and I wanted to use it for the few notes that consist of more than one paragraph. For one they make possible having a bigger margin between different notes than between paragraphs of the same note.

Tex2002ans · 12-14-2021, 11:12 AM

Quote:

Originally Posted by 413Michele

Regarding the divs, this book uses footnotes a lot (it's from the Discworld series by Terry Pratchett) and I wanted to use it for the few notes that consist of more than one paragraph. For one they make possible having a bigger margin between different notes than between paragraphs of the same note.

This is the way I typically handle it:

Code:

<p class="footnote">[1] Blah blah blah.</p>

<p>Longer text in footnote 1.</p>

<p class="footnote">[2] Blah blah blah.</p>

CSS:

Code:

p.footnote {
	margin-top: 1em;
	text-indent: 0;
}

Remember, KISS (Keep It Simple Stupid).

Side Note: If you still insist on having each individual footnote wrapped...

There's other ways of accomplishing this using the actual EPUB3 code, but it gets a little uglier (using <aside> + epub:type="footnote").

See the discussion in 2019: "Epub3 Foot- End-notes" (especially my post #39 + Doitsu's sample EPUB3 I linked to + Doitsu's post #62).

Quote:

Originally Posted by 413Michele

Curiously I didn't remember putting them in, and in fact they were added by calibre during the conversion. Removing them has no effect though, the space remains.

The original EPUB formatting was this:

Code:

.endnotes {
  font-size: 0.8em;
  margin-top: 4em;
}
.endnote {
  margin-bottom: 0.5em;
}
.note {
  text-indent: 0;
  margin: 1em 0 0.2em
}

Well, then start eliminating the margins one-by-one until you come across the issue.

(Or start with no margin code at all, then start re-introducing them one-by-one.)

It has to be some weird interaction between those. Or if it still occurs with no margins, then you know the problem lies elsewhere in the code.

Quote:

Originally Posted by 413Michele

Regarding the divs, this book uses footnotes a lot (it's from the Discworld series by Terry Pratchett) [...].

Nice. Last year, I blasted through the first 5 books within a few weeks.

(Jellby recommended them to me.)

Good stuff, good stuff.

413Michele · 12-15-2021, 01:55 PM

Ok, after a lot of testing I finally found the problem, and I can't believe what it was...

This code causes problems:

Code:

<div class="endnote">

      <p class="note"><a href="part0002.html#note-1" id="endnote-1">1</a> Come venir sotterrato nella sabbia e rimpinzato di uova di scarabeo.</p>

    </div>

This doesn't:

Code:

<div class="endnote"><p class="note"><a href="part0002.html#note-1" id="endnote-1">1</a> Come venir sotterrato nella sabbia e rimpinzato di uova di scarabeo.</p></div>

HTML wise they are exactly the same, except for the spaces and newlines that I candidly put in with the calibre Beautify tool. Who wouldn't want a clean-to-read code right?

Wrong.

Kindle's renderer decided that the spaces and newlines between </p> and </div> are important, and they should be shown as margins. Even only adding spaces causes smaller margins to appear. I don't even know how it occurred to me to try and remove those spaces...

Quote:

Originally Posted by Tex2002ans

Remember, KISS (Keep It Simple Stupid).

Definitely words to live by

Quote:

Originally Posted by Tex2002ans

Side Note: If you still insist on having each individual footnote wrapped...

There's other ways of accomplishing this using the actual EPUB3 code, but it gets a little uglier (using <aside> + epub:type="footnote").

See the discussion in 2019: "Epub3 Foot- End-notes" (especially my post #39 + Doitsu's sample EPUB3 I linked to + Doitsu's post #62).

That is also the preferred method in Amazon's Kindle Publishing Guidelines, but if it doesn't work with EPUB2 I'd rather avoid it. I'll read the discussion anyways, as it seems semantically better.

Quote:

Originally Posted by Tex2002ans

Nice. Last year, I blasted through the first 5 books within a few weeks.

(Jellby recommended them to me.)

Good stuff, good stuff.

I love his humour and characters

This has become one of my favourite adages:

Give a man a fire and he's warm for the day. But set fire to him and he's warm for the rest of his life.

Tex2002ans · 12-15-2021, 05:06 PM

Quote:

Originally Posted by 413Michele

Ok, after a lot of testing I finally found the problem, and I can't believe what it was...

[...]

Kindle's renderer decided that the spaces and newlines between </p> and </div> are important, and they should be shown as margins.

Hmmmm... Good detective work.

But it definitely isn't normal.

And what happened if you removed that <div class="endnote">?

And are you using anything like a "CSS reset" (like Blitz)? (For more information on why that's a horrible idea in ebooks, see the 2021 thread: "Revolutionary code? Need feedback")

Quote:

Originally Posted by 413Michele

That is also the preferred method in Amazon's Kindle Publishing Guidelines, but if it doesn't work with EPUB2 I'd rather avoid it. I'll read the discussion anyways, as it seems semantically better.

Oh. Well, if you wanted to stick with EPUB2, then you can't go wrong with the super basic:

Code:

<p>This is an example.<a href="#fn1" id="ft1">[1]</a></p>

<hr />

<p class="footnote"><a href="#ft1" id="fn1">[1]</a> An example footnote.</p>

It works everywhere on everything.

Heuristics should also detect that simple link back/forth, so you'd get popup footnotes across many readers.

Quote:

Originally Posted by 413Michele

I love his humour and characters

This has become one of my favourite adages:

Give a man a fire and he's warm for the day. But set fire to him and he's warm for the rest of his life.

That's a good one.

413Michele · 12-17-2021, 10:33 AM

Quote:

Originally Posted by Tex2002ans

Hmmmm... Good detective work.

But it definitely isn't normal.

And what happened if you removed that <div class="endnote">?

Removing the divs solves the problem too, but I liked having one note per div, it's more rigorous and now that I have a solution I might keep them like this.

Quote:

Originally Posted by Tex2002ans

And are you using anything like a "CSS reset" (like Blitz)? (For more information on why that's a horrible idea in ebooks, see the 2021 thread: "Revolutionary code? Need feedback")

No reset, even though I wonder if a small, epub-specific and well thought reset could be useful in general. But probably the support for different features is so variegated that it would create more problems that it solves...

Quote:

Originally Posted by Tex2002ans

Oh. Well, if you wanted to stick with EPUB2, then you can't go wrong with the super basic:

Code:

<p>This is an example.<a href="#fn1" id="ft1">[1]</a></p>

<hr />

<p class="footnote"><a href="#ft1" id="fn1">[1]</a> An example footnote.</p>

It works everywhere on everything.

Wouldn't this leave the footnote in the main text? Or would I need to also add something like display:none; in the CSS?

Tex2002ans · 12-17-2021, 02:02 PM

Quote:

Originally Posted by 413Michele

Wouldn't this leave the footnote in the main text? Or would I need to also add something like display:none; in the CSS?

Shoving footnotes at the end of each HTML file has multiple advantages:

Each chapter's HTML is completely independent.
- Easily copy/pastable/usable elsewhere.
A device doesn't need to load any other files.
- This was much more important on the older, much slower devices. Used to be a noticeable delay hopping back/forth.
Keeps filesizes smaller.
- ~300 KB is the max filesize recommended. (Older devices could crash.)
[...]

(I described a lot more details back in 2013: "A link to jump back to the original start point?". Just ignore my backwards footnote/endnote description.)

Quote:

Originally Posted by 413Michele

Wouldn't this leave the footnote in the main text? Or would I need to also add something like display:none; in the CSS?

If you want an endnotes file, adjust the code slightly.

Chapter 2:

Code:

<p>This is an example.<a href="../Text/endnotes.xhtml#fn2.1" id="ft2.1">[1]</a></p>

endnotes.xhtml:

Code:

<p class="footnote"><a href="../Text/Chapter02.xhtml#ft2.1" id="fn2.1">[1]</a> An example footnote.</p>

I recommend appending the Chapter# to your link ids. This allows you to have unique names throughout the entire book.

Quote:

Originally Posted by 413Michele

Wouldn't this leave the footnote in the main text?

So? I still don't get this argument.

This was all discussed/described in the 2013 thread.

Just skip your eyes right over the footnotes or press the "next page" button a few times.

What the heck do you do while reading a physical book?

Quote:

Originally Posted by 413Michele

Or would I need to also add something like display:none; in the CSS?

No. Don't ever do that. That'll cause many more problems.

This is partly why EPUB3 introduced all the <aside> + epub:type="footnote" stuff. This would allow readers to set their own preferred settings.

(Like, instead of popup footnotes, KOReader allows you to have a footer area that displays at the bottom of your screen.)

If you don't want footnotes "in the way", then use an endnotes file.

But I think advantages of footnotes >>> endnotes.

413Michele · 12-17-2021, 02:46 PM

Quote:

Originally Posted by Tex2002ans

So? I still don't get this argument.

This was all discussed/described in the 2013 thread.

Just skip your eyes right over the footnotes or press the "next page" button a few times.

What the heck do you do while reading a physical book?

Of course, you're right. I have simply never seen an ebook with per-chapter notes till now and I wasn't sure what you meant. This is surely an option I'll consider.

Anyway, You gave me a lot of info to think about. I want to thank you, jhowell and Hitch for all the help you gave me (I'm not tagging as I don't know the etiquette)

This forum is incredible, with its shared knowledge and the helpfulness of its members

Hitch · 12-17-2021, 02:48 PM

Quote:

Originally Posted by Tex2002ans

So? I still don't get this argument.

This was all discussed/described in the 2013 thread.

Just skip your eyes right over the footnotes or press the "next page" button a few times.

What the heck do you do while reading a physical book?

Yes, there are still eBook readers (humans, that is) that prefer to have the footnotes at the bottom of the related screen.

Quote:

No. Don't ever do that. That'll cause many more problems.

This is partly why EPUB3 introduced all the <aside> + epub:type="footnote" stuff. This would allow readers to set their own preferred settings.

(Like, instead of popup footnotes, KOReader allows you to have a footer area that displays at the bottom of your screen.)

If you don't want footnotes "in the way", then use an endnotes file.

But I think advantages of footnotes >>> endnotes.

Personally, I'm an endnote preferrer as a reader, but yes, the more and greater options we can give our readers, the better off we are, in terms of reader engagement and satisfaction. I try hard not to force my own preferences on the innocent victims. LOL.

Hitch

12-12-2021, 12:10 PM	#1
413Michele Enthusiast Posts: 47 Karma: 10 Join Date: Jan 2021 Location: Italy Device: Kobo Libra 2, Kindle Paperwhite (1st gen)	Big margins in Kindle footnote pop-up Hello, I've got a problem with an AZW3 file that I converted from EPUB with calibre to send to my Kindle PW1. It wasn't a well made e-book, so before conversion I opened it with calibre's editor to improve it. Among the things I modified were the endnotes and although they look good on my pc, they have a big margin on my Paperwhite, but only in the popup view. At the end of the book, with all the notes together, they have the right spacing. This is a sample of the code I used (already converted to AZW3): Code: <body class="calibre"> <h2 class="notes-title"><em class="calibre4">Note</em></h2> <div class="endnotes"> <div class="endnote"> <p class="note"><a href="part0002.html#note-1" id="endnote-1">1</a> Come venir sotterrato nella sabbia e rimpinzato di uova di scarabeo.</p> </div> </div> </body> Code: .endnotes { display: block; font-size: 0.8em; margin-top: 4em } .endnote { display: block; margin-bottom: 0.5em } .note { display: block; text-indent: 0; margin: 1em 0 0.2em } The results are attached. Is the Kindle's renderer inflating the spacing? Or did I make a mistake? Because The 2nd screenshot is exactly as I want it, but in the 1st there is a huge bottom margin I'd like to remove. Thanks for the help Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Issue with footnote pop-up (epub3)	carmenchu	Viewer	5	01-06-2021 04:59 AM
Paperwhite & footnote pop-ups	eFTy	Kindle Formats	61	04-07-2020 05:33 PM
How to disable(and handle) the pop-up footnote on e-ink devices?	yasteora	Kobo Developer's Corner	0	05-17-2016 12:07 AM
Footnote pop-up example	dcmst	ePub	7	09-22-2014 10:33 PM

12-12-2021, 03:17 PM	#2
jhowell Grand Sorcerer Posts: 6,621 Karma: 85000001 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	I don’t think it is a bottom margin. It is just that the box displaying the footnote is a fixed size.

12-12-2021, 04:45 PM	#4
jhowell Grand Sorcerer Posts: 6,621 Karma: 85000001 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	You have a fairly old Kindle that cannot run the latest firmware. I suspect that the results may vary based on Kindle firmware version and file format. I am curious to learn what you find from examining other books.

12-12-2021, 05:20 PM	#5
413Michele Enthusiast Posts: 47 Karma: 10 Join Date: Jan 2021 Location: Italy Device: Kobo Libra 2, Kindle Paperwhite (1st gen)	Ok, I did some testing in the file and half the space disappears if I remove the div container for the single note. The other half disappears if I remove the div from the following note (I had ~20 notes in the file that I didn't include in the sample code here). There may remain a very little margin, but I'm not sure. It would seem that my Kindle's renderer doesn't like a note incapsulated in a div. Removing them would be a bit annoying since I have some notes which are made of 2 paragraphs. Now it's night time where I am, but I'll try other combinations tomorrow

Advert

Advert