Beating the spread

I have a weakness for parenthetical comments. Usually they’re not in parentheses—my real penchant is for dashes—but whatever punctuation I use, I love to shoehorn extra comments into my sentences. And ever since I adapted Lukas Mathis’s popup footnote JavaScript to work here, I’ve been sticking footnotes into almost every post.

The problem with footnotes on a web site is that default behavior of the <sup> tag, which is used for the footnote marker in the body of the text, is to increase the height of the line it’s in. This pushes the line down and leaves an unattractive horizontal band of white above it. In the same way stairs are supposed to have a uniform riser height to avoid stumbles, text is supposed to have uniform line spacing to keep your eyes moving smoothly.

I knew this, but I didn’t know how to adjust my HTML or CSS to prevent the line spread. So I lived with it, always thinking I should look into getting rid of that, but never doing it. Then Ben Brooks tweeted this:

Do you use footnotes on your site? If so: in your CSS file enter:

sup {line-height:0;}

I would really appreciate it.

12:12 PM Wed Dec 7, 2011

I don’t know if this tweet was directed mainly at me, but I copied the code and added it to my site’s CSS within a day or two.

css:
#content sup, sub { 
  line-height: 0em;
}

I added the #content prefix because I wanted it applied only to this section of the blog, not to the header or sidebar (which don’t use superscripts or subscripts currently, but if they ever do, I want to see what a nonuniform line height looks like before forcing it to be uniform). I added the sub because I figured subscripts shouldn’t spread the lines, either. And I added the em because I like my numbers to have units—even zeros.

The addition worked, which surprised me a little, because I thought the CSS would have to be more than just a one-liner. But the site looked fine to me and no one complained, so I took it to be a success.1 I thanked Ben for the tip and started adding even more footnotes to my posts.

But I didn’t look at the site on my phone.

When I finally got around to doing so, I saw that the lines were fine but the footnote markers were drooping.

Lowered footnote marker

Apparently, Mobile Safari was interpreting the CSS a little differently. I didn’t want to give up the uniform line spacing, so I started Googling for solutions. There were lots. I settled on this one from Jukka Korpela:

css:
#content sup, sub { 
  vertical-align: 0ex;
  position: relative; }
#content sup { bottom: 1ex; }
#content sub { top: 0.8ex; }

First it zeroes out any “native” upward or downward alignment, then it pushes the superscripts up one ex and the subscripts down eight-tenths of an ex. The result on my computers was basically the same as before, but the result on the iPhone was much better:

Proper footnote marker position

I can’t say that Ben’s suggestion was wrong. Many of the sites I found while searching for the solution gave the same CSS he did. Maybe Mobile Safari is rendering incorrectly; maybe its something that’s implementation-dependent and Mobile Safari just chooses an interpretation that sets it apart from other browsers.2 Whatever the reason, I’m glad I found a block of CSS that seems to work everywhere.


  1. See, it doesn’t spread the lines. 

  2. It does strike me as odd that the two Safaris handle it differently. 


9 Responses to “Beating the spread”

  1. Josh says:

    Any ideas how to get the popup, footnote text to fade away on touch devices? I applied your technique on my site, but have always been uncomfortable with the touch device behavior.

    Thanks.

  2. Michael says:

    Ok, so total schmuck question, but I want to add the popup footnotes to my site, but literally have no idea how to go about it (never gone deeper than basic css and installing plugins…). Any starting point would be appreciated as I’m not getting far with Google tonight…

  3. Dr. Drang says:

    Honestly, Josh, it wasn’t until a few days ago that I discovered that the popups appear on touch devices. I would swear they didn’t back in iOS 4 and earlier, and they’re really not supposed to.

    This is my way of not answering your question; I’ve tapped around and gotten them to disappear, but I haven’t been able to reproduce my steps. Now that I know of the problem, I’ll try to add code that will hide the popups. It may be a while.

  4. Dr. Drang says:

    The first step, Michael, is to make sure your footnote HTML matches mine (and Gruber’s and Mathis’s). If you’re using PHP Markdown Extra, it should match automatically; if not, you’ll have to study the HTML on our sites and reproduce it.

    The next step is to save the JavaScript someplace on your server and link to it. View the HTML of this page, scroll to the bottom, and look for the line referencing footnote-popup.js for an example. That’s the kind of thing you’ll have to add to your site’s template files.

    If you’re running a WordPress blog, there may be a more “WordPressy” way of doing this, but I can’t advise you on that. Although I use WP here, I long ago diverged from the normal WP ecosystem—this is more a “roll your own” site that happens to use WP as its build engine.

    It’s hard to know how to advise you further, since I don’t know any of the specifics of your site. You can email me, but don’t expect quick answers this time of year. Good luck!

  5. Michael says:

    Thanks! It’s a WP site, so I’ll just start breaking crap and hopefully get there eventually. There was a plugin, but it seems to hate my site for some reason.

    Thanks for the direction and hope you’re handling the holiday chaos… might be bothering you after the new year!

  6. Scott says:

    Does seem weird that Safari and Mobile Safari would have different browser presets for something as basic as CSS interpretation. Think

    #content sup {
      line-height: 0;
      vertical-align: super;
    }
    #content sub {
      line-height: 0;
      vertical-align: sub;
    }
    

    would solve the same problem in a bit more semantic way, if you’re into that sort of thing. Anyway, thought I’d share.

  7. Dr. Drang says:

    I may give your solution a try, Scott. It does look better than the one I found.

  8. Highlander says:

    Another solution from HTML5 boilerplate:

    /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
        sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
        sup { top: -0.5em; }
        sub { bottom: -0.25em; }
    
  9. Jordan says:

    If you want to scope these rules to the content area, then

    #content sup, sub
    

    should be

    #content sup, #content sub