BYOWebsite and Formatting: Proper Positioning for <sub> and <sup>

Posted June 4, 2012 by Kathy Davie in Author Resources, Building Your Own Website, Formatting Tips, Publishing

In this post on Building Your Own Website, I was working on a tech document for a web page and ran into a superscript problem. Merely applying the <sup> tag didn’t place the register mark, ®, where I wanted it and a blog post by Brian Tapley over at the Adobe Developer Connection had a sweet fix.

Definition

Superscript and subscript are smaller numbers that are set higher or lower on the line and in a smaller font than is used in the text.

Subscripts and Superscripts are Used For…

Superscripts are most commonly used for footnotes, bibliographic references, and legal rights marks — copyright ©, service , register ®, and trademark — with more restricted uses to indicate the mass number of isotopes and mathematical exponents among others. They are set high up form the text baseline and are generally smaller in size than the body text.

Subscripts are useful to indicate the number of atoms in an element or for the base for a number system. They’re set low and also smaller in size.

The “Science” of Super- & Subscripts

The coding is easy. CSS uses sub for subscript and sup for superscript. The HTML start and end tags are <sub></sub> and <sup></sup>.

Using <sup> and <sub> can throw off the linespacing, forcing the line on which you have placed a super- or subscript to push the line above or below further away to accommodate the marker. By including position as part of your CSS, you can present the appearance of the sup or sub without screwing up the linespacing.

The initial group coding, the sup,sub {, zeroes out the vertical-align much like we do when first setting up a CSS stylesheet. In general, maintain the 1ex for the superscript; the x-height for the subscript is more flexible and strictly dependent upon the original line-height — generally 1.5em. The individual coding then sets the distance from the x-height 1. Be sure to use the ex measurement, as it measures the distance for the x-height of whatever font you are using.

1 An x-height measures the distance from the baseline to the top of a lowercase letter (the a, c, x, etc.) in a particular font.

Return to top

Fun With Your Author Website is…

…an opportunity to do a bit more with your author’s website or blog and have some fun with it. All while learning something about html and CSS — the easy way, lol.

If you found this post on “Proper Positioning for <sub> and <sup>” interesting, consider tweeting it to your friends. Subscribe to KD Did It, if you’d like to track this post for future updates.

Return to top

Appearance

1 An x-height measures…

CSS Code Analysis HTML Code Analysis
sup,sub {
height: 0;
vertical-align:
baseline;
_vertical-align: bottom;
/* underscore hack for IE 6 and below */
position: relative;
font-size:70%;
}
sup {
bottom: 1ex;}

sub {top: 0.5ex;}

sup,sub is code for superscript and subscript
{ starts the element tag.
height can be interpreted by different browsers, um, differently. By setting height to “0”, it overrules these browsers and forces them to use line-height.
0 indicates that the height is zero.
vertical-align tells the browser where to place text vertically. The options include top, middle, and bottom.
baseline aligns <sup> and <sub> with the baseline of the paragraph tag, <p>.
_vertical-align uses an underscore hack, the “_”. Internet Explorer tries really hard to read code and the underscore makes it think it really needs to pay attention. Other browsers simply ignore the underscore; it acts as a comment for them.
bottom treats the marker as text, kind of like text-bottom although it will align with any other markers on that line no matter what the font-size is.
/*…*/ is a comment tag. This particular one reminds me to keep this bit of code to counteract issues with Internet Explorer 6 and below.
position tells the browser that there is a particular place where you want to position this element.
relative tells the browser that you want the element to position itself based on where other elements are located and how much space those elements are taking up.
font-size tells the browser to change the size of the font.
70% tells the browser to make the font this much smaller than the usual.

} ends the element tag.
sup tells the browser this is a superscript.
{ starts the element tag.
bottom tells the browser to measure from the bottom edge of the paragraph’s line-height.
1ex pushes the marker a full x-height from the bottom.
sub { applies a property and value strictly to the subscript.
top tells the browser to measure from the top edge of the paragraph’s line-height.
0.5ex pushes the marker half of an x-height from the top.
<p>
<sup>
1
</sup>

An x-height measures
&#8230;
</p>
<p> indicates the start of a paragraph tag and references the “p” in the CSS stylesheet.
<sup> indicates the start of the superscript.
1 is the marker I am using for my superscript.
</sup> indicates the end of the superscript.

An x-height measures is the text I have added.
&#8230; is the ASCII code for an ellipsis.
</p> indicates the end of a paragraph tag.

Return to top

If you found this post useful, I would appreciate your passing it on to others whom you think would find it handy by tweeting it.

Legend:

  Bright pink is the selector coding
  Blue is the property and HTML tag coding
  Orange is the information particular to your requirements, the value
  Green indicates a hyperlink tag
  Gray indicates a comment tag

Return to top

The above post is an example of the style, formatting, and detail of the help available on the Building Your Own Website portion of the forthcoming Author Resources subscription site by KD Did It.


Leave a Reply