View Full Version : Moving endnotes/footnotes


alexul
08-10-2012, 05:15 AM
Hello,
I have a book with a lot of footnotes. Actually the printed version has footnotes, around 4-5 each page. But on the epub, these footnotes have all been moved together as endnotes, there is a whole chapter with them at the end of the book. It is almost impossible to read, because although they are as hyperlinks and I can "click" them it takes a while to navigate there and then I have to navigate back.
I would like to know if there is a script or something automatic to get all those notes and insert them somewhere more closely to where they are used; even if I have to place the text inline is better than the dead time I have now with all this navigation.
Thank you for any suggestion you may have.

mrmikel
08-10-2012, 06:57 AM
As far as I know there is nothing automatic to do the job, because it is hard to know where close is. I suppose something could be written with one of the powerful text editors after you insert markers.

I often put the footnotes immediately following the paragraph they refer to because that way they have chance of appearing on the same page. Fine if the footnote is small, not great at all if the footnote in the original book flowed off the page and took up half of the following one. I do shrink the footnote text to 90% font size so it is possible to skip over it visually. You could make them italicized, but there is often italicized text in them already for the book name referred to.

It is all a lot of work.

JSWolf
08-10-2012, 09:02 PM
If you move the endnotes closer to the text, you eventually come to the page that has the endnotes and have to skip past. Putting them at the end is the best way to do it.

AlexBell
08-11-2012, 03:04 AM
If you move the endnotes closer to the text, you eventually come to the page that has the endnotes and have to skip past. Putting them at the end is the best way to do it.

I agree with JSWolf, and wonder what kind and quality of ebook you have if navigation takes so long that it is inconvenient. It only takes a second or so in a properly designed ebook.

mrmikel
08-11-2012, 06:03 AM
But it doesn't take just a second to create the links back and forth if your reader doesn't have a back button like my little Sony. Sigh.

alexul
08-11-2012, 09:50 AM
The book is almost 2000 "virtual" pages on my reader, 3600 in Calibre so it might add some extra time this huge size. Also the reader is with a touchscreen so when touching a link sometimes instead of navigating it goes forward or bakwards, depending on link position on screen. After I finished reading the note, I have to tap once to open main menu, once to open navigation menu then once again to go back and wait. So the whole process is not very comfortable.
I am thinking of editing the file and moving the notes at the end of every chapter. There are around 30-40 notes each and maybe create an entry in the table of contents so when I encounter one I go directly to that chaper and back.

JSWolf
08-11-2012, 11:26 AM
But it doesn't take just a second to create the links back and forth if your reader doesn't have a back button like my little Sony. Sigh.

All Sony Readers have a back function. Some call it history back. Same difference.

JSWolf
08-11-2012, 11:31 AM
The book is almost 2000 "virtual" pages on my reader, 3600 in Calibre so it might add some extra time this huge size. Also the reader is with a touchscreen so when touching a link sometimes instead of navigating it goes forward or backwards, depending on link position on screen. After I finished reading the note, I have to tap once to open main menu, once to open navigation menu then once again to go back and wait. So the whole process is not very comfortable.
I am thinking of editing the file and moving the notes at the end of every chapter. There are around 30-40 notes each and maybe create an entry in the table of contents so when I encounter one I go directly to that chapter and back.

You still have the same touch screen link to go to the endnote be they at the end of the chapter or properly at the end of the book. And one you get done with the chapter, you will have to flip 30-40 pages to get past the endnotes as to do it correctly, each endnote should display on it's own page so you don't see the others at the same time. What you are proposing is going to make it a really annoying book to read and one that I would be cursing you for for having made it such an annoyance.

ink-sniffer
08-11-2012, 12:30 PM
It would be amazing if footnote text could "hide" between the lines where the linked reference number is displayed and then appear directly in that position when the link is tapped. I guess this is only possible with JavaScript, which EPUB3 supports, but it will take a while until E-readers fully support that feature and I am really in doubt if I as a reader would want all sorts of scripts to mess up my reading experience.

I think the decision of putting the footnotes at the end of each chapter or the book itself relies mainly on the type of book you create and how footnotes are used. For non-fiction books where the footnotes include much additional information about the subject I'd put them at the end of the chapter, to have the reader occasionally stumble upon them and pick something up they find interesting. If the footnotes only contain information about quoted publications or things of less importance for the reader, I'd bundle them at the end of the book. Luckily, InDesign let's you make those choices by yourself and exports the Footnotes properly. You can even jump back and forth between the reference link and the link in the footnote text, so you don't need any back button.
It's all not perfect, but I think I can live with that.

mrmikel
08-11-2012, 01:00 PM
All Sony Readers have a back function. Some call it history back. Same difference.

But the back function does not take you back to where you jumped from, but to the Options page of the book with my PRS-300.

SBT
08-14-2012, 03:48 AM
I thought it was a strongly recommended practice to make part of the footnote itself a link back to the referring line?

BTW, you don't need javascript to get pop-up footnotes, you can do i t with just CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.footnote {
display:inline-block;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

div.footnote:active {width:auto;height:auto;}
div.footnote p{
font-size:0.5em;
margin:0 0.2em;
}
div.footnote p+p{ font-size:0.9em;}
</style>
</head>
<body>
<p>Sic transit gloria mundi.Click on this footnote.<div class="footnote">
<p>1</p>
<p>Isn't it fun reading through all the footnotes?</p>
</div>&nbsp;&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>

