Superscript issues

[carlsbad]

Hello,

Newbie question. We are converting an Indesign book to epub. Mostly it is going fine. We ran into an issue with superscripts.

They are riding above the font which when that occurs makes our line spacing larger for just that line.

What is the best solution? I thought about increasing our line spacing as a last resort. There must be a better way...?

Mark

[mrmikel]

I use the following in the stylesheet:


sup {
font-size: 0.6em;
vertical-align: top;
letter-spacing: 1px;
font-weight: bold;
}

BUT this sort of superscript has issues. One is the layout one which you have encountered. Another is that this sort of small script is hard to click upon if you intend it to be a link to a footnote or endnote, if you are using a tablet/phone. It is hard to see if the user has set a smaller font size. In this case, the older the better, as my PRS-300 will jump easily and precisely to these links one after another.

[1] is an unbeautiful way to solve the practical problem of being big enough to click on.

If you intend it to be exactly like the printed book, you better abandon all hope. All it takes is a user, perhaps a limited vision person, pushing the size button to destroy your beautiful layout.

You might export what you have done to your Nook and see what you get with a real device.

[Hitch]

Originally Posted by mrmikel

I use the following in the stylesheet:


sup {
font-size: 0.6em;
vertical-align: top;
letter-spacing: 1px;
font-weight: bold;
}

BUT this sort of superscript has issues. One is the layout one which you have encountered. Another is that this sort of small script is hard to click upon if you intend it to be a link to a footnote or endnote, if you are using a tablet/phone. It is hard to see if the user has set a smaller font size. In this case, the older the better, as my PRS-300 will jump easily and precisely to these links one after another.

[1] is an unbeautiful way to solve the practical problem of being big enough to click on.

If you intend it to be exactly like the printed book, you better abandon all hope. All it takes is a user, perhaps a limited vision person, pushing the size button to destroy your beautiful layout.

You might export what you have done to your Nook and see what you get with a real device.

Not to mention, vertical-align is not widely supported.

Hitch

[Jellby]

Just adding "line-height: 0;" should be enough to avoid the increased line spacing (but it could cause overlaps, depending on the font and line spacing).