August 19, 2008

Outlook and the Double-Spaced Signature

Filed under: Microsoft, rails, Windows — oomoo @ 9:43 pm

BTW, if you are not a programmer trying to create signature files, and you are just using Outlook and want to avoid double-spaced lines, simply hold down the [Shift] key when pressing the [Enter] key at the end of each line in your signature.  The signature editor (Word) will insert a "soft return" instead of a "hard return" and your signature will be nicely single-spaced.  If you are a programmer, read on…

So, the other day I’m called upon to write a web-based (Ruby on Rails of course) app for a client.  This app takes an employee’s information and generates a standard "company approved" signature block that can be used in both Outlook and web-based mail like GMail (Google Mail)/Yahoo/etc.  No big deal, everyone just uses HTML these days right?  Even Microsoft finally relented and HTML formatted messages are even the default in Outlook 2007.  Woo-hoo!  Word as an e-mail editor is finally dead!  I can’t tell you how many hours I have spent changing the default e-mail editor in previous versions of Outlook on client’s machines.

Back to the web app… 

Step 1, I did my research and found out that Outlook stores it’s signatures in the folder: C:\Documents and Settings\<user name>\Application Data\Microsoft\Signatures\   If I have an HTML signature named "MyWorkSig", it is actually stored in the signatures folder as MyWordSig.htm (not .html).  If it were a text signature, it would be stored in the same folder and have the same name, but would have a .TXT file extension (MyWorkSig.txt).  If it were an RTF (rich text format) signature, it would be stored in the same folder and have the same name, but would have a .RTF file extension (MyWorkSig.rtf). 

Step 2, I learned that you should not use CSS styles, but should "in-line" CSS formatting, which is just "style" information embedded into my HTML tags. 

style="font-size: 9px; color: #000000; font-family: Tahoma,Arial"

I also learn that you shouldn’t use the "html", "head", or "body" tags, because you are not really creating a full HTML page, just a piece of a page.

<html> <body> ....  </body> </html>


Step 3, after MUCH trial-and-error, I learned that the advice given on most websites about creating Outlook-compatible HTML signatures will just make your signature look crappy or will get your mail deleted by anti-spam packages because of embedded pictures or deceptive URLs.

Most sites will tell you to wrap your signature in one of these HTML tags/elements:

<div>...</div>    <p>...</p>     <table>...</table>

Why?  Well, if you don’t wrap your text in some type of HTML tag/element, you won’t be able to specify the "Style" information I eluded to in "Step 2".  This means that you won’t be able to format your signature with fonts or colors and you won’t be able to control the spacing/layout.  In that case, you basically have a TEXT signature, not HTML.

So, what’s the problem with using these tags in my signature?  Well, if you like lots of double-spaced lines in your signature, then go ahead and use them.  If you are like me and you want the signature coming out of Outlook to look the same as the one coming out of any web-based messages you send, then the infamous double-spaced Outlook signature is a fiasco!

When you send a message through Outlook, and your HTML signature encounters any "divider" tags, it will insert a double-spaced line.  It makes sense in a Microsoft-sort-of-way when you consider that each of the tags I mentioned are literally followed by a "hard return".  But, in a the-way-things-really-work-sort-of-way it’s just fubar’d.

So, how do you add divider elements/tags to your HTML so you can add your "style" settings without getting double-spaced? 


That’s right my fry-end, the lowly "span" tag will allow you to divide your text, specify all the formatting you spammy heart desires, but avoids the double-spaced line from hell.  Try this signature on for size:

   1: <table style="font-family:Tahoma,Arial; font-size:9px;" cellspacing="0" cellpadding="0">
   2:   <tr>
   3:     <td style="vertical-align: top; text-align: left;">
   4:       <span style="font-size: 12px; font-weight: bold;">Mr. Knows Itall</span>
   5:       <span style="font-size: 11px;"><br />Level 30 Cleric</span>
   6:       <span style="font-size: 12px; font-weight: bold"><br />Global Masters LLC</span>
   7:       <span style="font-size: 11px;"><br />phone: (777)-888-9999 </span>
   8:     </td>
   9:   </tr>
  10: </table>

You could just save this in your Outlook signature path (name it something like…. MySignature.htm), then pull up your Outlook signature settings, and choose (the newly available) MySignature as your signature.  Send yourself a message and you will see that no double-spaced lines appear (except following the "Table" tag, but we will let that one slide).

*Note that I had to manually insert "br" tags where I wanted a "line break" to appear.


Now, here is a full-blown HTML signature that has multiple tables for indentation, but the double-spaced lines Outlook will insert are almost useful to the end result:

<table style="font-family: Tahoma,Arial; font-size: 9px; color: #000000;" 
              cellspacing="0" cellpadding="0">
        <table style="font-family: Tahoma,Arial; font-size: 8px; color: #000000; 
                      vertical-align: top; text-align: left; white-space: nowrap;" 
                      cellspacing="0" cellpadding="0">
                <th colspan="2" style="text-align: left">
                <img src="companyx_logo.jpg" alt="(CompanyX logo)" 
                          width="254" height="46" style="border-style: none" /></th>
                <td style="font-size: 8px; width: 60px; white-space: nowrap;">
                <td style="vertical-align: top; text-align: left;">
                <span style="font-size: 12px; font-weight: bold;">Johnny B. Good</span>
                <span style="font-size: 11px;"><br />I.T. Warlock</span>
                <span style="font-size: 6px;"> <br /> <br /></span>
                <span style="font-size: 12px; font-weight: bold">CompanyX, Inc.</span>
                <span style="font-size: 11px;"><br />1 Main Street</span> 
                <span style="font-size: 11px;"><br />Hangemhigh, TX 666777</span> 
                <span style="font-size: 11px;"><br />p. 123-456-7890 f. 098-765-4321 </span>
                <span style="font-size: 6px;"> <br /> <br /></span>
                <span style="font-size: 11px;">
                  <a href="http://www.companyx.com" title="www.Companyx.com">www.CompanyX.com</a>
                <span style="font-size: 6px;"><br /><br /><br /></span>
        <td colspan="2" style="font-family: Tahoma,Arial; font-size: 9px; color: #000000;">
        PLEASE NOTE: This message, may include privileged blah blah blah...

*Note: You will need to specify your own logo JPG, and change the width/height accordingly.  I chose to put my logo on the company website, and pull it from there instead of embedding it into the message.  Your mileage may vary using either technique.

*You will certainly want to make use of the "alt=" option in your "img" link (if you use one).  If, for any reason, your logo graphic is not downloaded/visible in the message, the "alt=" text will be what your recipient sees instead.

Learning all of this….interesting stuff….the hard way took me the better part of an 8-hour day (I am sad to say).  Hopefully, I just gave you back a few hours with your family.  Now, go home and tell them Oomoo sent you!



Do you want to learn more about creating your own Outlook Signature Application? 

See this post: Application Notes


Do you want to DEMO this application in your browser?

Just go here:  Outlook Signature Application

This web-based application is a full-featured signature generator for Outlook.  You can use it to create your signature or just use it as an educational tool.  This application was completely written at (and is hosted on) Heroku!!

(hint:  If you enter your “Location” and “Signature” information, be sure to delete it before leaving the site)

In fact, you can download the full source code here:  Download Source Code

Create a free website or blog at WordPress.com.