superscript code

[roger64]

Hi

I was used to write this in the CSS file

sup { 
 vertical-align: text-top;
 font-size: smaller;
}

and be happy with it. For some reason, it does not seem to display so well recently(including with Calibre but not only). I had used text-top because super left too much space between lines.

What would be the reason for a faulty display of the above code?
What would be the other proposals for ePub3 books?

1. Trust the user agent? (with a "naked" sup tag)

2. When possible, use special characters such as SUPERSCRIPT TWO (\00b2)

3. With suitable font, use open-type alternates such as:
font-variant-position: super (text-top?);
font-variant-numeric: ordinal;

4. ?

[Jellby]

I like to use "line-height:0" in super-/subscripts to avoid the uneven line spacing.

[Tex2002ans]

Originally Posted by roger64

2. When possible, use special characters such as SUPERSCRIPT TWO (\00b2)

No. Never use these.

See my responses in the 2016 thread: "font with full super/under script support?"

Originally Posted by roger64

1. Trust the user agent? (with a "naked" sup tag)

Depends. What's your use case?

If it's Footnotes, then it's better to use the basic bracketed form [##] instead:

<p>This is an example.<a href="#fn1" id="ft1">[1]</a></p>

[...]

<p class="footnote"><a href="#ft1" id="fn1">[1]</a> This is the footnote.</p>

Easier to click, easier to read.

If the <sup> is for something else, then it's probably best to use it, because you still want your HTML markup to actually be meaningful.

And remember: Users can override CSS (like Moon+) + read in different ways (devices/sites without your book's CSS).

See some of that discussion in "Colored Text, EPUB, Android Dark Mode".

[JSWolf]

Originally Posted by Tex2002ans

If it's Footnotes, then it's better to use the basic bracketed form [##] instead:

<p>This is an example.<a href="#fn1" id="ft1">[1]</a></p>

[...]

<p class="footnote"><a href="#ft1" id="fn1">[1]</a> This is the footnote.</p>

Easier to click, easier to read.

That's my preferred method for footnotes.

[Hitch]

Originally Posted by Tex2002ans

No. Never use these.

See my responses in the 2016 thread: "font with full super/under script support?"



Depends. What's your use case?

If it's Footnotes, then it's better to use the basic bracketed form [##] instead:

<p>This is an example.<a href="#fn1" id="ft1">[1]</a></p>

[...]

<p class="footnote"><a href="#ft1" id="fn1">[1]</a> This is the footnote.</p>

Easier to click, easier to read.

AMEN brother. I just went through agonies with a customer. He'd created 3 different types of "notes." He had on-page footnotes (asterisms); he had end notes (numbered notes that elaborated on the content of the on-page footnotes and had author's thoughts about this or that) and then, he had source notes, sourcing the materials for each 'set' of notes.

I cannot tell you what we went through, with the eBooks. I had warned him that the superscripts were hard to tap. FIRST, he wanted them separated--so you'd have footnotes, and then end notes and then the (linked, mind you) author's notes/source notes. But no, when that came out, he didn't like it. It was too "hard" for the reader to have to click, go to the end notes list, read what he wanted and then click back. Then he agreed that the superscripted note numbers should be bracket-number-bracket, full sized. Hooray.

Then he decided that the so-called "endnotes" would be in numerical sequence, with the footnotes. So, we ended up with (you cannot make this s**t up):

[1]
2
[3]
4
5
...

with the non-bracketed so-called "end notes" smaller than the bracketed footnotes. He seemed to think that the reader was going to "infer" that they were meant to read the bracketed content, but only read the non-bracketed content when the book was finished. (Before you ask, no, there was no disclaimer, no nuthin' about this).

BUT WAIT, THERE'S MORE...

then, when he got the ePUB, and put it into KP3, he was unhappy that the bracketed notes popped up in the on-page popups, but the non-bracketed didn't. (Same identical coding, btw. No idea why some did and some didn't.)

I finally gave up. Like, 60+ emails about this topic. When he was unhappy about which notes did and didn't, popup, I sort of lost my s**t. I said "I warned you and I can't tell you what will happen until the book is actually published," (because Amazon is not forthcoming on why certain HTML works for footnotes and why some doesn't.)

Honestly. I really wish that people would just get their heads out of their asses and do normal, tappable footnotes. I read on devices *all the time* and I do not want to need a stylus, to tap a footnote. Hell, I'd say make it bold and large and bracketed, myself.

Did anybody here read that Churchill book with the DISASTROUS footnote/endnote debacle? The Kindle or ePUB version? This one: https://www.amazon.com/gp/product/B079R3VH13 Oh-em-gee, what an abortion that thing was. 1100 pages and IDK how many foot/endnotes.

Hitch

[JSWolf]

Originally Posted by Hitch

Did anybody here read that Churchill book with the DISASTROUS footnote/endnote debacle? The Kindle or ePUB version? This one: https://www.amazon.com/gp/product/B079R3VH13 Oh-em-gee, what an abortion that thing was. 1100 pages and IDK how many foot/endnotes.

Hitch

I've not read this, I've only seen a sample. How many maps does this think needs? Sheesh!

And I can now say I truly hate the new Kindle eBook preview. It's worse then God awful.

[roger64]

Thank you all for your comments.

Culprit found: line-height value

I checked the book which suffers from a faulty display of the value "text-top" with the help of the Inspector of the Calibre editor. I checked namely a sup tag.

I have found that at the above level (that is paragraph), the style definition used the value: line-height:140%;

Once removed this line-height value, the sup tag display was again correct. If one does not want to suppress this 140% value of line-height for paragraph, the most logic solution is to add a different value of line-height to the sup tag (as Jellby advised). This value will be displayed in priority due to the application of CSS rules.

Adding line-height:1; looks OK.

YMMV

[JSWolf]

Originally Posted by roger64

Thank you all for your comments.

Culprit found: line-height value

I checked the book which suffers from a faulty display of the value "text-top" with the help of the Inspector of the Calibre editor. I checked namely a sup tag.

I have found that at the above level (that is paragraph), the style definition used the value: line-height:140%;

Once removed this line-height value, the sup tag display was again correct. If one does not want to suppress this 140% value of line-height for paragraph, the most logic solution is to add a different value of line-height to the sup tag (as Jellby advised). This value will be displayed in priority due to the application of CSS rules.

Adding line-height:1; looks OK.

YMMV

You don't need a line-height of 1. You can take that out. In fact, you can take out the entire class. You don't need it. You also don't need <sup> for a footnote. You are best off with [##] (bolding it works well). You want the footnote to be large enough to be seen and pressed on.

[Tex2002ans]

Originally Posted by JSWolf

You also don't need <sup> for a footnote. You are best off with [##] (bolding it works well). You want the footnote to be large enough to be seen and pressed on.

roger64 never mentioned what he was using the <sup> for.

There are plenty of superscript things that aren't footnotes (chemical formulas, equations, etc.).

Originally Posted by JSWolf

You don't need a line-height of 1. You can take that out. In fact, you can take out the entire class. You don't need it.

No. It completely depends on the actual book's code/context.

Originally Posted by roger64

Once removed this line-height value, the sup tag display was again correct. If one does not want to suppress this 140% value of line-height for paragraph, the most logic solution is to add a different value of line-height to the sup tag (as Jellby advised).

Fantastic.

Jellby's solutions have always worked as long as I can remember.

[Tex2002ans]

Originally Posted by Hitch

He'd created 3 different types of "notes." He had on-page footnotes (asterisms); he had end notes (numbered notes that elaborated on the content of the on-page footnotes and had author's thoughts about this or that) and then, he had source notes, sourcing the materials for each 'set' of notes.

Reminds me of that absolute mother of all footnotes I worked on:

2013: "A link to jump back to the original start point?" (Post #16) + Post #19

Or everyone remembers the famous "footnoteception" thread!

2018: "Endnotes within Endnotes"

Lots of great discussion within those threads.

That book I showed had 3 sets of footnotes (Author + Editor + Translator) + absolutely massive (one took up 7 pages!).

And back in 2018, I came up with the updated "A1" + "E1" + "T1" forms, instead of having various mixes of symbols/letters/numbers.

Originally Posted by Hitch

I cannot tell you what we went through, with the eBooks. I had warned him that the superscripts were hard to tap.

What's frustrating is I read on a smaller font on my phone.

With the superscript numbers, the <sup> font is teeny tiny. Trying to click on a super skinny '1' or '*' is just impossible.

Originally Posted by Hitch

FIRST, he wanted them separated--so you'd have footnotes, and then end notes and then the (linked, mind you) author's notes/source notes.

But no, when that came out, he didn't like it. It was too "hard" for the reader to have to click, go to the end notes list, read what he wanted and then click back.

Hmmm... What would be wrong with 3 separate endnote chapters?

So at the very end of the ebook, you'd have:

• Footnotes.xhtml
• Endnotes.xhtml
• Author Notes.xhtml

or only 2, if you include footnotes at the very end of each chapter.

Originally Posted by Hitch

Then he decided that the so-called "endnotes" would be in numerical sequence, with the footnotes. So, we ended up with (you cannot make this s**t up):

[1]
2
[3]
4
5
...

W...T...F.

NO!

They'd have to be completely distinct numbering schemes.

And in the merged notes file, you could put them in chronological order.

See that Jean-Baptiste Say book I linked in the topic above. Each set of notes numbered from 1->99, and placed in the order they appear within the text.

- A1
- A2
- E1
- A3
- E2
- T1
- [...]

Originally Posted by Hitch

with the non-bracketed so-called "end notes" smaller than the bracketed footnotes. He seemed to think that the reader was going to "infer" that they were meant to read the bracketed content, but only read the non-bracketed content when the book was finished. (Before you ask, no, there was no disclaimer, no nuthin' about this).

.....................

If you're going to be doing something arcane/non-standard, you'd definitely have to explain this somewhere.

The very first footnote is a great location. For example, I believe I stuck an[*] footnote as the very first one, which broke down the A# + E# + T# system.

Originally Posted by Hitch

then, when he got the ePUB, and put it into KP3, he was unhappy that the bracketed notes popped up in the on-page popups, but the non-bracketed didn't. (Same identical coding, btw. No idea why some did and some didn't.)

Hmmm... strange, strange.

Did it work in the actual published book though?

Perhaps the firmware heuristically detects which type you're using (by looking at the first one or two), then disables the other alternates?

Originally Posted by Hitch

Did anybody here read that Churchill book with the DISASTROUS footnote/endnote debacle? The Kindle or ePUB version? This one: https://www.amazon.com/gp/product/B079R3VH13 Oh-em-gee, what an abortion that thing was. 1100 pages and IDK how many foot/endnotes.

What's the exact problems?

[roger64]

Originally Posted by JSWolf

You don't need a line-height of 1. You can take that out. In fact, you can take out the entire class. You don't need it. You also don't need <sup> for a footnote. You are best off with [##] (bolding it works well). You want the footnote to be large enough to be seen and pressed on.

I should have explained first my use case (which is generalized at least for French users). I use the sup tag for ordinals (like for XXe siècle, Ve armée) square or cubic roots (m3, km2), mathematical or chemical formulas, some titles and so on.

The sup tag can make use of its user agent (what I named a "naked" tag). However it's most frequent value for vertical-align is super which may create gaps between lines with text using a tight line-height. You can check this using the inspector of the Calibre editor.


I do not use sup tags for notes. For note anchors, I use a a tag with a class. By the way, if this anchor class uses the value text-top, you'll be advised to escort it with

line-height:1;

as for the sup tag above.

Before October 2019, I also took care to insert brackets for note anchors. After this date, for my personal use, Koreader put an end to my suffering and allowed me to use inline notes (ePub3) or pop-up notes as an option which do not require such a step. Of course, if you publish or convert a book, you may have to insert brackets, bold, color, emoticons, whatever suits better...

Since this post has been interpreted as a post dealing with notes (it's not, it's about superscript), I'll share with you an aside-unrelated-note.
[aside]

In chess, the so-called mildly ironical "French school of suffering" expression has been coined after Maxime Vachier-Lagrave's play. Though he is one of the best current chess players, he was used to start unwillingly many of its games with a defective opening and, most of the time, managed later to set up quite a resilient but long and painful defence, hence the above name. Of course, these tremendous efforts could have been avoided if he had efficiently prepared these openings to begin with...

[/aside]

[Jellby]

Just note that "line-height:1" is not the same as "line-height:0". The former may still change the line spacing, the latter shouldn't, or at least in far fewer situations.

[roger64]

Indeed.

I join an ePub where I did test this. The body has a line-height of 140%.

There are some paragraphs, one sup tag for each paragraph. You can try the display with the value line-height:1; in the CSS or suppress it, or check it with line-height:0;

There are also two kinds of spans with which you can make the same kind of experiments.

For what I've found, the most reliable display is with the value line-height:1;

I tried it with Calibre 5.17. and Koreader.

[JSWolf]

Originally Posted by roger64

I tried it with Calibre 5.18. and Koreader.

5.18 doesn't exist yet. 5.17 is the current version.

[roger64]

Yes 5.17. I corrected it at the time of your post. They crisscrossed.

Thank you for your quick report.