If you get any newsletters or email offers, you may have noticed that the text in an email preview or notification occasionally has many repetitions of “&zwnj” – something that doesn’t appear in the email itself. What the heck is this – a foreign tongue or weird cipher?
Nope – it’s a mistake that is easy to slip under the radar whether you’re a big corporation or one-person show. As a reader, you’ve likely become used to ignoring it. Which is too bad since it’s a rather trivial fix for the sender.
For the curious, here’s a short trip through this maddening bit of Internet garbage and how to fix it. (Warning: short code samples follow.)
Preview text
Let’s start with the text you see in the index view for each email. There’s of course the name of the sender and the email subject line. The third bit of text is called the preview, and this line of text together with the subject line give you an at-a-glance look into an email’s contents. Your email reader shows you whatever fits in the preview (typically several dozen characters), drawn from the first couple lines of the email.
But what if you’re sending an email and want to say something specific in the preview text that is not the first few lines of the email? This is something a lot of people do since the first line of text in an email may not be all that descriptive or compelling.
The good news is that many mailing list programs like Mail Chimp allow you to insert preview text that will override the beginning text of the email. To do this, you simply apply some CSS and HTML hacks – an initial line of text – to the beginning of the email. But then you need to hide it. One of the most popular ways of doing this is to add white text on a white background so that it becomes “invisible”.
The bad news is you have to know how to avoid a few pitfalls in order to have your preview look clean and be effective.
Forced previews and Facebook
Have you ever wondered how Facebook is so good at tricking you into visiting their platform? They do it with – you guessed it – forced previews. Here’s an example.
I see this in my news feed and think – oh, that’s interesting – I wonder what Chris has to say? But when I open up the email, this is what I get instead.
There’s nothing in here about Chris’ post, so now I’ve got to log into Facebook to see what he said. (Those darn tricksters!)
The point is, previews are effective. Facebook uses them to drive people to their website, but many people use them simply to pique the reader’s interest so that they open the email. What’s great about this, is it’s readily accomplished through HTML.
Becoming invisible
If we edit the HTML behind the Facebook email, we can force the text to appear by making the text non-transparent and black on white. Doing this will reveal the preview – a tiny bit of text above the Facebook logo.
What does the tiny text say? “The future of conferences?”, or in other words, the email’s preview text.
Abusive CSS
The CSS for this is rather hacky as you need to convince all email readers to hide the text, yet not all email readers behave exactly the same. So, while the CSS incantations differ, they all have one thing in common – overkill. That is, they try to make the preview text tiny, invisible, hidden, zero width, transparent, etc). Here’s an example:
<body>
<div style="display:none;font-size:1px;line-height:1px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
The Power of Preview!
</div>
<p>Hi Test, here’s my test message</p>
</body>
Where preview goes wrong
If you’re trying to create an email preview and you’re not careful, your preview text will get smeared together with the actual email text.
Andy Gryc
Test email
The Power of Preview! Hi Test, here’s my…
Yuk.
Spaced out previews
If you want your preview text to stand alone and not get merged with the body copy, you need another hack. You need to add enough spaces to the end of your preview text to push the real email text out of the way.
Andy Gryc
Test email
The Power of Preview!(Insert ton of spaces here)Hi Test, here’s my…
With enough spaces, you’ll be able to trick the email reader (on every platform) to show only the desired preview text. As an email sender, you’ll be adding this to your email template.
<body>
<div style="display:none;font-size:1px line-height:1px;max-width:0px;opacity:0; overflow:hidden;mso-hide:all;">
The Power of Preview!
<!-- Insert spaces here... -->
</div>
<p>Hi Test, here’s my test message</p>
</body>
This may seem like a good fix but it’s another mishap waiting to happen. You see, HTML has this sometimes-infuriating characteristic of not paying any attention to whitespace. So just dumping a bunch of spaces after your preview text won’t work. You need spaces that are more durable and less prone to getting collapsed or removed.
Non-breaking spaces are often used for this nefarious task (in other words, in HTML-speak). However, even they aren’t quite enough, as they will still get collapsed. We need HTML characters that will show up as repeated spaces but can’t be ignored by the HTML processing code in the email reader.
Enter ‌
What you really need is a Unicode character that forces two characters to “not be combined” – and indeed such a thing actually exists. It’s called a zero-width non-joiner (a descriptive but terrible name) and it’s used to force separation between characters that in some languages would automatically be tied together with a ligature.
However, it also works perfectly for preventing spaces from being collapsed together. If you repeat a long chain of non-breaking spaces ( ) and zero-width non-joiners (‌) after your preview text, the resulting spaces stay intact, giving you a clean preview.
Sounds good. What could possibly go wrong?
Unfortunately, for reasons that would make this blog even longer (which I’ll omit for your sanity), many email sending programs can munge up HTML code when you are editing it. If the preview padding spaces ( ‌ ‌ etc) lose their semicolons – perhaps while someone is editing the HTML mail template – the email recipients will end up with a bunch of floating &zwnj’s in their email preview.
Junk removal
Fixing this problem is a matter of editing the HTML template and being careful to make sure that the HTML character codes are all preserved properly. It’s something that your newsletter sender needs to remedy on their end, while being careful to test their emails before they go out.
<body>
<div style="display:none;font-size:1px; line-height:1px;max-width:0px;opacity:0; overflow:hidden;mso-hide:all;">
The Power of Preview!
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<p>Hi Test, here’s my test message</p>
</body>
It’s the simple things in life that bring so much joy, isn’t it?
Now, if you’re tired of seeing &zwnj in your emails, just forward a link to this blog to your favourite business. Hopefully, they’ll get the message!
About the author
