How can I get superscript done, only in CSS?
I have a stylesheet where I mark the external links with a superscript character, but I'm having a hard time getting the character aligned correctly.
What I have currently, looks like this:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
but it doesn't work.
Naturally, I'd use the <sup>-tag, only if content would allow for HTML...
This question is related to
css
I was working on a page with the aim of having clearly legible text, with superscript elements NOT changing the line's top and bottom margins - with the following observations:
If for your main text you have line-height: 1.5em for example, you should reduce the line-height of your superscript text for it to appear correctly. I used line-height: 0.5em.
Also, vertical-align: super works well in most browsers but in IE8 when you have a superscript element present, the rest of that line is pushed down. So instead I used vertical-align: baseline together with a negative top and position: relative to achieve the same effect, which seems to work better across browsers.
So, to add to the "homegrown implementations":
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
If you are changing the font size, you might want to stop shrinking sizes with this rule:
sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
Related or maybe not related, using superscript as a HTML element or as a span+css in text might cause problem with localization - in localization programs.
For example let's say "3rd party software":
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
How can translators translate "rd"? They can leave it empty for several cyrrilic languages, but what about of other exotic or RTL languages?
In this case it is better to avoid using superscripts and use a full wording like "third-party software". Or, as mentioned here in other comments, adding plus signs in superscript via jQuery.
Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:
The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.
Side note: It's worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn't relate to that.
The sub/sup tags are in HTML and XHTML. I would just use those.
As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:
$(function() {
$("a.external").append("<sup>+</sup>");
};
if looks like you want "vertical-align:text-top"
http://htmldog.com/articles/superscript/ Essentially:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
Works well in practice, as far as I can tell.
The CSS documentation contains industry-standard CSS equivalent for all HTML constructs. That is: most web browsers these days do not explicitly handle SUB, SUP, B, I and so on - they (kinda sorta) are converted into SPAN elements with appropriate CSS properties, and the rendering engine only deals with that.
The page is Appendix D. Default style sheet for HTML 4
The bits you want are:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
I am not sure if this is related but I have solved my problem with ² HTML entities as I wasn't able to add any other html tags inside a <label> tag. So the idea was using ASCII codes instead of css or HTML tags.
The CSS property font-variant-position is under consideration and may eventually be the answer to this question. As of early 2017, only Firefox supports it, though.
.super {
font-variant-position: super;
}
See MDN.
Related or maybe not related, using superscript as a HTML element or as a span+css in text might cause problem with localization - in localization programs.
For example let's say "3rd party software":
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
How can translators translate "rd"? They can leave it empty for several cyrrilic languages, but what about of other exotic or RTL languages?
In this case it is better to avoid using superscripts and use a full wording like "third-party software". Or, as mentioned here in other comments, adding plus signs in superscript via jQuery.
Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:
The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.
Side note: It's worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn't relate to that.
The sub/sup tags are in HTML and XHTML. I would just use those.
As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:
$(function() {
$("a.external").append("<sup>+</sup>");
};
if looks like you want "vertical-align:text-top"
Here's the exact way sup uses:
.superscript{
vertical-align:super;
font-size:smaller;
}
Found this via google chrome inspect element.
The following is taken from Mozilla Firefox's internal html.css:
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
So, in your case it would be something, like:
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
This is another clean solution:
sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */
In this way you can still use sup/sub tags but you fixed their idious behavior to always screw up paragraph line height.
So now you can do:
<p>This is a line of text.</p>
<p>This is a line of text, <sub>with sub text.</sub></p>
<p>This is a line of text, <sup>with sup text.</sup></p>
<p>This is a line of text.</p>
And your paragraph line height should not get screwed up.
Tested on IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9
I tested using a p {line-height: 1.3;} (that is a good line height unless you want your lines to stick too close) and it still works, cause "-0.6em" is such a small amount that also with that line height the sub/sub text will fit and don't go over each other.
Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page (specifically I use the HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). So I don't know if this solution works well when browser is in quirkmode (or not standard mode) due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard/Almost Standard mode.
try
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
or plain "after"
.after {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
".a.external:after" could be simplified
or
.after {
font-size: 50%;
margin: left;
vertical-align: .7em;
}
using "font size 50%" - 50% of what size? this might not work well if not used within some tag defining text size previous to superscript...
if you use "font-size: 1em;" then the font size is set for sure, without reference to a tag that defines link text size, unless link text is set at 100% and superscript is 50% of that 100%.
Using "font-size: 1em;" actually sets font size baseline.
Set "vertical-align" size smaller, if you want superscript font to be smaller than link text
Set "vertical-align" size same as font size, if you want superscript font to be same size as link text
To align with link text, you need to set "margin" same as link text (left, center, right, justified).
.text {
font-size: 1em;
margin: left;
}
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
It should be something like below example links with superscript
<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>
or
<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>
or
<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>
or
<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>
As in...
or
Superscript in CSS only?You got this
The CSS property font-variant-position is under consideration and may eventually be the answer to this question. As of early 2017, only Firefox supports it, though.
.super {
font-variant-position: super;
}
See MDN.
I was working on a page with the aim of having clearly legible text, with superscript elements NOT changing the line's top and bottom margins - with the following observations:
If for your main text you have line-height: 1.5em for example, you should reduce the line-height of your superscript text for it to appear correctly. I used line-height: 0.5em.
Also, vertical-align: super works well in most browsers but in IE8 when you have a superscript element present, the rest of that line is pushed down. So instead I used vertical-align: baseline together with a negative top and position: relative to achieve the same effect, which seems to work better across browsers.
So, to add to the "homegrown implementations":
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
The CSS documentation contains industry-standard CSS equivalent for all HTML constructs. That is: most web browsers these days do not explicitly handle SUB, SUP, B, I and so on - they (kinda sorta) are converted into SPAN elements with appropriate CSS properties, and the rendering engine only deals with that.
The page is Appendix D. Default style sheet for HTML 4
The bits you want are:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
try
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
or plain "after"
.after {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
".a.external:after" could be simplified
or
.after {
font-size: 50%;
margin: left;
vertical-align: .7em;
}
using "font size 50%" - 50% of what size? this might not work well if not used within some tag defining text size previous to superscript...
if you use "font-size: 1em;" then the font size is set for sure, without reference to a tag that defines link text size, unless link text is set at 100% and superscript is 50% of that 100%.
Using "font-size: 1em;" actually sets font size baseline.
Set "vertical-align" size smaller, if you want superscript font to be smaller than link text
Set "vertical-align" size same as font size, if you want superscript font to be same size as link text
To align with link text, you need to set "margin" same as link text (left, center, right, justified).
.text {
font-size: 1em;
margin: left;
}
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
It should be something like below example links with superscript
<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>
or
<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>
or
<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>
or
<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>
As in...
or
Superscript in CSS only?You got this
if looks like you want "vertical-align:text-top"
http://htmldog.com/articles/superscript/ Essentially:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
Works well in practice, as far as I can tell.
The following is taken from Mozilla Firefox's internal html.css:
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
So, in your case it would be something, like:
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
I am not sure if this is related but I have solved my problem with ² HTML entities as I wasn't able to add any other html tags inside a <label> tag. So the idea was using ASCII codes instead of css or HTML tags.
http://htmldog.com/articles/superscript/ Essentially:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
Works well in practice, as far as I can tell.
If you are changing the font size, you might want to stop shrinking sizes with this rule:
sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
This is another clean solution:
sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */
In this way you can still use sup/sub tags but you fixed their idious behavior to always screw up paragraph line height.
So now you can do:
<p>This is a line of text.</p>
<p>This is a line of text, <sub>with sub text.</sub></p>
<p>This is a line of text, <sup>with sup text.</sup></p>
<p>This is a line of text.</p>
And your paragraph line height should not get screwed up.
Tested on IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9
I tested using a p {line-height: 1.3;} (that is a good line height unless you want your lines to stick too close) and it still works, cause "-0.6em" is such a small amount that also with that line height the sub/sub text will fit and don't go over each other.
Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page (specifically I use the HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). So I don't know if this solution works well when browser is in quirkmode (or not standard mode) due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard/Almost Standard mode.
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:
The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.
Side note: It's worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn't relate to that.
The sub/sup tags are in HTML and XHTML. I would just use those.
As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:
$(function() {
$("a.external").append("<sup>+</sup>");
};
if looks like you want "vertical-align:text-top"
Here's the exact way sup uses:
.superscript{
vertical-align:super;
font-size:smaller;
}
Found this via google chrome inspect element.
Source: Stackoverflow.com