Add `mso-line-height-rule:exactly` anywhere line-height is set Issue #43 premail premail

To this day, its email client still sends shivers down the spines of email developers (developers developers…) around the world. Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings. With Email on Acid, you get unlimited email testing with every paid plan. You’ll also get deliverability and accessibility checks as well image and URL validation and many other valuable features. From Outlook.com, to Outlook 2010, to high DPI versions of Outlook 2016, a tool like Email on Acid’s testing tool lets you instantly see how your email is rendering across every version of Outlook. You’ll notice in the 11 tips and tricks above we often rely on MSO conditional code to get around Outlook’s tricky limited support.

This may have a more drastic effect on how your email renders, so if you’re going to try this out it’s important to thoroughly test your email on all versions of Outlook. If you’ve exhausted your other options you can try this code snippet directly in your code’s head section. While many email developers may be salivating at the thought of a new and consistent version of Outlook, that version has only been released in Beta thus far. Further to that, it will take some time for companies to implement the new version. We expect the rollout to be a long and slow process so for now we’ll have to continue fighting the good fight against the older versions of Outlook.

mso-element-wrap

Those are the approaches I use to code CSS that targets Outlook only. As with all email hacks, neither one is a universal fix, but hopefully one of them will help the next time Outlook is giving you a hard time. Then there are the mso- prefixed properties that don’t correspond to a CSS equivalent, but to an Office feature. Many of these have no effect on Outlook, whereas others have almost too much of an effect. Hat tip to Joshua Hughes at FreeAgent who originally showed me his faux padding technique that inspired this version.

Any time an element is styled with both padding and mso-padding-alt, the mso-padding-alt value takes precedence in Outlook, regardless of which order they’re in. The stylesheet will be parsed by the Word-based versions of Outlook. To other rendering engines, the whole block of code will look like an HTML comment they should ignore. MSO conditional statements are a fantastic tool allowing us to target Outlook desktop versions specifically, even allowing us to target specific versions.

Small images or table cells not displaying correctly?

This is the shorthand version of mso-char-indent-count (how many characters to indent by) and mso-char-indent-size(how big those characters are). However the indent size dosn’t work in Outlook so we can only set the count, but this works either as long hand or short hand. This is a modifier for line-heightto say if the rule should be applied exactlyor at-least. It’s only applies to fixed unit values like px and uses at-leastas the default value. Use a minimum value of 1.5 for line-height for main paragraph content.

Outlook and its lack of support for animated GIFs has long-been a sore point for many designers. The introduction of a new Outlook for Windows has the potential to bring significant changes to the rendering challenges faced by email developers. Ok this is a complicated one, it’s similar to text-shadow but works a little differently.

Percentage values may produce unexpected results (see the second example below). As you can see, developing for Outlook can get really cumbersome. And because you need to support a wide variety of email clients, you might want to double down on testing. With Notificare, you can test all your email messages medical billing supervisor job description and templates, on real devices, in more than 90 email clients. Get rid of those nasty rendering bugs with confidence by using our Email Proofing feature. Make sure elements like margin, height, font-size, and line-height use an even value of pixels, and that might just save you some trouble.

Outlook ignores HTML item width and height.

Make sure to include ALT text; Outlook doesn’t display images by default unless people turn the feature on. The key takeaway is that we’re working with two different rendering engines—Word and Webkit. Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration. When using mso-elements you’ll see a border appear around the first element used. I’ve not worked out how to remove this yet but we can set another element first that will take the boarder then move that out of the way. Although it’s not the worst thing in the world, for those of you striving for perfection, this bug might really become annoying.

You’ll only need to define the width, Outlook will resize the height accordingly to maintain the proper image proportions. VML will allow you to get those beautiful background images working on Outlook but will add a layer of complexity to your email coding process. Let’s look at some of the common rendering issues in Outlook desktop clients and how to solve them. Windows users can choose 120 DPI to increase their screen resolution. If they do, the desktop email clients will respect that and will update images and text to be larger..

