HTML email formatted to display in Outlook - word spacing issue

Question

I've been attempting to format an email template to work cross-client. I've tried different frameworks and I've read about compatibility issues, especially with Outlook. Although I've been able to format the template to display pretty well in Outlook, I'm still having an issue where there are large spaces between words. It does not happen in every paragraph and it seems to only happen with one or two words at a time. I've taken this screenshot for reference. Notice the disclaimer text under the 'Chocolate World' section.

Here is the code for that section, all styles are inline. Is there a compatibility issue with any of the inline styles that might be causing this issue?

<table align="left" cellpadding="0" cellspacing="0" class="deviceWidth" style="width: 33%;">
<tbody>
<tr>
<td style="padding: 0 10px 20px 10px;" align="center" valign="top">
<p style="mso-table-lspace: 0; mso-table-rspace: 0; margin: 0;"><a href="#"><img align="left" alt="" border="0" class="deviceWidth" src="http://www.ctsciencecenter.org/cm_mailer/impact/chocolate-world-expo_impaCT.jpg" style=" width: 128px;padding:0px 0px 0px 10px;" width="128" /></a></p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 20px 10px;"><a style="text-decoration: none; font-size: 16px; color: #333; font-weight: bold; font-family: Arial, sans-serif;" href="#">Chocolate World Expo</a>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;"><strong>April 27, 10AM&ndash;7PM<br />
 Special Member Pricing:<br />
$15 Adults, $10 Youth<br />
Coupon Code: Bonbon</strong></p>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;">Sample chocolate offerings, baked goods, cheeses and gelato that will perk up your taste buds. Enjoy a different treat with every step. All of these delicious items will be available for purchase! Visit <a href="http://thechocolateexpo.com/">Chocolate World Expo on the web</a> to find what you fancy.<br /><br /><strong style="font-size:11px;">Please note that we will be CLOSED to the public on April 27. Purchasing tickets in advance is highly recommended.</strong></p>
<table align="left" style="width: 90px;">
<tbody>
<tr>
<td style="padding: 10px 16px; background-color: #666; border-top: 1px solid #eee; background-repeat: repeat-x;" align="center" bgcolor="#666"><a style="color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">Tickets &raquo; </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Thank you for your help!

Answer 1

I'm not sure where your CSS is that is causing the text to justify (do you have it in your head <style>?), but it looks as though you are trying to prevent it happening locally as you are using text-align:left;.

text-align doesn't always work - in html email, you should instead use align="left" in your <td> element. This will affect all within it.

Example:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
      This text will align left
    </td>
  </tr>
</table>

Answer 2

Full text justification in narrow block of HTML is never going to look good. This has nothing to do with your styling, but rather the limitations of the text justification algorithm.

Since it cannot break-words and use hyphens to wrap (as you'll see in properly typeset magazines and books) you often end up with this exact problem. It's best to avoid full-justification unless you have much wider columns.

Answer 3

You could try using a soft hyphen:

­ or ­

Words which are to long to fit in a column, are broken in to two using a dash. This dash can be placed in every part of the sentence and will only show, if the word breaks at that soft hyphen.

Se this example:

a­very­long­word­will­break­when­a­soft­hyphen­is­added­at­the­right­spot­and­adds­a­dash­to­break­the­word­at­the­next­row­without­adding­too­much­dashes

a­very­long­word­will­break­when­a­soft­hyphen­is­added­at­the­right­spot­and­adds­a­dash­to­break­the­word­at­the­next­row­without­adding­too­much­dashes

Answer 4

Did you try add a align left and vertical align top to the td and set the width and height?

Replace all the td for

<td align="left" valign="top" width="value-image" height="value-image" >&nbsp;</td>

Also, you must to set up a display: block for any image

<img style="display:block;" height="value-image" width="value-image">

I hope to be helpful