superscript, without shifting the line of text

  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 27, 2006
  • Posts: 47
  • Loc: Canada
  • Status: Offline

Post April 7th, 2008, 12:24 am

Any way to integrate a superscript without having it "shift" vertically to compensate? It looks rather ugly if you have a superscripted character in the middle of a sentence, that is in the middle of a paragraph. Looks something like this:

-------------------------
-------------------------
-------------------------

---------------^---------
-------------------------
-------------------------
-------------------------

Where - is a "normal" character, and ^ is a superscripted character.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 7th, 2008, 12:24 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 7th, 2008, 1:34 am

have you removed the padding and margins of the superscript part?
Let's leave all our *plum* where it is and go live in the jungle ...
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 27, 2006
  • Posts: 47
  • Loc: Canada
  • Status: Offline

Post April 7th, 2008, 2:24 am

Yes:

Code: [ Select ]
span.sup {
    font-size: 9px;
    padding: 0px;
    margin: 0px;
    vertical-align: super;
}
  1. span.sup {
  2.     font-size: 9px;
  3.     padding: 0px;
  4.     margin: 0px;
  5.     vertical-align: super;
  6. }
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 7th, 2008, 2:54 am

okay now I see what's happening ... I am still looking at a way to remove the space ... Nothing yet ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 3:30 am

If you are just using some very common superscript characters you can try using the html character entity references - they never shift line spacing.
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 27, 2006
  • Posts: 47
  • Loc: Canada
  • Status: Offline

Post April 7th, 2008, 4:16 am

Zwirko wrote:
If you are just using some very common superscript characters you can try using the html character entity references - they never shift line spacing.

Um, you mean go?:

Code: [ Select ]
<sup>bla</sup>


Because I tried it and it still shifts.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 4:28 am

Nope. For example, if you wanted a supercript 2 you would just write the entitiy reference ² - as in "squared". The same for the "cube" 3 - ³. If your superscript text is any more complicated than that, then this technique is no good.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 7th, 2008, 4:30 am

no ... like this
Code: [ Select ]
the following number is squared 12&sup2;

my reference: http://tntluoma.com/sidebars/codes/
Let's leave all our *plum* where it is and go live in the jungle ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 4:33 am

Both are fine. I use a superscript 2 on very nearly every page of my site. I've never had an issue with line-height doing it this way as opposed to <sup>2</sup>.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 4:35 am

What about: http://www.xs4all.nl/~sbpoley/webmatters/superscripts.html
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 27, 2006
  • Posts: 47
  • Loc: Canada
  • Status: Offline

Post April 7th, 2008, 4:43 am

None of those work, since I'm superscripting the registered sign.

Code: [ Select ]
&reg;
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 4:55 am

Ok.

What about wrapping the registered sign in <sup>'s, like so: <sup>&reg;</sup> and making the font-size of sup elements in your css a little smaller than the font-size of the other text. I've just done this as a test and it seems to work well.
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 27, 2006
  • Posts: 47
  • Loc: Canada
  • Status: Offline

Post April 7th, 2008, 6:17 am

I'm doing:

Code: [ Select ]
<span class=sup>&reg;</span>


The sup class has a font size of 9, while the text around it has font size of 11. It minimizes the effect, but it's still there. I'd even go font size 8, but the registered symbol becomes very small, fuzzy, and unreadable.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post April 7th, 2008, 7:20 am

Yeah, it gets too blurry.

I had a font-size: 0.80 em on the text and 0.78 em on the superscript and could hardly see any difference in the line spacing - it was still there a little bit though (I don't think anyone would notice unless they really studied it). Any lower on the font size and the spacing issue was gone but the symbol too messy.

You've probably got it about as best as you are going to get it. Try asking a friend if they notice anything odd with the text - it may not be as obvious to them since they don't know what they are looking for.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post April 8th, 2008, 7:59 pm

how about a negative padding/margin?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 8th, 2008, 7:59 pm

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.