• Make sure elements like margin, height, font-size, and line-height use an even value of pixels, and that might just save you some trouble.
• Conditional stylesheets are great if you’re hand coding an email template and you need to apply one or more Outlook specific styles throughout the email.
• This is great for accessibility, but not so great for Outlook (some elements are scaled up while others aren’t).
• Use a minimum value of 1.5 for line-height for main paragraph content.
• Although that doesn’t seem to be an issue anymore in more recent versions, you might want to use Microsoft Office styles (MSO), if your spacing seems off.

Outlook has also been known to throw a bit of a tantrum when using padding on paragraph, div or anchor tags. The most useful place to use line breaks as an email spacing solution is between text. We wouldn’t recommend using it to force spacing in other situations.

CSS background images not supported.

For example, to vertically center the text within the line-height, set mso-text-raise to the difference between the font-size and the line-height, divided by two. Padding is stored in the mso-padding-alt attribute if the normal HTML padding attribute does not apply. But by using an .mso prefixed selector, we can override the font-family to an Outlook safe choice like the generic sans-serif family, without affecting other email clients. The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment. If it wasn’t for Outlook we’d be able to ditch the tables and embrace the . Tables have long been the standard for email developers, but as email standards catch up to web standards, more and more developers are ditching table-based layouts in favour of divs with ghost tables.

As we show above, you must add breaks inside of the content HTML. Unfortunately, this method is largely unused except for when adding spacing between text or forcing line returns in your content. Various email clients are known to read the line breaks at a different height, making it virtually impossible to create a pixel-perfect HTML email. The convenient thing about mso- prefixed properties is that they let you code self-contained hacks that you can save as snippets and drop into any template, without touching the stylesheet. Assuming your ESP doesn’t strip out unrecognized properties, this approach is also the least likely to cause any issues with inliners or the likes. Important declaration does override mso-padding-alt, but because Outlook ignores inline styles with !

Controlling line height in Outlook.

Whether you’re just starting to work with Outlook or a master marketer able to summon CSS classes at will, with these tools, you’ll be able to charm even the most unruly Outlook inbox. It is Microsoft’s version of SVG, but the language has been depreciated and is very rarely used (yay, email!). Microsoft does have the documentation for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind. Elements both with a border, you may only see an outer border around both elements and not between them. To fix this we can set a border between them, this could also be set as a different value.

Let us know in the comments section below or hit us up on LinkedIN, Facebook or Twitter. Note that non-standard attributes will be ignored by default – you’ll need to define them as props in the component if you need them preserved. Alternatively, you can safelist them in your build.components config. You can pass props to the component via HTML attributes, to control its height. If you need to add space between , see the Row Spacer example instead. The Spacer component is defined in src/components/spacer.html.

Unfortunately, Outlook doesn’t recognize link tags as block elements, nor does it allow us to change the display of inline tags using the display property. Stop switching back and forth between platforms during pre-deployment and QA. With Email on Acid you can find https://online-accounting.net/ and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on more than 100 of the most popular clients and devices, you can confidently deliver email perfection every time.

We can then use .mso prefixed selectors to apply CSS specifically for Word-based Outlook. Important declaration which is needed to override inline styles. Conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook. To view the full code snippets or take a deep-dive into the world of ghost columns, check out our fluid hybrid design guide and our explanation of ghost tables.

In fact, our very own email newsletters are coded with this method. In addition to the 11 common challenges discussed earlier, Outlook’s peculiarities often require us to implement specific workarounds and adjustments. These additional steps are necessary to ensure optimal rendering and functionality in various versions of Outlook. One of the persistent challenges faced by email developers when coding for Outlook is its tendency to ignore margin and padding properties. Often adding a ghost break will temporarily fix the rogue white lines in Outlook. Similar to ghost columns, a ghost break is a line break that we add targeted only towards Outlook.