These elements do not impart much visual style by default. Barring some novel layout, just watch your
line-height. Note that screen readers will not announce by default that something is sub- or super-scripted. If you need that to be conveyed, lean on techniques I showed in the first week, which I replicate here strictly for the superscript.
The vertical position can matter and the styles should reflect that.
At Ascender Line
For ordinals (42nd), fractions (2/3) and abbreviations (a/c for account of). They get a default browser style of
Above Ascender Line
Generally used for footnotes (thisA), exponents (E=mc2), particle charges (μ+) and isotopes (238U). They should get the style
vertical-align: text-top, but that is generally not how you will see them on the web. It will also require some more leading (
As with superscript, the vertical position can matter.
These are somewhat rare, generally limited to fractions (1/2) and abbreviations (c/o for care of). Make sure they have
This is the typical use of subscript text, and receives a default browser style of
vertical-align: sub. I’ll use an old joke to demonstrate this one: Johnny was a chemist’s son, but Johnny is no more. For what he thought was H2O was H2SO4.
There are cases where you need to have superscript and subscript on top of one another. I am not a chemist and I do not know the best order in which to code these, but visually this is an example where you will need a custom style: 146C2+8
You can read more about when to use which alignment on which piece of content at Wikipedia.
<ins>(my week 1 challenge entry)
- HTML 5.2: 4.13 Common idioms without dedicated elements: Footnotes
- Subscript and superscript at Wikipedia
- This pen is for the May 2018 week 3 CodePen challenge, HTML Buddies.
- You can see a wrap-up of week 3 on the CodePen blog.
- See all four of my pens for this challenge at my site with additional context.