Dynamic Inline Styling

Microsoft Outlook 2007 and also the version 2010 are very bad at rendering HTML. They use Word to render HTML! There has been holly war on this issue but we have to deal with it for years to come.

Let me explain the problem briefly, emails in general requires inline styling as webmails like Gmail and Hotmail strips all stylesheet files. Outlook is the worst and needs table, so generally speaking if you want the email to appear correctly, the email must be done in tables with inline styling. When many websites are running on the same code, it is difficult to use the same email template for all sites. The quick solution would be to create a template for each one. But let me suggest another idea.

What I did was that the email template was made the same with classes, just as you would do for a site:

<table border="0" cellspacing="0" class="tableContent">{some content}</table>

Afterwards, the css file is not actually a css file, but a php file that contains an array, it will all make sense afterwards:

$style_email['class="tableContent"'] = 'style="font-family:tahoma, arial; font-size:11px; color:#222222;"';

All the styles are defined like that, then just do a str_replace, the $email_order contains the email template:

global $style_email;

//include default css
include (DEFAULT_CSS);

//overwrite some css if needed
if (file_exists (SITE_CSS)) {
    include (SITE_CSS);
}

foreach($style_email as $key=>$value) {
    $inline_email_template = str_replace($key, $value, $email_template);
}

It is pretty neat and works really well, you can continue further more, by including the default css first and then including the particular css and strip div and span tags. There you are, the email can be coded with class and it will be shown on all browsers.