Pop-up footnotes in Kobo eReaders

il mietitore · 10-24-2024, 10:21 PM

I'm trying to produce an eBook where I make extensive use of footnotes.

I read a lot of threads about those, new and old, and in particular this one.

The technique to produce working footnotes seems to be well established since around ten years:

1) the <a> tag redirecting to the footnote gets the attribute epub:type="noteref";
2) the footnote itself is contained in an <aside> tag with an epub:type="footnote" attribute.

My problem is that I produced a book where these notes work as intended when read by the Kindle app, yet do not work at all when read by a Kobo Libra Colour I purchased two days ago. The links do not lead anywhere and no pop-up comes out.

Attached you can find my MWE.

Sigil indicates that this eBook is an EPUB3, and EPUB-checker confirms that it's an EPUB 3.3.

I copy here the code of the main XHTML page:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
	<title>MWE</title>
	<link type="text/css" rel="stylesheet" href="../Styles/sgc-nav.css"/>
</head>

<body>
	<p>Così come forse capita agli usignoli, uccelli poco avvezzi alla vita metropolitana ma che recentemente hanno popolato i parchi della capitale tedesca<sup class="nota_riferimento"><a epub:type="noteref" href="#note1" id="backlink1">1</a></sup>, il lettore potrebbe sentirsi un po' perso nel mondo in cui si svolge il gioco. Questo appendice offre dunque un riepilogo della storia di quegli anni, unitamente a una veloce descrizione di alcuni elementi culturali che ne <span class="corsivo">La trattativa</span> vengono citati per nome e che, in modo subliminale, contribuiscono ad arricchirne la trama.</p>

	<h1>Note</h1>
	<aside epub:type="footnote" id="note1"><p class="nota_testo"><a href="#backlink1"><sup>1</sup></a>Marta Miotto, <span class="corsivo">Berlino attrae usignoli. È raro e a studiarlo è la pronipote di Darwin</span>, Berlino Magazine, 3 luglio 2019, consultato il 17 ottobre 2024, <a class="link_esterno" href="https://berlinomagazine.com/2019-berlino-attrae-usignoli-e-raro-e-a-studiarlo-e-la-pronipote-di-darwin/">https://berlinomagazine.com/2019-berlino-attrae-usignoli-e-raro-e-a-studiarlo-e-la-pronipote-di-darwin/</a>.</p>
	</aside>

</body>
</html>

All of this seems coherent with these indications by Kobo Labs. All instructions about pop-up footnotes I found indicate that this is the way to do them.

I'm puzzled and I don't know how to proceed.

Aleron Ives · 10-24-2024, 10:50 PM

Are you using KEPUB? You can't have pop-up footnotes with regular EPUB.

il mietitore · 10-25-2024, 07:57 AM

Quote:

Originally Posted by Aleron Ives

Are you using KEPUB? You can't have pop-up footnotes with regular EPUB.

I was not, now I do and they finally work.

By chance are these KEPUBs reading only by Kobos? What if, for instance, they get downloaded on an Onyx reader? Or a Kindle? They work like normal epubs?

JSWolf · 10-25-2024, 08:07 AM

Quote:

Originally Posted by il mietitore

I was not, now I do and they finally work.

By chance are these KEPUBs reading only by Kobos? What if, for instance, they get downloaded on an Onyx reader? Or a Kindle? They work like normal epubs?

You would only have KePub on your Kobo as the KTE driver converts to KePub on the fly and leaves the ePub in calibre.

il mietitore · 10-25-2024, 08:29 AM

Quote:

Originally Posted by JSWolf

You would only have KePub on your Kobo as the KTE driver converts to KePub on the fly and leaves the ePub in calibre.

I don't understand: why is Calibre involved? I'm not using Calibre, I'm using Sigil. I converted the EPUB to KEPUB via terminal kepubify and sent it to the Kobo via Google Drive.

In the meanwhile I'm going nuts because for some reason the vast majority of my CSS commands (but not all!) get ignored, wether I translate them via kepubify or not.

j.p.s · 10-25-2024, 01:47 PM

Quote:

Originally Posted by il mietitore

I don't understand: why is Calibre involved?

JSWolf has a long history of making non sequitur posts. You just have to get used to it.

He might actually be able to help with CSS problems.

JSWolf · 10-25-2024, 02:48 PM

Quote:

Originally Posted by il mietitore

I don't understand: why is Calibre involved? I'm not using Calibre, I'm using Sigil. I converted the EPUB to KEPUB via terminal kepubify and sent it to the Kobo via Google Drive.

In the meanwhile I'm going nuts because for some reason the vast majority of my CSS commands (but not all!) get ignored, wether I translate them via kepubify or not.

Because you are creating a KePub and calibre is the most used software to do so.

