Kobo notes working backwards after upload using KoboTouchExtended

[Liudprand]

I was having some problems with note cues in a particular book, which I need to be formatted as superscript.

In Calibre, they weren't superscripted, so I used Sigil to change the format of each one, using the superscript button in PageEdit.

I then opened the epub file in Calibre again, and all seemed to be well. But, after I uploaded it to my Kobo Libra 2 using Kobo Touch Extended, I soon discovered a problem. The notes now function "backwards" - i.e. the note preview, in the form of a popup, that is part of Kobo's way of handling notes (and very user-friendly) now only works when tapping the note number in the notes section. When you tap the corresponding note cue in the text, you don't get a preview - it just takes you straigh to the notes section.

This is doubly annoying: it not only deprives you of the preview where it would be useful (reading the note without having to go to the notes section of the epub), but delays your return to the main text after you've read a note by forcing you to close the preview.

It's hard - at least for me! - to know whether this behaviour originates from within Sigil or Calibre, or even Kobo Touch Extended; though the latter seems the least likely, given that it's never produced that problem with any other book I've converted with it. So, with apologies if this is the wrong place to post the question, I'd be very grateful for any pointers - specificically, how to fix the code in the epub file, and (especially) whether there's a way of doing so globally, rather than one note at a time.

[DNSB]

If you change the CSS class used for the notes in the stylesheet in the Sigil code view, does it work then? Going back to BookView, I never found Sigil worked well as a WYSIWYG editor and even with PageEdit, I don't recommend editing in WYSIWYG as you can still end up with some code oddities.

[Liudprand]

Thanks very much for this. Yes, it seems you're right about the latter.

I've already been haughtily reprimanded today by a Sigil developer on here for not basically already knowing how to solve the problem I was raising - and have since found elsewhere online lots of references to how Sigil isn't very user-friendly etc. So, with that in mind, my apologies if this seems like an ignorant question, but can I ask: What do you mean by "change the CSS class used for the notes in the stylesheet..."? I mean, I know what all of those things mean individually; I'm just not sure how I should change the code. Would you be able to point me to any simple online guide to this kind of stuff?

A sort of side-note: It seems that resources for people who want to publish their own book but aren't too familliar with coding are pretty good, if the text in question is very simple - a novel, maybe with a few displayed passages and one or two pictures. But if you need to do anything more sophisticated, involving notes and other bits of paraphernalia that scholarly books require, there's not much out there. I guess people learn what they need to do within publishing houses, but, if you're a freelance, all of the books (and there are hardly any in the last few years) that purport to teach you how to put together an epub file using CSS/HTML, "from scratch", etc., basically seem to assume you just want to format a very simple novel. Again, if you know of any general resources for more advanced, complex texts, I'd be very grateful to know.

I'd pay decent money for a good, comprehensive video course that really went into detail.

[DNSB]

Look at one of your footnotes pointers. Say it looks like <a href="FN_001.xhtml#fn1" epub:type="noteref" id="bookfn1">^[1]</a>. For this one you would look for an entry in the CSS stylesheet called sup. If the class doesn't exist, the default would be vertical-align: super and font-size: smaller. If you saw <sup class="fnstd">, you would look for an entry in the CSS stylesheet called .fnstd. It might contain code such as:

.fnstd {
  font-size: 0.75em;
  vertical-align: text-top;
}

Please note that in your message that KevinH responded to, you asked "I want to know what the exact form should be of a regular expression to find all links (including endnote markers)." while not supplying any examples of what your footnote to/from code looks like. Sorry to break the bad news but there are many ways of creating those links and you need to supply examples of what the ones that you want to modify look like.

I mean someone could have told you to use "<a href=" but even that simplistic solution breaks when the actual format is "<a class="fnlink" href=". So perhaps "<a " though that will find every link regardless of it's use.

And to be honest, I don't think that KevinH was haughty. His suggestion to move the discussion to the general ePub format and his suggestion (bolding mine) that you:

If you ask there and show a few snippets of the xhtml code you use to create a footnote marker, and a few snippets of how the footnotes are coded up, I am sure you will get some help generating a regex for Calibre, or Sigil.

is IMNSHO no more than the minimum needed to have people able to offer help. As you will realize after a while, there is no one true way to write code. You look at 6 ePubs from 6 different creators and that becomes very obvious.

[Liudprand]

Thanks for this.

I've since found a solution to this of the kind I was asking for - i.e. that doesn't involve diving into the html too much: a combination of using Sigil and Calibre, with a few small CSS tweaks in Calibre at the end.

If anyone runs into this thread and is interested in the exact solution, feel free to dm me.