sub
Represents subscript text for chemical formulas, mathematical notation, and variable subscripts. Uses font-variant-position for proper OpenType rendering.
Description
The <sub> element displays inline text as subscript. VB uses font-variant-position: sub for proper OpenType rendering in fonts that support it, with a fallback to reduced font-size and vertical offset for older browsers. This avoids disrupting line height.
When to Use
- Chemical formulas: H2O, CO2
- Mathematical subscripts: Variable indices like an
- Footnote numbers: Inline reference markers
When NOT to Use
- For purely visual positioning — use CSS
vertical-align: sub - For complex math — consider MathML
Examples
Chemical formulas
<p>Water: H<sub>2</sub>O</p><p>Carbon dioxide: CO<sub>2</sub></p><p>Sulfuric acid: H<sub>2</sub>SO<sub>4</sub></p>Math subscripts
<p>Fibonacci: a<sub>n</sub> = a<sub>n-1</sub> + a<sub>n-2</sub></p>CSS Reference
sub CSS (progressive enhancement)
sub { font-variant-position: sub; font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; inset-block-end: -0.25em;} /* When font-variant-position works, let it handle everything */@supports (font-variant-position: super) { sub, sup { vertical-align: inherit; font-size: inherit; position: static; inset-block-end: unset; line-height: inherit; }}The @supports block resets the manual positioning when font-variant-position is available, letting the font handle subscript rendering natively. This produces better results with OpenType fonts that have designed subscript glyphs.
Accessibility
- Screen readers may not announce subscript formatting
- For chemical formulas, the subscript is understood from context
- For complex math, consider MathML or
aria-labelon the container
Related
<sup>— Superscript (exponents, ordinals, footnotes)<var>— Mathematical variables<foot-notes>— VB's footnote web component