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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)