Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 09:26 PM
Ben Sharvy
Guest
 
Posts: n/a
Default 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?
  #2  
Old July 20th, 2005, 09:26 PM
Andreas Prilop
Guest
 
Posts: n/a
Default Re: Superscript that doesn't distort line spacing

bsharvy@mac.com (Ben Sharvy) wrote:
[color=blue]
> 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.[/color]

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.
  #3  
Old July 20th, 2005, 09:26 PM
Jonathan Snook
Guest
 
Posts: n/a
Default Re: Superscript that doesn't distort line spacing

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

Why not?


--
http://www.snook.ca/


  #4  
Old July 20th, 2005, 09:26 PM
Jukka K. Korpela
Guest
 
Posts: n/a
Default Re: Superscript that doesn't distort line spacing

bsharvy@mac.com (Ben Sharvy) wrote:
[color=blue]
> In order to do superscripts, for footnotes, I used the following
> class:
>
> .fnote {vertical-align: super; font-size: smaller;}[/color]

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
[color=blue]
> But that creates an extra space between the line and the one above
> it, which looks bad. Is there a solution?[/color]

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/
  #5  
Old July 20th, 2005, 09:27 PM
Kris
Guest
 
Posts: n/a
Default Re: Superscript that doesn't distort line spacing

In article <d196ca8d.0309301306.2f58ee59@posting.google.com >,
bsharvy@mac.com (Ben Sharvy) wrote:
[color=blue]
> In order to do superscripts, for footnotes, I used the following
> class:
>
> .fnote {vertical-align: super; font-size: smaller;}[/color]

That makes it very small. Can't you skip the font-size property here?
[color=blue]
>
> (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?[/color]

Adjust line-height for it.

--
Kris
kristiaan@xs4all.netherlands (nl)
  #6  
Old June 26th, 2006, 10:55 PM
Newbie
 
Join Date: Jun 2006
Posts: 1
Default

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
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles