April 2023 Windows Outlook Changes
The most recent version of Windows Outlook (I’m testing on Version 2302 Build 16.0.16130.20332) seems to have made a few changes.
These changes include:
- Text is automatically hyphenated when it drops to a new line
- Support for letter-spacing has been dropped
- I’ve also heard another report that text align is set to justified on all content but I’ve not seen that one myself yet.
It’s frustrating for email developers to see these changes as it can affect the rendering of our code. But what is really disappointing is these changes are all introducing accessibility issue without adding any benefits to the user that I can see.
This is frustrating, but the fix is easy. We just need to reset the default behavior in our styles using the Outlook-specific CSS mso-hyphenate:none. We can set this to apply to all block level elements we might use.
table, p, li, h1, h2, h3, h4, h5, h6, div, blockquote{
mso-hyphenate:none;
}There's no way to replicate letter-spacing, so unfortunately there are not any workarounds.
However, one of the most common uses of letter-spacing is to replicate padding on a CTA link, such as in the code below.
<a href="htts://parcel.io" style="margin:1em;background-color:#1781ec; text-decoration: none; padding: .5em 2em; color: #FCFDFF; display:inline-block; mso-padding-alt:0;text-underline-color:#1781ec">
<!--[if mso]><i style="letter-spacing: 32px;mso-font-width:-100%;mso-text-raise:16pt" hidden> </i><![endif]-->
<span style="mso-text-raise:8pt;">
My link text
</span>
<!--[if mso]><i style="letter-spacing: 32px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>With the new update, our left and right padding is removed.
However, we have a new workaround and it has some extra benefits too so this bug has actually led us to use some better code.
We want to replace the code set in the <i> elements
<i style="letter-spacing: 32px;mso-font-width:-100%" hidden> </i>This original code used letter-spacing to create the width and mso-font-width to remove the additional width added by using a
This now becomes
<i style="mso-font-width:200%;" hidden> </i>With this new code, we have replaced the with an EM space  . This space is the size of 1em which is relative to the font size making it predictable and easy to scale. We can then use the mso-font-width to adjust that size, so if we want 2em padding, we set it to mso-font-width:200%; and if we want 0.5em padding, we set it to mso-font-width:50%; making this very flexible and allowing us to fine-tune our padding. This also means if we want a larger CTA, we only need to change the font-size, and everything else will scale up accordingly.
As we’ve now switched our left/right padding to use relative units, it makes sense to do the same for our top/bottom padding.
So here we need to convert our mso-text-raise:16pt to mso-text-raise:100% and mso-text-raise:8tx to mso-text-raise:50% as our default font-size was set at 16px
<a href="htts://parcel.io" style="margin:1em;background-color:#1781ec; text-decoration: none; padding: .5em 2em; color: #FCFDFF; display:inline-block; mso-padding-alt:0;text-underline-color:#1781ec">
<!--[if mso]><i style="mso-font-width:200%;mso-text-raise:100%" hidden> </i><![endif]-->
<span style="mso-text-raise:50%;">
My link text
</span>
<!--[if mso]><i style="mso-font-width:200%;" hidden> ​</i><![endif]-->
</a>