Prevent Superscripts and Subscripts from Affecting Line-Height

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Comments

  1. User Avatar
    rob Jones
    Permalink to comment#

    perfect!

    just saved me a tonne of work

  2. User Avatar
    royler
    Permalink to comment#

    YAY!

  3. User Avatar
    Rima
    Permalink to comment#

    Thank you so much! I tried several other options I had found and none worked. Thank you for your genius and generosity. Deep bow.

  4. User Avatar
    Tom

    Thank you!

  5. User Avatar
    Roy Tait
    Permalink to comment#

    I’d been tearing my hair out trying to do this. Thanks for sharing and for saving my remaining hair.

  6. User Avatar
    isabel
    Permalink to comment#

    Thank you very much!!!! ;)

  7. User Avatar
    Bill
    Permalink to comment#

    Thanks a tonnnnnn!!!!!!!!!!!!!!!!!!

  8. User Avatar
    Sébastien
    Permalink to comment#

    Hi,

    I knew this css hack cause it’s already in the starter theme for Drupal I’m using (omega) but when the superscript is underlined, it doesn’t work well (or maybe depends on the font used, mine was “Nunito” from google fonts).

    I’ve found a solution from a post on stackoverflow (http://stackoverflow.com/questions/16835280/superscript-underline-moves-up-with-text/20671391#20671391) but doesn’t take the text color in consideration to build the line nor place it as a regular text-decoration:underline will.

    As I needed a solution for one of my clients, I’ve made a small jQuery fix you can also try: https://github.com/webastien/superscript-fixer

    If it can save time and prevent headaches…

  9. User Avatar
    Jeff
    Permalink to comment#

    Thank you! This was exactly what I needed. I’ve added it to my new and growing CSS bag of tricks, and I noted this page in a comment so I’ll always remember where I got it — and so will anyone else I pass it along to.

    Thanks again!

  10. User Avatar
    Niamh
    Permalink to comment#

    Really helpful with additional comments below for more complex issues. Great! Thanks!

  11. User Avatar
    Valentin

    Thanks for the tip, really useful. I add that if you increase the font size too much, the line height moves again, so the solution I found is just to add

    sup {
      line-height: 0;
    }
    
  12. User Avatar
    Dave Burton
    Permalink to comment#

    Thank you, Valentin!

    I’ve been using this hack for a long time, but today I noticed that subscripts were once again (or still??) slightly affecting line spacing, in both Chrome and IE 11 (but not in Firefox). Adding your “line-height:0” fix solved it:

    p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
    sub {vertical-align:baseline; position:relative; top:0.3em; line-height:0;}

    Of course, when we do that we’re assuming there will always be other (non-subscript) text on every line, to establish the correct line spacing. But I didn’t really like that assumption, so I experimented with other line-spacing values, and I was very surprised to find that “100%” works just as well as “0”:

    p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
    sub {vertical-align:baseline; position:relative; top:0.3em; line-height:100%;}

    In fact, anything up to 147% (in Chrome version 47.0.2526.106 m) or 163% (in IE version 11.0.9600.18124 / 11.0.26) seems to work. I don’t understand why, but it does.

  13. User Avatar
    Marty
    Permalink to comment#

    I wanted a way to write out the trig functions with pi/4 or pi/3. This did the trick with modification of the sub and sup as follows:
    sub { top: 0.2em; }

    sup { right: -0.4em;}

  14. User Avatar
    Dave Burton
    Permalink to comment#
  15. User Avatar
    John Mayor

    Hi Chris!…

    What CSS trick can I invoke to have 100% CONTIGUOUS VERTICAL MONOSPACIAL ALIGNMENT of a screen’s Normal Point size within a Text Formatting Office Suite (e.g., LibreOffice), afterupon adding Superscript, Subscript, or Box elements to the Normal Point size?

    Presently… e.g., within LibreOffice… when adding the aforenoted SS/ SS or box elements to the Normal Point Size on “e-pages”, the SS/ SS or box elements create their own TABULAR JUSTIFICATION in relation to the Normal Point size; and, thereby, eliminating the CONTIGUOUS VERTICAL MONOSPACIAL ALIGNMENT of the Normal Point Size! And so!… thereby!… ending my continued use, of L/O!
    But, this problem also extends to all other Office Suites I’ve used!

    And although it’s been said that Nick Gravgaard’s Elastic Tabstops may be a solution, I’m unsure as to how this could be incorporated within L/O!… and!… if included, whether such would actually work!

    I… for my purposes!… require 100% C.V.M.A., to complement the COMPLETE “look and feel” of old-style mechanical typewriters!… and it’s the LAST HOLDOUT to the realization of a truly old-style mechanical typewriter’s aesthetic! And it would be nice to finally add this, to the current roster of old-style mechanical typewriter aesthetics software… e.g., the “bleeding” of keystrokes on one’s computer screen that some programmers have fashioned– and, weighted to the actual pressure one uses when hitting one’s PC keyboard!; the ability to go backwards, and then overtype one’s already typed text!– and with sundry glyphs!; and, software that affords the “clicking sound” of a typewriter’s keys! And hopefully, soon, all of these aesthetic features will be standard fare (though, deserving of their own “GADGET CACHE”and WIDGETS, within the Fonts Caches now found within Operating Systems)!

    Now… I know!… that the SS/ SS and box elements within old-style mechanical typewriters do not impinge on the CVMA of its Normal Point size, due to the “fixed mechanics” of these typewriters!… as both the Normal Point size and SS/ SS glyphs, are all equal! But!… arguing this misses the main point! And being, that the typewriter affords 100% CVMA for the Normal Point size, EVEN WHEN SS/ SS AND BOX ELEMENTS ARE ADDED (the latter elements… e.g…. when using the “single quote” and “underscore” symbols!)! And that, to me– at least!– is, THE “QUINTESSENTIAL DEFINITION” OF CVMA… AND, “QUINTESSENTIAL CHARACTERISTIC” OF OLD-STYLE TYPING! Simply put… PROGRAMMING FOR 100% CVMA ON A PC SCREEN, IS A LOGICAL EXTENSION OF THE CVMA FOUND, WITHIN A CLASSICAL TYPEWRITER (the differences between the fixed sizes of the SS/ SS and box glyphs within a mechanical typewriter, versus that shown on a PC screen… of whatever description!… NOTWITHSTANDING!)!
    100% CVMA ON A PC’S SCREEN– FOR ME!– IS SYNONYMOUS WITH
    OLD-STYLE MECHANICAL TYPEWRITING!… OTHERWISE, IT IS FAKE OLD-STYLE MECHANICAL TYPEWRITING! And why this issue wasn’t tackled to the ground at the very beginning of the move from old-style typewriters to Office Suites, is perplexing!… and frustrating!!

    Please!… no emails!

  16. User Avatar
    Vinfred

    Thanks you so much for the solution code !

  17. User Avatar
    Rupesh
    Permalink to comment#

    Excellent! thanks for the solution.

  18. User Avatar
    J.D.
    Permalink to comment#

    Beautiful! Thank you very much! :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag