Is there a trick to prevent Gmail's "quoted text" from hiding my email footer?

Question

I send emails to my users which have the same subject but contain different content aside from the header and footer. The header contains a logo, a "Part x of n" message, and an <hr> and is never hidden. The footer contains an <hr>, the same "Part x of n" text and some functional links (Next, Pause, Tweet) that I don't want hidden.

I tried enclosing these in a <div id=timestamp>. I also tried adding &ts=timestamp to the links. The links are images, so then I created a symbolic link called image2.png pointing to image1.png and alternated these images. None of these worked.

Is there a simple solution that I haven't thought of yet?

Here is some html:

names are really separated by, rather than just a comma.</p>
<p>This function does not do any checking for problems. We assume,
in this case, that the input is always correct.</p>
</div>
</div>
<div>
<p>All that remains now is putting the pieces together.</div></div></div></div></span>
<hr>(Part 19 of about 74)<br>
<a href='http://www.mywebapp.com/index.php?action=next'>
<img border=0 src='http://www.mywebapp.com/images/next.png' alt='Get next text'</a>&nbsp;&nbsp;
<a href='http://www.mywebapp.com/index.php?action=pause&listid=252&itemid=2100'>
<img border=0 src='http://www.mywebapp.com/images/pause.png' alt='Pause this text'></a>&nbsp;&nbsp;
<a href='http://twitter.com/home?status=tweetGoesHere'><img border=0 src='http://www.mywebapp.com/images/twitter-a.png' alt='Tweet this'/></a><br>
Original page: <a href='http://eloquentjavascript.net/print.html'>here</a><br>

And here's a screenshot:

Stutman

(On a serious note, can you provide screenshots demonstrating what's going on? And some of your HTML code? It's all guesswork otherwise.) – Larose

I added a screenshot and some html. – Stutman

@SeanO: The HTML does not match the screenshot. – Larose

@Tomalak Geret'kal: Everything else you see is Gmail's iphone interface. – Stutman

Specifically what does GMail think is quoted text? Did you set the email's MIME-Type properly? – Larose

Answer 1

I was able to solve this problem by appending a <span> containing a unique invisible string to each line of my email's footer. At first, I just added time() to each line, but some email clients interpret this as a phone number and convert the string into a URL. So, I pre/postpended a non-numeric character to the string and things seem to be working fine.

There must be a better way to do this though...

Stutman

This is exactly what I am currently doing. Did you find any other ways? I seriously hate that "show quoted text" because it hides the whole email and I send out emails with the same subject with my custom support ticket system that I made. Have you found a better way to do this yet? If not how did you make the random string invisible? – Damaris

Well I know how you made it invisible, I just don't know how to make an invisible string of letters. I only know how to make a random string of numbers with rand(). – Damaris

As I did, you could create a random number (eg. 154385553) and do this z154385553z. Or, you could md5() your random number to create its hash value and use that. – Stutman

I've created a small helper function (see answer below) using your trick and it's now auto randomizing all my outgoing emails, preventing gmail from cutting them up in pieces. Thanks! – Barong

Answer 2

After going crazy from Gmail breaking up my transactional emails into blocks and hiding repeating parts of it, I implemented a helper function inspired by SeanO's answer in my meanie-mail-composer package to automate the addition of random strings for me.

This helper includes a hidden <span> with a 5 character random string before every </p> tag by default.

Here's the code snippet that does the trick (Node.js):

const crypto = require('crypto');

//Helper to randomize HTML contents
function randomize(html, tag = '</p>') {

  //Create a 5 char random string for email content to be unique
  const time = String(Date.now());
  const hash = crypto
    .createHash('md5')
    .update(time)
    .digest('hex')
    .substr(0, 5);

  //Create HTML string to replace with and regex
  const str = `<span style="display: none !important;">${hash}</span>${tag}`;
  const regex = new RegExp(tag, 'g');

  //Replace in HTML
  return html.replace(regex, str);
}

No more broken up emails!

Barong

Glad that helped! It's great that a 5 1/2 year old post could help. – Stutman

It's sad that a 5 1/2 year old issue is still present in Gmail and that there is nothing "normal" we can do about it... :( – Barong

Beware these random hashes will show up in gmail's "message preview" text. The solution to that is to stick whatever text you want to be shown as a preview in an invisible span immediately after the opening <body>. – Expansion

This trick will mark your emails as "dangerous" in gmail – Overarm

Yes, I don't think we use this anymore – Barong

Answer 3

This is the technique from the other answers but this is the exact line that I added to my rails email templates:

<%# this line makes gmail not quote/fold/hide the message body %>
<span style="color: #FFF; display: none; font-size: 8px;"><%= rand(36**20).to_s(36) %></span>

Just needs to go below the content that shouldn't be hidden.

Apps