View Single Post
Old 11-20-2013, 02:52 PM   #1
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,023
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
Pop-up footnotes

This has been discussed variously and under different aspects, such as the approach of Liz Castro for pop-up footnotes on iBooks (http:[URL="http://www.pigsgourdsandwikis.com/2012/05/creating-pop-up-footnotes-in-epub-3-and.html"[/URL] ). By chance, I purchased an epub-ebook with this feature implemented (Gontcharow, Oblomow, at feedbooks). I kebubized it via the Extended Driver of jgoguen and found it amazing that the pop-ups worked on my KoboTouch, thanks of epub 3 support of the ACCESS renderer, as I realized afterwards. As I pretend to create an ebook with footnotes, I tried to achieve this by myself with a test-epub.

That’s what I did:
1. Create a text with footnote-marks in the epub (such as “This is the referential text[1]”) in Sigil.
2. Create a separate XML in the epub called “footnotes.xml” (xml has been the format of the template ebook. Why it was not html, I don’t know, but as a digital analphabet I preferred to modify as little as possible).
3. Add into the “head”-section of the “footnote.xml”:
Code:
<title>Foonotes</title>
  <link href="../Styles/footnotes.css" rel="stylesheet" type="text/css" />
4. Add footnote-mark and footnote-text to the “body”-section of the footnote-sheet (“[1] This is footnote 1.”).
5. Create a separate footnote.css with this code:
Code:
.footnote 
{
  margin-bottom:10px;
}

.footnote .marker
{
  color:#777;
}
6. Add to the main.css code like this:
Code:
.footnote 
{
  font-size:x-small;
  vertical-align:super;
}
7. Link the epub-text to main.css (as usual), and the footnote.css to the footnote.xml.
8. Wrap the footnote-mark in the epub-text like this:
Code:
<a class="footnote" href="../Text/footnotes.xml#footnote_1" id="footnote_1_call">[1]</a>
9. Wrap the footnote-mark and the footnote-text in the “footnote.xml” like this:
Code:
<div class="footnote" id="footnote_1">
    <a class="marker" href="../Text/main1.xml#footnote_1_call">[1]</a> <span class="isfootnote"> This is footnote 1.</span>
  </div>
Make sure that the referenced xml-section of the epub is correct (here: “main1”)
10. Save epub (in fact, save often!).
11. Add epub to Calibre.
12. Convert to kepub.
13. Connect device to computer.
14. Send kepub to device.
15. Disconnect device safely and let it process.
16. Done.

When opening the ebook, you will see the footnote-mark, and by tapping on it, there will open the pop-up. You can easily close it and continue reading at the same place.
Note that in a simple epub, the footnote-marks are completely ignored (on KoboTouch).

It should be simple to save the principal codes in Sigil’s Clip-Editor, in order to easily adapt the respective footnotes.

To be true: I only copy-pasted the codes from the template epub, having no idea about the function of every single command. But I have been astonished that a layman like me should be able to bring this to an end. And if there is one or the other who can take profit from this report, I’ll be mostly satisfied.

Conclusion: Cheers to jgoguen and all the hell guys that provide us the chance of such features!
Leonatus is offline   Reply With Quote