18 Jun

Underlining superscript @reg;

I recently came across a conundrum while sub-contracting as a front-end developer.  Underlining text containing registration marks and trademark symbols / glyphs that are superscripted for hyperlinks.  If you have tried this using the usual text-decoration:underline;   CSS method, you already know that the underline moves up to underline the superscript. For example:

<style>
   span {
     text-decoration: underline;
   }
</style>

<span>This sentence is underlined with a foobar<sup>®</sup> in it.</span>

Outputs this:

This sentence is underlined with a foobar® in it.

I eventually found an solution on the web that padded the bottom under the superscript to force the underline down to where I wanted it to be.  Eureka!  Or so I thought, until testing it in Safari.  Instead of padding moving everything down, Safari moved everything up.  Suddenly I had superscripts that looked like they were trying to fly away from the line altogether – and since it was a hover effect you can imagine how that looked.

So with the padding option gone, again more searching.  A suggestion on stackoverflow.com, using borders, but with an addendum of beware of line wraps.  Nuts!  Foiled again.  The border was too far below the text and on lines that wrapped, only the second line was underlined.  I searched and searched and searched looking for a viable solution to this issue.

Another concept in an article on A List Apart –  CSS Design: Custom Underlines by Stuart Robertson  (http://alistapart.com/article/customunderlines)  Gave me the help I needed.  The concept he discussed in his article is the use of gifs to make custom underlines for hyperlinks.

This is another sentence is underlined with a foobar® in it.

See how the line stays straight under the text. Even if you have a line break:

This broken sentence is
underlined with a foobar® in it.

The gif itself is lightweight, if you use the same gif then the browser will just pull it from the cache once it has been cached the first time.  So not a big headache in terms of site load-up overhead.

<style>
.underline {
   text-decoration: none; 
   background: url('blue.gif') repeat-x 100% 90%;  
   white-space: nowrap; 
}
</style>

<span class="underline">This broken sentence is<br>underlined with a foobar<sup>&reg;</sup> in it.</span>

Last example, as a hyperlinked hover underline:

Foobar – (mouse over me) Take me to the CMBC home page.

<style>
.underline-home {
 text-decoration: none;  
}
.underline-home:hover {
   text-decoration: none; 
   background: url('blue.gif') repeat-x 100% 90%;  
}
</style>

<a class="underline-home" href="http://codrzmustbcrazy.com">Foobar<sup>™</sup> - Take me to the CMBC home page.</a>

I removed the {white-space: nowrap;} from the style this time to allow my text to wrap for smaller screens like those of smart phones.

Read Stuart’s article for a full explanation of the code – he does some pretty cool stuff with underlines.  I altered his code slightly for my use.  I like my underlines to be a little closer to the bottom of my text, so I reduced the height percentage.  This brings the underline up closer to my text.

While the non-coder world has no idea why this solution excites me, I am happy know the next registered and trademark glyph isn’t going to break my hyperlink hover anymore.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 1 =