JSWolf · 10-25-2024, 02:48 PM

Quote:

Originally Posted by il mietitore

I don't understand: why is Calibre involved? I'm not using Calibre, I'm using Sigil. I converted the EPUB to KEPUB via terminal kepubify and sent it to the Kobo via Google Drive.

In the meanwhile I'm going nuts because for some reason the vast majority of my CSS commands (but not all!) get ignored, wether I translate them via kepubify or not.

Can you post your CSS so we can see what may be going on?

Aleron Ives · 10-25-2024, 05:38 PM

Quote:

Originally Posted by il mietitore

By chance are these KEPUBs reading only by Kobos?

KEPUB is just EPUB with extra span tags that Kobo uses for tracking your position in the book. Other reading engines will ignore the extra spans and display the book normally, but you should probably keep the non-kepubified version for use on other platforms, just in the name of having simple code.

il mietitore · 10-25-2024, 09:54 PM

Quote:

Originally Posted by JSWolf

Can you post your CSS so we can see what may be going on?

Thank you. I spent several hours working on that and I was slowly able to get everything working, besides the small caps that apparently only work on KEPUBs. Eventually I'll open an other thread for those.

But to stay on topic: I'm now having a different issue with footnotes. After I make the conversion to KEPUBs actually EVERY LINK behaves like a footnote, and opens the popup. Which is a pain because this, besides being an essay, is ALSO a gamebook, so it's full of internal links.

Here's the code of a chapter from the EPUB. You'll see some italian words in the attributes but they all are very similar to their english counterpart so you should understand what is going on.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
	<title>La trattativa - REDUX</title>
	<link type="text/css" rel="stylesheet" href="../Styles/sgc-nav.css"/>
</head>

<body>
	<img class="illustrazione_gioco" id="prologo" src="../Images/prologo.png"/>
	<h2 class="numero_paragrafo">1</h2>

	<p class="didascalia">Lunedì 9 giugno 1975.<br/>Berlino Ovest.<br/>Ore 06:59.</p>
	<p>“Terrore nei cieli. Poche ore fa il volo Lufthansa A3119, proveniente da Seoul e diretto a Francoforte, è stato dirottato e fatto atterrare nell'aeroporto di Vientiane, in Laos. La RAF, la Rote Armee Fraktion, mediante un comunicato fatto recapitare alla sede dello <span class="corsivo">Spiegel</span>, ha rivendicato il dirottamento, chiedendo che il processo agli industr–”</p>
	<p>Il telefono squilla.</p>
	<p class="meccanica">Prendi in mano i dadi.</p>
	<p>Vai al <a class="link_interno" href="par93.html">93</a>.</p>
</body>
</html>

This is the same code after it was converted in KEPUB:

Code:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"><head>
	<title>La trattativa - REDUX</title>
	<link type="text/css" rel="stylesheet" href="../Styles/sgc-nav.css"/>
<style type="text/css" class="kobostylehacks">div#book-inner { margin-top: 0; margin-bottom: 0;}</style></head>

<body><div id="book-columns"><div id="book-inner">
	<span class="koboSpan" id="kobo.1.1"><img class="illustrazione_gioco" id="prologo" src="../Images/prologo.png"/></span>
	<h2 class="numero_paragrafo"><span class="koboSpan" id="kobo.2.1">1</span></h2>

	<p class="didascalia"><span class="koboSpan" id="kobo.3.1">Lunedì 9 giugno 1975.</span><br/><span class="koboSpan" id="kobo.3.2">Berlino Ovest.</span><br/><span class="koboSpan" id="kobo.3.3">Ore 06:59.</span></p>
	<p><span class="koboSpan" id="kobo.4.1">“Terrore nei cieli. </span><span class="koboSpan" id="kobo.4.2">Poche ore fa il volo Lufthansa A3119, proveniente da Seoul e diretto a Francoforte, è stato dirottato e fatto atterrare nell'aeroporto di Vientiane, in Laos. </span><span class="koboSpan" id="kobo.4.3">La RAF, la Rote Armee Fraktion, mediante un comunicato fatto recapitare alla sede dello </span><span class="corsivo"><span class="koboSpan" id="kobo.4.4">Spiegel</span></span><span class="koboSpan" id="kobo.4.5">, ha rivendicato il dirottamento, chiedendo che il processo agli industr–”</span></p>
	<p><span class="koboSpan" id="kobo.5.1">Il telefono squilla.</span></p>
	<p class="meccanica"><span class="koboSpan" id="kobo.6.1">Prendi in mano i dadi.</span></p>
	<p><span class="koboSpan" id="kobo.7.1">Vai al </span><a class="link_interno" href="par93.html"><span class="koboSpan" id="kobo.7.2">93</span></a><span class="koboSpan" id="kobo.7.3">.</span></p>

