HTML Email iOS format-detection

D

8

44

I just found that there is a meta tag for removing the phone number as a link in HTML on iOS. Does this work with HTML emails?

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

But is there one for address and date as well? I have always been writing hacks to over come this but if it's a meta tag that is great! Does anyone know the syntax for address and date?

Darcie answered 19/1, 2015 at 14:52 Comment(0)

U

66

Yes, there is. You can use:

Combining them:

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

Undershirt answered 19/1, 2015 at 15:5 Comment(8)

Just a note - this only really works on native iOS and some Android email clients and not universally across different mobile email apps and mobile devices. For those you will still need to do the 'hacks' and workarounds. – Piton 20/1, 2015 at 16:14

Looks like this works for Windows phones also msdn.microsoft.com/en-us/library/ie/dn265018%28v=vs.85%29.aspx – Thaw 29/4, 2015 at 8:57

These don't work in the mail app in iOS 9 on the iPhone 6. – Norven 9/10, 2015 at 14:37

@Norven That's very possible. Email strips a lot of markup. That would sensibly include meta tags since they are relevant for the entire page. You would likely need to use some sort of hack for this (and many other things) to work properly in email. – Undershirt 9/10, 2015 at 20:51

@Undershirt It's quite frustrating as email is when these built-in features are the most intrusive, particularly on mobile. – Norven 12/10, 2015 at 10:40

Thank you! The fact that I can’t find this in Supported Meta Tags baffles me. – Disrate 24/3, 2016 at 16:46

Does this work in anything? Has anyone confirmed it? I can find no official documentation. The only thing that I can confirm works is telephone=no. – Knoxville 29/4, 2016 at 1:38

As of October 2016, this method didn't work on my iPhone 6 with iOs 10, where the emails have been sent using Outlook 2013. I also included the link styles in removebluelinks.com, and tried with method #5 of litmus.com/blog/update-banning-blue-links-on-ios-devices, but with no luck. – Globeflower 22/10, 2016 at 17:26

U

8

I think its better to gather them in one meta tag :

<meta name="format-detection" content="telephone=no, email=no, address=no" />

Unmeasured answered 20/2, 2021 at 19:6 Comment(0)

D

6

I've had luck with:

<style>
  a[href^="x-apple-data-detectors:"] {
    color: inherit;
    text-decoration: inherit;
  }
</style>

Durden answered 18/7, 2016 at 21:10 Comment(2)

First time encountered ^= in css can you share exactly what is it doing? – Correia 3/1, 2020 at 15:2

@Correia Like regex in js, a[href^="x-apple-data-detectors:"] means to match a tags whose href attribute value starts with x-apple-data-detectors: – Bubb 21/6, 2020 at 3:15

T

4

<html>
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <style type="text/css">
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
    </style>
</head>
<body>
    123 Main Street<br/>
    Columbus, Ohio 43215
</body>
</html>

Tahsildar answered 13/10, 2016 at 13:5 Comment(1)

I've just encountered this issue with an email I was working on. Turns out, this effort is becoming almost futile because there are other devices other than IOS that are doing this type of detection and conversion. I wish browsers/devices gave the option to turn off this type of detection (if they don't), so us developers aren't spending considerable amounts of time researching a solution! – Tahsildar 13/10, 2016 at 13:8

K

2

I just discovered that format-detection doesn't work for Outlook.com, Office365, etc.

In my case I didn't want the auto styling OR functionality (of clicking to call or map an address) so I injected some hidden HTML to make it not look like an address.

Original:

<td>123 Main Street
<br/>Cambridge, MA 02138</td>

Updated:

<td>123 Main S<i class="hidden">-</i>treet
<br/>Cambridge, M<i class="hidden">-</i>A 02<i class="hidden">-</i>138</td>

With this added to your stylesheet:

.hidden { display:none; }

This was tested and works in the 50 or so email client previews offered by Email on Acid.

NOTE: you can't inline the display:none because Yahoo Mail doesn't support that and you'll end up with visible dashes in your address. You need to define a class.

Removing display but keeping the functionality

If you want to keep the Bing Maps pop up functionality you can customize the display by adding the class "outlookLink" to the element that contains the address. Source: https://litmus.com/community/discussions/4692-outlook-com-adding-links

So this:

<td>123 Main Street</td>

Becomes this:

<td class="outlookLink">123 Main Street</td>

with the following in your stylesheet:

.outlookLink span {
      color:#ffffff !important;
      border-bottom-width:0 !important;
      border-bottom-style:none !important;
}

Outlook.com wraps what it determines to be addresses or dates (for calendar entries) in a <span> with its own styling (blue link with dashed underline). This modifies the styling of those <span>s.

Kessler answered 16/1, 2017 at 17:44 Comment(0)

A

2

A nice easy approach you could follow if you've got multiple rules you can combine them together as such:

<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />

Aenea answered 31/10, 2022 at 16:15 Comment(0)

D

0

this is not a standard meta tag, it just work for IOS.

See Apple Developer Documention to find your answer

Denominational answered 24/4, 2020 at 6:50 Comment(1)

Oddly enough, said documentation only mentions one format, even though there are at least four. – Disrate 6/3, 2023 at 12:0

E

-4

untested but should work.

a[href^=date]{ color:#FFFFFF; text-decoration:none;}
a[href^=telephone]{ color:#FFFFFF; text-decoration:none;}
a[href^=address]{ color:#FFFFFF; text-decoration:none;}
a[href^=email]{ color:#FFFFFF; text-decoration:none;}

Emission answered 20/4, 2016 at 19:41 Comment(0)

Recommended topics

Hot tags