Superscript that doesn't distort line spacing

[Ben Sharvy]

In order to do superscripts, for footnotes, I used the following
class:

..fnote {vertical-align: super; font-size: smaller;}

(It's always in an anchor, e.g. <a class="fnote" etc.>1</a>

...for footnote 1.)

But that creates an extra space between the line and the one above it,
which looks bad. Is there a solution?

[Andreas Prilop]

bs*****@mac.com (Ben Sharvy) wrote:

In order to do superscripts, for footnotes, I used the following
class:
.fnote {vertical-align: super; font-size: smaller;}
But that creates an extra space between the line and the one above it,
which looks bad.

I quote from the stylesheet
http://ppewww.ph.gla.ac.uk/~flavell/style.css

| /* put some air into the line-height, then scale-down the line-height
| used for sub/sup. Supposed to reduce the higgledy-piggeldy effect.
| (Suggested by Matt McIrvin - thanks! */
| p { line-height: 115%; }
| sub, sup { line-height: 0.1em; }

BTW: Do not use "font-size: smaller". Rather write "75%" or similar.

[Jonathan Snook]

> BTW: Do not use "font-size: smaller". Rather write "75%" or similar.

Why not?
--
http://www.snook.ca/

[Jukka K. Korpela]

bs*****@mac.com (Ben Sharvy) wrote:

In order to do superscripts, for footnotes, I used the following
class:

.fnote {vertical-align: super; font-size: smaller;}
The use of the keyword smaller has rather unpredictable effects in
practice.

But most importantly, superscript footnotes work poorly on the Web.
In particular, if they are links - as they naturally should be, this is
hypertext after all - it is difficult to click on them. For a
discussion of footnotes (or, rather, endnotes) on Web pages, check
http://www.cs.tut.fi/~jkorpela/www/fn.html
But that creates an extra space between the line and the one above
it, which looks bad. Is there a solution?

Well, just partial solutions. See
http://www.cs.tut.fi/~jkorpela/math/#subsup

But in this case, I would suggest that you avoid creating the problem
in the first place, and use footnote references that are normal-size
(or a little smaller) text in non-superscript position.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Kris]

In article <d1**************************@posting.google.com >,
bs*****@mac.com (Ben Sharvy) wrote:

In order to do superscripts, for footnotes, I used the following
class:

.fnote {vertical-align: super; font-size: smaller;}
That makes it very small. Can't you skip the font-size property here?

(It's always in an anchor, e.g. <a class="fnote" etc.>1</a>

..for footnote 1.)

But that creates an extra space between the line and the one above it,
which looks bad. Is there a solution?

Adjust line-height for it.

--
Kris
kr*******@xs4all.netherlands (nl)

[code flow]

Here's a way to avoid the dependency on increased line-height (i.e., line spacing):

.footnote {
    position:relative;
    font-size:85%;
    top:-0.9ex;
    margin-left:0.2em;
    margin-right:0.1em;
}
 

In the HTML, it looks like this:

[HTML]
...some text<span class="footnote" id="fnrt15">15</span></a> continuing after a superscripted footnote reference.
[/HTML]

You can see an example of this on our Web site, e.g. the article http://konsequenz.code-flow.net/html...ending-en.html
where we've also added popup footnotes/endnotes functionality (the text being taken directly from the referenced <div> at the end of the article).

A similar solution was proposed in another thread:
http://www.thescripts.com/forum/thread96021.html

Note that we prefer using "ex" rather than "em" as vertical offset unit, since it is the typographic unit referring to the height of an "x" glyph ("em" referring to the width of an "m" glyph, i.e., being more appropriate for a horizontal offset). We also finetune the spacing before and after the footnote reference using "margin-left" and "margin-right" (note the offset unit here is "em").

code flow
http://www.code-flow.net