superscript, without shifting the line of text

  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

have you removed the padding and margins of the superscript part?
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

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
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay now I see what's happening ... I am still looking at a way to remove the space ... Nothing yet ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

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
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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

my reference: http://tntluoma.com/sidebars/codes/
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

What about: http://www.xs4all.nl/~sbpoley/webmatters/superscripts.html
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

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

Code: [ Select ]
&reg;
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

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
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

how about a negative padding/margin?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Negative padding would probably make the superscripted text overlay the above line; then again, it would serve its purpose :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

:lol: Yes, quite possibly
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I actually tried that ... but that just moves the superscript letter up or down and not the rest of the sentence, but if you know exactly where the sentence will start and end you can put that whole line in a span with some negative margin ... ??
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Is this a cheat?

Image

...messing with the line-height seems like a good method.


ps. I've had a bit of eye strain recently so maybe this doesn't look as neat to you guys as it does to me right now.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Why are directions registered trademarks?
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

LOL. Must have been some kind of Freudian slip as it was unintentional.

Maybe I'm lost and need to find myself...?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Eh whatever works.
  • savil76
  • Born
  • Born
  • savil76
  • Posts: 1

Post 3+ Months Ago

I got my Subscript and Superscript fonts from:
http://www.subscriptfont.com
They work perfect with dynamic fields too...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Too bad that's totally useless unless your audience has the font installed.

Granted it could be useful for design - but if you don't know how to design sub/sup in a design program you're probably over reaching already.

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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.