</div></div></body></html>

I don't see the commands that should be required for a link to produce the popup so I don't understand why it works like that.

Here's the CSS from the EPUB:

Code:

@charset "UTF-8";

@supports not (font-variant-caps: small-caps) {
  element {
    font-variant: normal;
    font-feature-settings: "smcp", "onum", "pnum";
  }
}

@supports (font-variant-caps: small-caps) {
  element {
    font-variant: normal;
    font-variant-caps: small-caps;
  }
}

@font-face {
	font-family: "Dicier";
	font-style: normal;
	font-weight: normal;
	src: url(../Fonts/Dicier-Flat-Light.otf);
}

body {
	text-align: justify;
}

nav#landmarks {
    display: none;
}

nav#page-list {
    display: none;
}

ol {
    list-style-type: none;
}

/* INTESTAZIONI */

h1 {
}

h2 {
}

h3 {
}

.numero_paragrafo {
	text-align: center;
}

/* TESTO */

p {
}

a {
}

blockquote {
	font-style: italic;
}

table {
	width: 100%;
	border: 1px solid;
	border-collapse: collapse;
}

td {
	padding: 10px;
}

.link_interno {
	font-weight: bold;
	text-decoration: none;
}

.link_esterno {
}

.corsivo {
	font-style: italic;
}

.grassetto {
	font-weight: bold;
}

.didascalia {
	font-style: italic;
	text-align: center;
}

.meccanica {
	font-variant: small-caps;
}

.fine {
	margin-top: 35px;
	font-style: italic;
	text-align: center;
}

.nota_riferimento {
}

.nota_testo {
	text-align: left;
	font-size: small;
}

.dadino {
	font-family: "Dicier";
}

#ispirazioni {
	margin-top: 10px;
}

/* IMMAGINI */

img {
}

.illustrazione_gioco {
	width: 100%;
	margin-top: 35px;
}

.illustrazione_saggio {
	width: 100%;
}

#rafBN {
	float: right;
	width: 40%;
	margin: 5px;
}

I don't see differences from the CSS of the KEPUB:

Code:

@charset "UTF-8";

@supports not (font-variant-caps: small-caps) {
  element {
    font-variant: normal;
    font-feature-settings: "smcp", "onum", "pnum";
  }
}

@supports (font-variant-caps: small-caps) {
  element {
    font-variant: normal;
    font-variant-caps: small-caps;
  }
}

@font-face {
	font-family: "Dicier";
	font-style: normal;
	font-weight: normal;
	src: url(../Fonts/Dicier-Flat-Light.otf);
}

body {
	text-align: justify;
}

nav#landmarks {
    display: none;
}

nav#page-list {
    display: none;
}

ol {
    list-style-type: none;
}

/* INTESTAZIONI */

h1 {
}

h2 {
}

h3 {
}

.numero_paragrafo {
	text-align: center;
}

/* TESTO */

p {
}

a {
}

blockquote {
	font-style: italic;
}

table {
	width: 100%;
	border: 1px solid;
	border-collapse: collapse;
}

td {
	padding: 10px;
}

.link_interno {
	font-weight: bold;
	text-decoration: none;
}

.link_esterno {
}

.corsivo {
	font-style: italic;
}

.grassetto {
	font-weight: bold;
}

.didascalia {
	font-style: italic;
	text-align: center;
}

.meccanica {
	font-variant: small-caps;
}

.fine {
	margin-top: 35px;
	font-style: italic;
	text-align: center;
}

.nota_riferimento {
}

.nota_testo {
	text-align: left;
	font-size: small;
}

.dadino {
	font-family: "Dicier";
}

#ispirazioni {
	margin-top: 10px;
}

/* IMMAGINI */

img {
}

.illustrazione_gioco {
	width: 100%;
	margin-top: 35px;
}

.illustrazione_saggio {
	width: 100%;
}

#rafBN {
	float: right;
	width: 40%;
	margin: 5px;
}

il mietitore · 10-27-2024, 02:45 PM

After further investigations I discovered that I must be incurring in what is described here:

Warning: Hyperlinked content not using the epub:type attribute footnote or endnote will display as a pop-up on Kobo's iOS and eInk platforms in cases where all the following criteria are met.

The link references a location in the EPUB and also references a specific node within the HTML. Ex.
Code:
```
<a href="chapter.html#uniqueID">link text</a>
```
Where chapter.html is a file within this EPUB and where uniqueID is the id of a node within that html document.
The content in the node is nine characters or more once stripped of the HTML tags. Ex.
Code:
```
123456789
```
The node being linked to is less than or equal to 5000 characters.
The location being linked to comes after the location being linked from. Ex. A reference in Chapter 2 links to a location at the end of the file titled Endnotes or a reference at the beginning of Chapter 2 links to a location at the end of Chapter 2.

