Pop-up footnotes

[Leonatus]

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”:

<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:

.footnote 
{
  margin-bottom:10px;
}

.footnote .marker
{
  color:#777;
}

6. Add to the main.css code like this:

.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:

<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:

<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!

[fxp33]

Hi,

Here some ideas I tried some time ago.

A quiz with popup:
https://www.mobileread.com/forums/sho...d.php?t=212455

A multilingual book popup:
https://www.mobileread.com/forums/sho....php?p=2509245

Regards

François

[Leonatus]

François,
especially the second instance sounds extremely forwar-looking! But also a whole lot of work, I suppose. Thanks for that!

[Leonatus]

My example has been performanced under firmware 2.5.2. tshering just mentioned in another thread that pop-up footnotes won't work under 3.0.1.

I haven't tested it yet, but if this were the case, it would be pretty irksome.

[fxp33]

Hi,

The footnote does work, but only if you use english characters.

On the other hand, accented characters don't work anymore, although the encoding of the page is utf-8.

Regards

François

[anacreon]

Just tested your file on my aura hd, F/W 3.0.1, the accented characters work fine.

[fxp33]

Hi Anacreon,

Sure the text in the popup displays the same accented letters as in the normal text?

Great news for Aura users... It reduces the problem to the glo.

Thanks again for your feedback

François

[dassie]

Wait, so the kobo recognises the link as a footnote because of using the 'footnote' class? I thought you needed epub:type="noteref" tags and such?

Just thinking out loud to see if I could use this to easily convert the normal 'good luck trying to hit the link back' footnotes to nice pop-up ones.

[anacreon]

Originally Posted by dassie

Wait, so the kobo recognises the link as a footnote because of using the 'footnote' class? I thought you needed epub:type="noteref" tags and such?

Just thinking out loud to see if I could use this to easily convert the normal 'good luck trying to hit the link back' footnotes to nice pop-up ones.

Kobo doesn't deal well with notes for "plain" epubs, which is why I use kgoguen's kobo touch extended plugin to convert epubs to kepubs when transferring from calibre to kobo readers. The plugin has other plus, so have kepubs.

[Leonatus]

Originally Posted by fxp33

The footnote does work, but only if you use english characters.

Tested on Kobo Touch, fw. 3.0.1, and works without an issue.

Originally Posted by dassie

Wait, so the kobo recognises the link as a footnote because of using the 'footnote' class? I thought you needed epub:type="noteref" tags and such?

Pop-up footnotes seem to require Epub 3, this is supported in Kepub, but not with "normal'" epubs in Kobo.

[fxp33]

Hi Leonatus,

Originally Posted by Leonatus

Tested on Kobo Touch, fw. 3.0.1, and works without an issue.

Great.

but are you sure you get the popup window, with the two buttons and that the special characters of your note are well rendered, especially: Ä, Ö, Ü, ẞ.

On mine I would get: Ä, Ö, Ü, ẞ

Can you send the file (maybe in private message if you don't want to make it public).

Here is my test file.

Regards

François

[davidfor]

I just tried this on my Glo running 3.1.0. The pop-ups looked identical to the text in all the fonts I tried. I didn't try all, but did try Georgia, Amasis, Caeciia and Ryumin.

[Leonatus]

Originally Posted by fxp33

... but are you sure you get the popup window, with the two buttons and that the special characters of your note are well rendered, especially: Ä, Ö, Ü, ẞ.

Francois,
looking for the second time on it, the footnotes I tested accidentally have only the german "ß" as special character, but this is shown.

I had some other kind of trouble with my reader, so I didn't deepen this aspect so far. Maybe, it depends on the used fonts, as davidfor says. In fact, the text of the footnotes is nothing else but stored in a separate xml- or html-file.

[Leonatus]

I found a statement by Doitsu on a Sigil thread:
"Quote:
Originally Posted by pgfiore
Using this example, "èacquistabile" (code view), I need two arrow hits to move from "è" to "a"...

That's because the accented è character is composed of two characters:


Code:
e U+0065 LATIN SMALL LETTER ECode:
̀̀ U+300 COMBINING GRAVE ACCENTI.e. this behavior is by design, because most Unicode editors behave this way.
Most likely your display issues are caused by these and other combining characters. Try replacing them with combined characters.

For example, replace U+0065 & U+0300 with:

Code:
è U+00E8 LATIN SMALL LETTER E WITH GRAVEYou can select this an other accented characters with the Windows Character Map.

EDIT: To identify the problematic Unicode characters, visit this website, paste a paragraph with accented characters and missing spaces into the Unicode Text box, click Convert and post the results here."

This could be of interest, maybe?

[tshering]

Originally Posted by Leonatus

Maybe, it depends on the used fonts, as davidfor says.

I cannot see that davidfor says this. I take his statement as implying that he first had a certain suspicion in this direction. and did not found supporting evidence. If the problem were related to the font, one would rather expect to see squares or question marks or empty spaces.

Originally Posted by Leonatus

Most likely your display issues are caused by these and other combining characters. Try replacing them with combined characters.

How can this explain that anacreon (Aura HD, FW ?), davidfor (Glo, FW 3.1.0) and I (Touch, FW 2.6.1) see the correctly interpreted characters, whereras fxp33 (Glo, FW ?) and I (Touch, FW 3.0.1) see the underlying UTF-8 code. As an additional information: fxp33's test file contains also a Chinese character that cannot be produced by combining characters.

I myself don't have any clue what might prevent the utf8 decoding on fxp33's and my reader.Maybe it is a side-effect of some entry in the configuration file?