Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)

Question

i am trying to design an HTML e-mail that should also look good when it is read on mobile devices. My biggest problems are with the iPhone (iOS 4): its mostly undocumented "auto linking" feature really bugs me.

Autolinking seems to appear on

phone numbers (this is the only documented feature, as explained here)
addresses
dates

Is there any documentation out there on how to

disable auto linking for dates and addresses
"correct" the autolinking via microformats or something similar (so the results are better than they actually are with iOS 4)

Any information, hints, or clues are really appreciated because there does not seem to be any information out there whatsoever.

after some research, it seems that this autodetection goes as far back as 1998, where "apple data detectors" were pointed out: http://bit.ly/hmMsAw — z3cko, Mar 10 '11 at 20:30

score 13 · Answer 1 · edited Mar 25 '18 at 12:20

13

This question was answered a long while back in this thread How to disable phone number linking in Mobile Safari? but to reiterate for all other SEO visitors like myself....

...according to the Safari Web Content Guide for iPhone:
<meta name="format-detection" content="telephone=no">

edited Mar 25 '18 at 12:20

Cœur

37,241
25
195
267

answered Apr 18 '11 at 17:13

Terri Ann

442
3
20

7

thanks for the answer, Terri Ann - I was actually searching for a way to disable all the autolinking, not only for telephone numbers... – z3cko Oct 13 '11 at 00:42

tribalvibes · Answer 2 · 2013-02-23T06:11:43.610

9

For dates & addresses, you could disrupt the data recognition pattern matching by inserting e.g. a zero width entity. E.g.,

M&#x200b;arch 30, 2013

Tested on iOS Mail 4.3 and 6.0.

edited Feb 23 '13 at 06:11

answered Feb 23 '13 at 03:35

tribalvibes

2,097
3
25
30

1

I wonder if this will increase spam detection. It works though. Up until iOS 6, I had it working by using the old school body attributes, e.g. `` – Dex Oct 22 '13 at 03:59

score 9 · Answer 3 · answered Aug 15 '11 at 10:55

I actually figured out a trick to do this. It's pretty horrible, but it works. You can read my post about it at http://commondream.net/post/8933806735/avoiding-data-detectors-in-ioss-mail-app, but the general gist is that data detectors won't link content that is already a link in HTML emails, so you can turn something like:

<span>Tuesday</span>

into:

<a href="#tuesday" id="tuesday" 
    style="color: #000; text-decoration: none;">Tuesday</a>

It's horrible code, but it keeps the data detectors from happening with only a couple of drawbacks, namely ugly markup and the mail client scrolling to that particular item if you click on it.

All of that said, I think it's pretty limited when you should disable data detectors. I had an email that listed weather forecasts by day of week, and felt like no user would ever want to mark that information down in their calendar, but I'd say you shouldn't disable data detectors if you ever think that they could actually be useful.

score 8 · Answer 4 · answered Jun 13 '12 at 18:34

8

<a href="#" style="color: #666666; text-decoration: none;pointer-events: none;">Boca Raton, FL 33487</a>

Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser

This is perfect for HTML emails on ios and browser.

answered Jun 13 '12 at 18:34

Vincent Tobiaz

126
1
3

1

that did the trick for me, just had to change the color #000000 – sXe Aug 22 '13 at 22:12
1

This is probably the best solution, it works in iOS 7 at least. – Dex Oct 22 '13 at 04:09
1

This is the best answer. Clicking it does nothing in iOS because of `pointer-events: none;` – Justin May 22 '15 at 05:10

score 6 · Answer 5 · answered Feb 07 '12 at 20:34

6

We ran into this issue as well. In order to disable the format detection of addresses in Safari on iOS, we wrapped our address in an <a> tag without a href attribute and with a style attribute defining the color that we wanted it to be:

<a style="color: #c0c0c0;">Square, Inc., 901 Mission Street, San Francisco, CA 94103</a>

The result is still clickable in iOS Safari, but is rendered in the color that we desired.

In other browsers the link is not clickable and because the inline style color was the same as the existing text, it didn't look any different that the surrounding text.

answered Feb 07 '12 at 20:34

Beau Smith

33,433
13
94
101

1

The iOS mail app still hyperlinks it. – chris finne Feb 09 '12 at 11:44
1

@chrisfinne - yes, however you can style it to look anyway you like. Add `style="text-decoration: none"` if you want to remove the underline. – Beau Smith Mar 05 '12 at 19:37
1

@BeauSmith as Chris indicated, this does not work for HTML email. At least with iOS 6.1 Mail, it still styles it as a blue underscored link, overriding the element style. However, we were successful in disrupting the date recognition at least by inserting e.g. a zero width entity. E.g., March 30, 2013 – tribalvibes Feb 23 '13 at 03:32
1

This does not work in iOS 8 unless I add a `href="#"` for addresses. – Justin May 22 '15 at 04:44

score 3 · Answer 6 · answered Mar 14 '11 at 07:15

3

I don't think you can disable auto linking for addresses and dates like you do with phone numbers, at least it is not in the Apple's official documentation, the Safari HTML Reference.

A hack to try to prevent auto linking is to use some redundant tags in the content. For example, instead of writing out <div>+61 3 777 8888</div>, you could do something like <div><foo>+61 3 777</foo> 8888</div>. It's not very elegant, but it might achieve what you want.

answered Mar 14 '11 at 07:15

William Niu

15,798
7
53
93

3

@MightyE, z3cko already knew about disabling telephone detection; he/she was asking on how to "disable the auto linking for dates and addresses". :) – William Niu Jun 14 '11 at 13:29
1

@William Niu: correct, i wanted to remove all the other autolinking, since it produces faulty output... – z3cko Oct 13 '11 at 00:41

score 2 · Answer 7 · answered Aug 26 '13 at 23:50

2

If you can get away with it, enclosing in single quotes will disable auto-linking. This also works for the subject line, where you can't use HTML tricks.

answered Aug 26 '13 at 23:50

brainjam

18,863
8
57
82

score 2 · Answer 8 · answered Aug 30 '13 at 15:15

I use this solution for auto links that need to be styled

<span class="applelinksWhite">or call 1-666-12<span>3-456</span>7</span>

Then, I add this to my style tag. I use it in the body as some clients strip it from the head.

.applelinksWhite a {color:#ffffff !important; text-decoration:none;}

So the applelinks span covers ios devices' auto linking, and I throw in a basic span in the middle of the text string to throw off other clients like gmail. Tested in Litmus and working across the board.

This works for any kind of auto links.

score 2 · Answer 9 · answered Jul 18 '14 at 19:20

Creating <a> link tag that doesn't do anything seems to be the best option for date and address at least:

<a href="javascript: void(0)" style="cursor:text; text-decoration:none; color:#333333;">July 18, 2014</a>

You can use

<meta name="format-detection" content="telephone=no">

for phone numbers ONLY and it will disable phone links for all; This may not what you want to do.

If you don't use this meta tag, you can style with CSS to change the link color as desired. and use above code (<a> tag) for phone numbers that you don't want to link.

Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)

9 Answers9

Linked