MobileRead Forums - View Single Post - Pop-up footnotes in Kobo eReaders

il mietitore · 10-25-2024, 08: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;
}