Blue links issue on Gmail and iOS email clients

1
votes

I'm building html emails and I know this is a known issue and I've tried many solutions to force address/phone/emails texts not to change the color and become a link on Gmail and ios. The only solution that partly works for me is to have my text inside and tags and style to have the font color I need. Here's my example:

...<tr><td bgcolor="#F2F2F2" align="center" style="color:#3C3D3F;line-height:24px;font-family:Tahoma, Arial, Helvetica, sans-serif;padding:15px 10px;font-size:12px;"><a href="" style="outline:none;color:#3C3D3F;cursor:initial;text-decoration:none;"><span style="color:#3C3D3F;">128 Prinston St | Somewhere, CA 22314</span></a></td></tr>...

This works in sense of having the font color what I need, but I don't want to have this text as a link. As now I have to leave the href attribute empty which directs to a white page when clicking on the text from iOS default email.

So please suggest any working solution that would not need to have tag in the code.

Thanks in advance.

2
ioscolorshyperlinkgmailhtml-email

2 Answers

3
votes

Data detectors have become a real pain when crafting emails if you do not want that blue underline. I have several techniques I suggest you try.

Place the following in the <head></head> section of your email. If you already have a <style></style> section, add it there:

    <style>
    *[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
    </style>

If that doesn't solve the issue, you can always do something like this around the areas that are being underlined:

<span style="color: inherit !important; text-decoration: none !important; ">your content here</span>

One thing that might fix the issue is add META tags to the <head></head> area:

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="x-apple-disable-message-reformatting" />

If all else fails (and I have had issues where all else failed) I find that adding a non-printing character might help stop the data detector from detecting a url, phone number, address or date.

&zwnj;

A variation on this is usually effective: 

gwally&zwnj;@&zwnj;stackoverflow&zwnj;.&zwnj;com

Good luck with ugly blue lines.

0
votes

How about appending a common style for links.

<style> a:link { color: #3C3D3F; } </style>

Code:

NSString *styledHTML =  [@"<style> a:link { color: #3C3D3F; } </style>" stringByAppendingString:originalHTMLString];

or

NSRange rOriginal    = [originalHTMLString rangeOfString:@"<tr>"];
NSString *styledHTML = [originalHTMLString stringByReplacingCharactersInRange:rOriginal withString:@"<tr><style> a:link { color: #dc3535; } </style>"];