Superscript <sup> & Subscript <sub>
Mastering mathematical powers, chemical formulas, and academic footnotes while solving the notorious browser line-height vertical alignment bug.
🎯 Learning Objectives
- Format mathematical exponents, ordinal numbers, and footnote references with
<sup>. - Format chemical molecular formulas and mathematical array indices with
<sub>. - Diagnose and permanently fix the browser
line-heightdistortion bug caused by default vertical-align styles. - Build accessible academic footnote reference links with anchor targets and
aria-describedby. - Understand the relationship between HTML markup and OpenType
font-variant-positiontypography.
📖 Mental Model: The Typographic Elevators
Imagine the baseline of text is the ground floor of a building:
<sup>(Superscript): Takes the elevator to the upper floor. It scales the glyph down and raises it above the x-height baseline (like $x^2$, $1^{\text{st}}$, or footnote $[1]$).<sub>(Subscript): Takes the elevator down to the basement. It scales the glyph down and drops it below the baseline (like the 2 in $\text{H}_2\text{O}$ or variable index $x_1$).
1. The Common Use Cases for <sup> and <sub>
| Element | Field | Example Expression | Semantic HTML Markup |
|---|---|---|---|
<sup> |
Mathematics | Pythagorean Theorem: $a^2 + b^2 = c^2$ | a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> |
<sup> |
Physics | Mass-Energy Equivalence: $E = mc^2$ | E = mc<sup>2</sup> |
<sup> |
Typography | Ordinal Numbers: 1st, 2nd, 3rd | 1<sup>st</sup>, 2<sup>nd</sup> |
<sup> |
Publishing | Footnote Citation Reference: [1] | <sup><a href="#fn1">[1]</a></sup> |
<sub> |
Chemistry | Water: $\text{H}_2\text{O}$, Carbon Dioxide: $\text{CO}_2$ | H<sub>2</sub>O, CO<sub>2</sub> |
<sub> |
Biochemistry | Glucose: $\text{C}_6\text{H}_{12}\text{O}_6$ | C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> |
<sub> |
Computer Science | Logarithm Base 2: $\log_2(n)$ | log<sub>2</sub>(n) |
2. The Infamous Line-Height Breakdown & CSS Fix
By default, browser User-Agent stylesheets apply vertical-align: super and vertical-align: sub. Because this shifts the character box outside the normal line boundary, it forces the browser to expand the line-height of that single line, resulting in uneven, jagged paragraph spacing.
Here is the standard CSS normalization used by modern frameworks (including Normalize.css and Tailwind):
/* Standard CSS Fix for <sup> and <sub> Line Height Distortion */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
3. Interactive Chemistry & Physics Laboratory
Observe the chemical reaction and algebra theorem below with clean superscript exponents and subscript molecular formulas.
🏋️ Hands-On Exercise: Formatting a Scientific Exam Question
- Format sulfuric acid
"H2SO4"into proper chemical subscripts using<sub>. - Format the algebraic polynomial
"3x3 + 5x2 - 7x + 2 = 0"using<sup>for powers. - Format the date
"October 1st"using<sup>for the ordinal indicator. - Click ▶ Run Code and verify the mathematical and scientific formatting.
⚠️ Pitfall: Screen Reader Pronunciation of Formulas
Screen readers may read H<sub>2</sub>O as "H two O" or "H subscript two O". For complex equations, consider providing an aria-label or utilizing MathML (<math>) for deep mathematical accessibility.
💡 Pro Tip: OpenType True Font Superscripts
Modern web fonts often contain specially drawn superscript glyphs with matching stroke weight. You can activate them with CSS:
sup {
font-variant-position: super; /* Uses designed OpenType glyphs if available */
}
📌 Key Takeaways
<sup>raises text above the baseline for exponents ($x^2$), ordinals (1ˢᵗ), and footnotes.<sub>lowers text below the baseline for chemical formulas ($H_2O$) and index subscripts ($x_1$).- Default browser styles cause line-height jumping; apply
line-height: 0; position: relative;to fix it. - Always link academic footnote markers to a designated
<footer>target with ID references.