, though this won't work with EPUB2, of course.

JSWolf
08-14-2012, 12:22 PM
I thought it was a strongly recommended practice to make part of the footnote itself a link back to the referring line?

BTW, you don't need javascript to get pop-up footnotes, you can do i t with just CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.footnote {
display:inline-block;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

div.footnote:active {width:auto;height:auto;}
div.footnote p{
font-size:0.5em;
margin:0 0.2em;
}
div.footnote p+p{ font-size:0.9em;}
</style>
</head>
<body>
<p>Sic transit gloria mundi.Click on this footnote.<div class="footnote">
<p>1</p>
<p>Isn't it fun reading through all the footnotes?</p>
</div>&nbsp;&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>

, though this won't work with EPUB2, of course.

It won't work with ePub 3 either as it's invalid code.

<p>Sic transit gloria mundi.Click on this footnote.<div class="footnote">
<p>1</p>
<p>Isn't it fun reading through all the footnotes?</p>
</div>&nbsp;&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>

You cannot have a <div> inside a <p> and you have a <p> inside a <p> as well as the <div>. Basically, the code is a mess.

Doitsu
08-14-2012, 01:53 PM
@SBT: Thanks for sharing your code.

You cannot have a <div> inside a <p> and you have a <p> inside a <p> as well as the <div>.
As far as the IDPF is concerned you can, because it SBT's code passes the latest version of epubcheck without errors or warnings.

Basically, the code is a mess.
Had you actually tested the code you'd have found out that the code not only passes epubcheck, but also works with some limitations in ADE. There are some cosmetic issues, but SBT's innovative code works as a proof of concept even with ePub2s.

How about you contribute some useful code for a change instead of criticizing everybody else?

SBT
08-14-2012, 02:10 PM
Correctly, if somewhat brusquely, noted, JSWolf: Xhtml does not permit div inside p, though it did show up correctly in Chrome.
This minor modification is however considered valid by the w3c validator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p.footnote {display:inline;
margin-right:-0.1em;}
div.footnote+p.footnote { margin-left:0.5em;}
div.footnote {
display:inline-block;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

div.footnote:active {width:auto;height:auto;}
div.footnote p{
font-size:0.5em;
margin:0 0.2em;
}
div.footnote p+p{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.</p><div class="footnote">
<p>1</p>
<p>Isn't it fun reading through all the footnotes?</p>
</div><p class="footnote">
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>

Jellby
08-14-2012, 03:54 PM
You can't have a <div> inside a <p>, but nothing prevents you from turning the outer <p> into a <div>, or the inner <div> into a <span> with display:block.

JSWolf
08-14-2012, 04:07 PM
I don't think you can have a <p> inside a <div> as they are both paragraph level elements.

SBT
08-14-2012, 04:43 PM
You can't have a <div> inside a <p>, but nothing prevents you from turning the outer <p> into a <div>, or the inner <div> into a <span> with display:block.

Thanks for pointing that out, Jellby; the footnote CSS then becomes pretty similar to what I started with. The W3C validator still accepts it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
span.footnote {
display:inline;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

span.footnote:active {width:auto;height:auto;}
span.footnote span{
display:block;
font-size:0.5em;
margin:0 0.2em;
}
span.footnote span+span{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
<span>1</span>
<span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>


(Span, span, lovely span ...):p

JSWolf
08-14-2012, 09:30 PM
Thanks for pointing that out, Jellby; the footnote CSS then becomes pretty similar to what I started with. The W3C validator still accepts it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
span.footnote {
display:inline;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

span.footnote:active {width:auto;height:auto;}
span.footnote span{
display:block;
font-size:0.5em;
margin:0 0.2em;
}
span.footnote span+span{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
<span>1</span>
<span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>


(Span, span, lovely span ...):p

Time to see the code still needs fixing...

<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
<span>1</span>
<span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>

should be...

<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">1Isn't it fun reading through all the footnotes? Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>

You don't need and you don't want spans that do nothing as all they do is make the size of the XML larger and that could be an issue if it's too large. Also, those non-breaking spaces can go too. They don't actually do anything in this case.

SBT
08-15-2012, 01:51 AM
JSWolf's edits are incorrect.

The empty spans are actually <p>-surrogates (see the stylesheet), and the non-breaking spaces prevent the footnote marker from running into the next word.

Please try code in a browser or similar before asserting and correcting apparent errors.

Jellby
08-15-2012, 04:48 AM
I don't think you can have a <p> inside a <div> as they are both paragraph level elements.

Yes, you can. A <div> can contain block or inline elements. The restriction preventing block-level content applies only to <p>. I think I pasted the relevant part of the spec not long ago... here (http://www.mobileread.com/forums/showpost.php?p=2155839&postcount=7) it is.

You don't need and you don't want spans that do nothing

But they do something. They are matched by the "span.footnote span" and "span.footnote span+span" selectors.

DiapDealer
08-15-2012, 04:52 AM
JSWolf's edits are incorrect.
JS has zero tolerance for code he didn't write. I think it might actually cause him physical pain to see code that doesn't conform to his personal conventions. ;)