Skip to content

Footnote call doesn’t work outside iBooks, is it normal?

JayPanoz edited this page Mar 12, 2016 · 1 revision

Yep, this is normal as the output markup was designed for iBooks. Making it work would either require a change at the output level or a manual edit on your side afterwards.

If you want to do it yourself, here’s the HTML + CSS to use:

HTML

Footnote call

<p id="fnreturn-0001">Some text<a class="call" epub:type="noteref" href="#footnote-0001">(1)</a></p>

Footnote
<aside class="footnotes" epub:type="footnotes">
<p class="footnote">(1) <span class="inline-iBooks" epub:type="footnote" id="footnote-0001">Footnote</span>&#160;<a class="callback" href="#fnreturn-0001">↵</a></p>
</aside>

CSS

.footnotes {
    margin: 3em 0 0 5%;
}
.footnote {
    text-indent: 0;
    font-size: 0.875em;
    line-height: 1.7142857143;
}
.inline-iBooks {
    display: inline;
}
.call {
    color: inherit;
    -webkit-text-fill-color: inherit;
    text-decoration: none !important;
    border: none !important;
    font-weight: normal;
}
.callback {
    font-family: Symbol, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none !important;
    border: none !important;
}

To clarify:

  • we’re not using a <sup> for the footnote call as we need a target “tappable” enough on RMSDK-powered devices/apps (eInk readers for instance), hence the number between ( and ) to make it bigger.
  • we need to link the call and the footnote (using id, href and the callback);
  • because the footnote is not in a aside with the epub:type inflection, iBooks will display this footnote at the end of the XHTML document—you may want to add a horizontal rule before, as in print books.

On the one hand, if you’re publishing in the iBookStore only, changing the markup is your call. You’d probably be better off with Ulysses’ default output.

On the other hand, if you want to publish anywhere else, you’ve got no choice. Footnotes’ UX will be abysmal as they won’t work properly. Then some readers will say that you don’t know shit because you can’t hyperlink. Finally you’ll get a bad rap and it’s game over.