Read more

subscript, superscript and line-heights

Bruno Sedler
December 13, 2022Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Bruno Sedler to makandra dev (2022-12-13 10:30)