Actually that is not correct: this happens to me also with backlinks going back from the same chapter and to links that do not target a specific ID. It's very, very annoying to be stuck with this situation. I also tried to use attributes such as

Code:

epub:type="backlink"

for the backlinks but this doesn't change the behaviour of the kobo.

The only solution I see is to revert to a normal EPUB ad to place every note in a specific chapter. Though, with normal EPUBs, I'm currently unable to use small caps.

il mietitore · 10-31-2024, 09:48 AM

In the end, after a few days of experiments, this was my final solution:

- reverting to a normal EPUB;
- eliminating all epub:type attributes;
- placing all the notes at the end of a document in a section by themselves;
- preceding every note by their number, like in a normal essay;
- placing a link to the specific note on every number;
- placing a backlink to the number on every note number (basically the two numbers link themselves to each other).

Concerning the small caps, I simulated them by writing all that I needed in caps and reducing the size of the letters after the first one to small. Frankly it looks much better than whatever the kobo was producing with the correct CSS.

The funny thing is that both the kindle app and the actual kindle ereader still understand, somehow, that those are notes, so if the user clicks on the note number they open as popups, and this doesn't happen with the backlinks. The kobo, on the contrary, doesn't open any of these links as popups, but it's fine, everything's still perfectly comprehensible, and frankly it even looks better.

It's a small step (backwards) for the EPUB standard, but it's a giant leap for my document.

10-27-2024, 02:45 PM	#11
il mietitore Member Posts: 11 Karma: 10 Join Date: Sep 2021 Device: none	After further investigations I discovered that I must be incurring in what is described here: Warning: Hyperlinked content not using the epub:type attribute footnote or endnote will display as a pop-up on Kobo's iOS and eInk platforms in cases where all the following criteria are met. The link references a location in the EPUB and also references a specific node within the HTML. Ex. Code: <a href="chapter.html#uniqueID">link text</a> Where chapter.html is a file within this EPUB and where uniqueID is the id of a node within that html document. The content in the node is nine characters or more once stripped of the HTML tags. Ex. Code: <p id="uniqueID">123456789</p> The node being linked to is less than or equal to 5000 characters. The location being linked to comes after the location being linked from. Ex. A reference in Chapter 2 links to a location at the end of the file titled Endnotes or a reference at the beginning of Chapter 2 links to a location at the end of Chapter 2. Actually that is not correct: this happens to me also with backlinks going back from the same chapter and to links that do not target a specific ID. It's very, very annoying to be stuck with this situation. I also tried to use attributes such as Code: epub:type="backlink" for the backlinks but this doesn't change the behaviour of the kobo. The only solution I see is to revert to a normal EPUB ad to place every note in a specific chapter. Though, with normal EPUBs, I'm currently unable to use small caps.

10-31-2024, 09:48 AM	#12
il mietitore Member Posts: 11 Karma: 10 Join Date: Sep 2021 Device: none	In the end, after a few days of experiments, this was my final solution: - reverting to a normal EPUB; - eliminating all epub:type attributes; - placing all the notes at the end of a document in a section by themselves; - preceding every note by their number, like in a normal essay; - placing a link to the specific note on every <sup> number; - placing a backlink to the <sup> number on every note number (basically the two <sup> numbers link themselves to each other). Concerning the small caps, I simulated them by writing all that I needed in caps and reducing the size of the letters after the first one to small. Frankly it looks much better than whatever the kobo was producing with the correct CSS. The funny thing is that both the kindle app and the actual kindle ereader still understand, somehow, that those are notes, so if the user clicks on the note number they open as popups, and this doesn't happen with the backlinks. The kobo, on the contrary, doesn't open any of these links as popups, but it's fine, everything's still perfectly comprehensible, and frankly it even looks better. It's a small step (backwards) for the EPUB standard, but it's a giant leap for my document.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Footnotes no longer pop up	paperback	Editor	2	02-03-2023 06:33 AM
I have a DOCX with footnotes that I wanna turn to pop-up notes in ePub on Kobo Forma	droopy	ePub	38	05-08-2020 05:46 PM
Pop-Up Footnotes, Asides, and Compatibility	Rand Brittain	ePub	2	05-06-2018 04:00 PM
Pop-up footnotes	Leonatus	Kobo Reader	41	01-13-2017 08:06 PM

10-24-2024, 10:50 PM	#2
Aleron Ives Wizard Posts: 1,457 Karma: 16297054 Join Date: Sep 2022 Device: Kobo Libra 2	Are you using KEPUB? You can't have pop-up footnotes with regular EPUB.