CODEWITHSUNDEEP
ioscolorshyperlinkgmailhtml-email
Lilit
Lilit

Reputation: 31

Blue links issue on Gmail and iOS email clients

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.

Upvotes: 3

Views: 3397

Answers (3)

Bhavin
Bhavin

Reputation: 473

I am facing the same issue but I sort it out by removing href attributes for anchor tag.

<td style="font-family: 'Helvetica', 'Arial', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18.6px; text-align: center; letter-spacing: 0.36px; color: #454D51 !important; text-decoration: none !important;">Sent by <span><a href="https://www.example.com"  style="font-weight: 700; text-decoration: underline !important; color: #454D51 !important;">example.com</a></span> <a style="color: #454D51 !important; text-decoration: none !important;">128 Prinston St | Somewhere, CA 22314</a>

Upvotes: 0

gwally
gwally

Reputation: 3547

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.

Upvotes: 4

Shamsudheen TK
Shamsudheen TK

Reputation: 31311

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>"];

Upvotes: 1

Related Questions