The Servicemark (SM) and the Web
One of my least favorite challenges is getting the servicemark to display on a web site. The servicemark is "A word, phrase, logo, symbol, color, sound or smell used by a business to identify a service and distinguish it from those of its competitors." (www.leanlegal.com) So pretty much if you name a service you provide, you'll want to throw a servicemark after the name to prevent other people from using the same name.
With a little Googling, you are sure to find that the servicemark is the unicode character U+2120. So logically you would think, "Hey, there must be an html entity for that!" Right you are! The servicemark can be displayed as ℠ or ℠. However, there is very poor support for this character. I am sure part of it has to do with the fact that not every font has that glyph defined, but it goes beyond that. For instance, with Verdana, the servicemark will show properly in Firefox, but not in the HTML title. In IE 6 on the PC, it shows up as a broken character (empty box) in both the HTML title and the body of the page. Since 80% of the world views the web through IE 6 on a PC, you pretty much can't use the html entities.
Ok, so we are going to have to another way to do this. The tag comes to mind as a way to produce the superscript needed for SM. So you go ahead and create the SM like SM. Cool. Now we view that in a browser, but the font is still the same size as the rest of the text. Ok, so we redefine our sup tag to be a smaller font size. This poses a few problems. If you are using a font size around 11 - 12px, the SM should probably be around 7px. Unfortunately we are working with a pixel font, so the rendering looks kinda crappy, whatever. But then you look at it in IE, and the superscript nature of the text is altered by changing the size. Now IE shows SM as a tiny font, vertically aligned in the middle of the regular text. That just looks terrible.
In the end, we pretty much only have the option to have a big huge superscript SM, or to put the SM inline, like this: My Service(SM). Looks like it is a lose-lose situation. If only there was a win-win-win scenario! Where is the outrage, web community?
Comments
Yes, you could use flash replacement to do it, but that is really complicated and bulky for a single tiny character that can occur throughout the content. It makes more sense being used for h1 tags, since those are seperated from the rest of the content, and have a much more noticable visual impact.
You could use an image "hack" to display the SM, but I really prefer semantic content.
If the situation is bad enough, you could always register the service and use the ® symbol.
Whups, i forgot to provide link to FIR just in case anyone reading knows not of what we speak...
You could use a div with 'position' set to 'relative' and tell it to bump up 10 or 15 pixels until its in the right spot. Then use an em to adjust the font size. I'd say use a percentage on the bottom offset as well...but Firefox doesn't like that as much as IE does. I had to set the display to inline in one of the tests I did, but it worked in both browsers.
div style='position: relative; bottom: 12px; font-size: .75em;'
Wait till you have the facts; don't jump to an incorrect conclusion.
In the end, we pretty much only have the option to have a big huge superscript SM, or to put the SM inline, like this: My Service(SM).
CSS will work, as well as a sup tag with a small tag.
I work as a web designer for a corporation, and I've been trying to implement service marks on the website. The solution I'm currently playing with involves the following code:
My Killer Service℠
span.smark { font-family: "Lucida Sans Unicode"; /* A rare sm-supporting font. */ line-height: 0; /* keep the leading consistent in a paragraph */ }
The question is, what fonts can we rely on supporting the servicemark symbol? Which ones will likely be on the user's computer?
@Christian Unfortunately with CSS you still get a big huge SM mark. @Dark Matter It appears you didn't read my conclusion. Like I said, the only options are for a large SM or placing it inline. Both solutions you mention (CSS and [sup][small]) result in a large SM that throws off line-height. Here's an example for you: The real SM: Service℠ CSS: ServiceSM sup/small: ServiceSM @Tim Awesome insight! This seems to work with all browsers I tested*: Service℠ * Win IE6, Win FF2, Win Opera 9, OSX FF2, OSX Safari 2
Tim's solution is working for me as well, thanks!
Just curious how or what is making it work though.
@ Lardlad: I believe the font type used for Tim's solution is the magic part.. it supports the sm symbol in IE whereas the usual suspects don't.
@Tim: MANY thanks for this solution!
My hope is that IE6 will die a fast death so we can move forward without having to make so many exceptions. =/
Hey Tim, mucho thanks for this solution. The service mark problem has been immensely frustrating lately. You saved at least 1/8 inch of my hairline.
Read something more recent.
Statements and opinions expressed in this blog and any comments made are the private opinions of the respective poster, and, as such, iMarc LLC is neither responsible nor liable for such content.
Visitors
How about FIR over the symbol?