Preheader spacing
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.
After running some tests on a number of spacing character I found that   and   both work in Yahoo and AOL across webmail, Android and iOS apps. And in Applemail iOS 16.4 󠀠and  both work. However 󠀠 may have issues on older iOS and macOS versions.
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 Zero Width No-Break Space also counts as a space but it’s not as large as  . This character is used for scripts that do not use explicit spacing and can also be used in a similar way to <wbr> for breaking up words without hyphenation.
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.
So our new preheader code will look like this.
Add in  ͏ as many times as you need and make sure to leave a space after it. About 100-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.