subscript, superscript and line-heights

Posted . Visible to the public. Repeats.

By default subscript (<sub></sub>) and superscript (<sup></sup>) tags are styled with vertical-align: sub, respectively vertical-align: super by most browsers.
However, without adaptations, this will probably break your line-heights.

A common suggestion Show archive.org snapshot is to style those two tags accordingly:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;  /* can be adapted according to preferences */
}
sub {  
  top: 0.4em;  /* can be adapted according to preferences */
}

This works and looks good in all relevant browsers. However, it does not work in all relevant e-mail clients, because Gmail, and Outlook don't support the top-property Show archive.org snapshot (as of December 2022)

A good workaround that works in all relevant e-mail clients is to simply set the line-height to 0.

sup, sub {
  mso-line-height-rule: exactly;
  line-height: 0;
}   

Make sure to include mso-line-height-rule: exactly. Otherwise, MS Outlook will treat your line-height as a minimum Show archive.org snapshot and may increase it to its own liking.

Bruno Sedler
Last edit
Bruno Sedler
License
Source code in this card is licensed under the MIT License.
Posted by Bruno Sedler to makandra dev (2022-12-13 09:30)