Making sense of Outlook’s rendering engine

Tables

The only official existing documentation about Word’s rendering is a 2006’s post from Microsoft explaining HTML and CSS Rendering Capabilities in Outlook 2007. But it’s still enough to comprehend how Word’s engine works and why we’re going to need tables.

  1. CORE: color, background-color, text properties (font, font-family, font-style, font-size, font-weight, text-decoration, text-align, vertical-align, letter-spacing, line-height, white-space), border shorthand properties (border, border-color, border-style, border-width, border-collapse) and a few others.
  2. COREEXTENDED: text-indent and margin properties (margin, margin-left, margin-right, margin-top, margin-bottom).
  3. FULL: width, height, padding (as well as padding-left, padding-right, padding-top, padding-bottom) and border longhand properties (border-left, border-left-color, border-left-width, border-left-style, etc.).
  • <body> and <span> only support CORE properties.
  • <div> and <p> support both CORE and COREEXTENDED properties.
  • All the other elements supported by Outlook (like <table>, <td>, <h1>, <ul>, <li>, …) support CORE, COREEXTENDED and FULL properties.
  • While margin is somewhat supported, auto values are not supported. So the margin:0 auto we’d use on the web to center a table won’t work. We’ll use the align="center" attribute instead.
  • In a table row (<tr>), the vertical padding on cells (<td>) will be the biggest value of that row. So if we have a cell with padding-top:10px and another one with padding-top:20px, both cells will have 20px.
  • background-color is well supported, but contrary to web standards, colors “bleed” and apply through margins. It’s usually safer and more consistent to apply a background-color to a table.

Conditional comments

Microsoft introduced conditional comments back in 1999 in Internet Explorer 5. The idea is clever: inside a regular HTML comment (<!-- -->), you can code a condition that will make the rest of the content visible if fulfilled. Here’s an example:

<!--[if IE]>
<p>This is only visible in Internet Explorer.</p>
<![endif]-->
<!--[if mso]>
<p>This is only visible in Outlook 2007-2019 on Windows.</p>
<![endif]-->
<!--[if mso 12]>
<p>This is Outlook 2007.</p>
<![endif]-->
<!--[if mso 14]>
<p>This is Outlook 2010.</p>
<![endif]-->
<!--[if mso 15]>
<p>This is Outlook 2013.</p>
<![endif]-->
<!--[if mso 16]>
<p>This is Outlook 2016. And 2019.</p>
<![endif]-->
<!--[if gte mso 9]>
<p>This is Outlook 2007 and above.</p>
<![endif]-->
<!--[if !mso]><!-->
<p>This is everything but The Outlooks.</p>
<!--<![endif]-->

mso properties

The Outlooks’ rendering engine also has a lot of proprietary properties, mostly recognizable thanks to the mso- prefix. There are hundreds and hundreds of those, documented by Microsoft in a CHM file. (Jason Rodriguez has a great story on how to get to that file, but fortunately Stig Morten Myre has an online archive.)

<td style="mso-padding-alt:0 16px"></td>
text-underline-color: red; /* Outlook version */
text-decoration-color: red; /* Standard version for clients that supports it */

VML

VML is Microsoft’s take on a vector graphics format from the late nineties, right before SVG came around. Just like SVG, you can draw content with markup code. For example, if we want to draw a red rectangle, we can use the <v:rect> element and the following code:

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="red" stroked="false" style="width:200px; height:100px;"></v:rect>
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML rectangle</title>
</head>
<body>
<!--[if mso]>
<v:rect fillcolor="red" stroked="false" style="width:200px; height:100px;"></v:rect>
<![endif]-->
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML background</title>
</head>
<body style="background:#e2ecb7 url(https://i.imgur.com/ftd0S2j.jpg);">
<!--[if mso]>
<v:background fill="true">
<v:fill type="tile" color="#e2ecb7" src="https://i.imgur.com/ftd0S2j.jpg"></v:fill>
</v:background>
<![endif]-->
</body>
</html>

Will Outlook on Windows ever be good?

The more I spend time with The Outlooks, the more I like to say that they’re not all bad. They’re just different. Using tables, conditional comments, proprietary properties and VML can be enough to work around most Outlook quirks. And even provide things that couldn’t be done elsewhere.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store