Superscript Fix

I have done some research and did 2 tests on “Superscript fix in html”. The first test is following a solution posted on Wikipedia by Mzajac. That code solves line-height problems in Safari and Opera browsers, but still leaves a problem on IE6. To solve the IE6 problem, I did another test. The result looks pretty good and works on Safari/FireFox/IE6/Opera, but the font-size looks a little different cross browser.

If you have other useful tips on this topic, please add them to the comment.

Original code: only <sup> tag without style

Here, I use only <sup> without any additional style.
Result: All superscripts are too big and pushing down the text line-height (increasing the line space). It happens in all browsers, including both FireFox and IE6.

Test #1:

Code from Wikipedia by Mzajac.

* keep superscript and subscript text from breaking the line-spacing */
#bodyContent sup {
    font-size: smaller;
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
}
#bodyContent sub {
    font-size: smaller;
    vertical-align: baseline;
    position: relative;
    bottom: -0.25em;
}

 

I followed this code and made an inline version:
<sup style="font-size:50%;vertical-align:top; line-height:normal;">

Result: The line-height problem is fixed, but font-size is still big, especially in IE6.

Test #2:

With an inline style <sup style="font-size:50%; vertical-align:top; line-height:normal;">
Result: Good

With an inline style <sup style="font-size:7px; vertical-align:top; line-height:normal;">
Result: font-size became too small to read on IE6.

With an inline style <sup style="font-size:8px; vertical-align:top; line-height:normal;">
Result: Good

Conclusion:
Use <sup style="font-size:50%; vertical-align:top; line-height:normal;"> for best results.

If 50% font-size makes the superscript smaller than 8px, change font-size:50% to font-size:8px (so the text is still readable). The complete code is now <sup style="font-size:8px; vertical-align:top; line-height:normal;">.



Comments are closed.