473,226 Members | 1,418 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Superscript that doesn't distort line spacing

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?
Jul 20 '05 #1
5 13526
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.
Jul 20 '05 #2
> BTW: Do not use "font-size: smaller". Rather write "75%" or similar.

Why not?
--
http://www.snook.ca/
Jul 20 '05 #3
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/
Jul 20 '05 #4
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)
Jul 20 '05 #5
Here's a way to avoid the dependency on increased line-height (i.e., line spacing):

Expand|Select|Wrap|Line Numbers
  1. .footnote {
  2.     position:relative;
  3.     font-size:85%;
  4.     top:-0.9ex;
  5.     margin-left:0.2em;
  6.     margin-right:0.1em;
  7. }
  8.  
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
Jun 26 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: MBS | last post by:
I am trying to pass a string from one page to another. The input string comes from a database and many times has the superscript TM trademark symbol. The querystring handles this properly because...
2
by: Steven | last post by:
Hi, I have a function which reads all lines from an array and writes them with the required tags. This works fine with IE, but not with Mozilla. On...
8
by: Paul Wake | last post by:
I have some endnotes in http://www.xmission.com/~wake/utahjuvenilelaw.html and to do so included the endnote numbers as superscript in the text of the article. The lines with endnote numbers are...
2
by: puzzled | last post by:
I am trying to use css to control the indentation within items in a list. I would like something that looks like this: Text of a paragraph goes here, leading to the following list: * list...
9
by: PinkBishop | last post by:
I have included my .css script below. This is my first attempt at CSS. The pages look fine through they eyes of PC browsers and NS on the Mac. On IE and Safari for Mac all hell breaks...
7
by: Danny | last post by:
I have a small <div> element which contains two text blocks - one within <h5> tags and the other within <p> tags. I don't want any extra line spacing between elements so use the display:inline...
4
by: metoikos | last post by:
I've scoured the web (clumsily, I'm sure) for information on the difficulties I am having, checked my markup in validators, and had a friend with more CSS clue look over it, but I haven't had any...
2
by: SergioQ | last post by:
Hi all, am trying to show a dollar figure on my webpage, but defining this for the cents value: font-size: 80%; vertical-align: super; just isn't cutting it! Is there a way to reduce the...
4
by: interr0bangr | last post by:
Hey all, Does anyone have any tips when coding superscript for email newsletters? My client uses insane amounts of superscripted characters (usually to reference the legal fine print) and I've...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.