Published

We build a lot of websites with superscripts in pharma. Whether it’s a registration mark ® or a superscripted reference number1, getting them to properly underline is a real issue. Usually the underline on the superscript will move up off the baseline. In the past, we’ve solved this by adding a border-bottom to the text instead of an underline, but that will only work on single-line text. It blows up badly when your text is multi-line or rags off the end of a line.

A little googling revealed a possible solution in the comments of this gist. Someone way more brilliant at CSS than I am came up with a way to use a linear gradient that repeats in the X axis. It wraps around long lines just fine and scales with the text perfectly. I’ve married it up with the default CSS for all good, sane, sup tags and developed the following:

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

a {
  /* Use linear-gradients with a horizontal repeat to
     create the underline effect */
  text-decoration: none;
  background: -moz-linear-gradient(left, red, red 100%);
  background: -ms-linear-gradient(left, red, red 100%);
  background: -o-linear-gradient(left, red, red 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(red));
  background: -webkit-linear-gradient(left, red, red 100%);
  background: linear-gradient(left, red, red 100%);
  background-position: 0 100%;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

If you want to see a working demo, here is a jsfiddle example

Read more!

James Tomasino

I like reading, writing, and arithmetic

jamestomasino mr_ino