Revised as of
8 Nov 2023
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.
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 subscribing to KD Did It, if you’d like to track this post for future updates.
| 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 … </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.… is the ASCII code for an ellipsis.</p> indicates the end of a paragraph tag.
|
Bright pink is the selector coding |
|
Blue is the property and HTML tag coding |
|
Orange is the information particular to your requirements, the value |
|
Red-violet indicates an <img> tag |
|
| Green indicates a hyperlink tag | |
| Gray indicates a comment tag | |
| Teal indicates a code tag |
C’mon, get it out of your system, bitch, whine, moan . . . which website issues are your pet peeves? Also, please note that I try to be as accurate as I can, but mistakes happen or I miss something. Email me if you find errors, so I can fix the . . . and we’ll all benefit!
Satisfy your curiosity about other Working Your Website posts in its homepage or more generally explore the index of self-editing posts. You may also want to explore Formatting Tips, Grammar Explanations, Linguistics, Publishing Tips, the Properly Punctuated, Word Confusions, and Writing Ideas and Resources.
Resources for Proper Positioning for <sub> and <sup>
Tapley, Brian. “Keep Consistent Line Spacing.” Adobe Developer Connection. n.d. Accessed n.d. <http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=5341>.
Pinterest Photo Credits:
Le nautibus – panoramio by chisloup is under the CC BY 3.0 license, via Wikimedia Commons. Tom Yum Soup is in the public domain, via RawPixel.
