Preheader spacing
June 12th Update: To address changes made by Apple for iOS 16.6, and the new iOS 17 beta’s that have blocked our previous solution, we recommend changing  from our iOS16.4 post to instead use ­. Using this new solution works currently, however this recent update suggests the team at AppleMail may be trying to block us using this trick. If you are from AppleMail (or any email client) and you are trying to stop senders from using the above spacing, we’d love to know! Please reach out to us here.
Adding space after your email preheader has become pretty common across the email industry. This stops the main email content from coming up and displaying in the preheader keeping it clean and giving more control of the copy to our marketing teams.
Up until now most people have either been using the ͏ or ‌ character to generate the spacing, with ͏ having slightly better support. However in an update to Yahoo and AOL sometime around the end of 2022 or early 2023 these stopped working. And now with the Beta launch of iOS 16.4 these appear to have stopped working in Apple Mail 16.4 too.
We’re not sure if these updates are the email clients intentionally trying to stop us controlling the spacing or if they are just a side effect of another update but either way let’s take a look at an alternative method.
Use ­also known as Soft Hyphen. This character is used to create breaks in words that may split to a new line in a similar way to <wbr>.
As this will show up in Windows Outlook as a hyphen, we should place these spaces after all our other spaces.
Use  also known as Figure Space also has the added benefit of being a large space (equal to the size of a single numerical digit) meaning we need less of these characters and resulting in less code overall.
Use ͏ also known as Combining Grapheme Joiner, this doesn’t act as a space, however the spaces between it are counted.
These all pull the preheader from the plaintext version so to get these to work you need to paste in Combining Grapheme Joiner do this as text and not as the HTML code.
Other email clients appear to work with any of the above options, but if you want the widest possible support you’ll need to use all three together.
There have been a few reports of line breaks appearing in the preheader. One solution seems to be adding a after the spacing hack.
So our new preheader code will look like this
Add in  ͏ then ­ as many times as you need and make sure to leave a spaces as well. About 150-200 times should give plenty of space. Although bare in mind this does add about 4kb to our code, so if you are running close to the 102kb limit you may want to cut back a little.
<div style="display:none">
This is my preheader text
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
 ͏  ͏  ͏  ͏  ͏  ͏
­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
</div>