CODEWITHSUNDEEP
emailhtml-email
Clay Nichols
Clay Nichols

Reputation: 12139

Hiding plain text in email readers: is <--! better than <div dislay:none or is there a better way?

I am trying to include, in email, a simple text alternative for non html email readers.

I can not use MIME (service I am using doesn't support it, only HTML only or Text only).

I figure most people (95%) have simple html support, so I'll avoid css. But for the text-only folks I want to include a text-only version.

I have tried hiding it with

And wrapping the second around the first. That works in Gmail and in Yahoo, outlook ,etc ](per testing here)(http://info.contactology.com/email-view) and testing in my own gmail account and an ancient 10 year old Goldmine client).

But I'm looking for problems with the above or a better solution. Maybe just using the second option '<--!' (since, if it is displayed it's fewer confusing HTML tags for the user to ignore)

Upvotes: 1

Views: 2298

Answers (2)

josh1978
josh1978

Reputation: 748

You can use the following technique that I employ to emulate "email preview text". Quick background (in case you're interested): Most email clients grab alt text and link text to generate preview text, but my company includes multiple images and a "click to view in browser" link before any informative content, so the generated preview text is garbage.

I add the following code right after the opening body tag:

<!--email preview text-->
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
    Here is my preview text. You should have roughly 90 characters and include a call-to-action. Read on to find out more.
</div><!--/email preview text-->

Adapted from Litmus.com.

Upvotes: 0

Pradeep Kumar
Pradeep Kumar

Reputation: 6979

Both of them will make the text invisible,

But,

<div class="TEXT ONLY" style="width:0; overflow:hidden;float:left; display:none"> will be accessible via the DOM.

where as, <--! text here --> will not be accessible via the DOM.

So ultimately the choice is yours, depending on your requirements. If just hiding the element is your only concern then I would rather prefer the <--! text here -->. This can hide anything including entire html contents too (unless it includes -->), where as, the DIV way may cause problems with the DOM in certain cases.

Upvotes: 3

Related Questions