2

I'm currently sorting out HTML emails on iPhones. My issue is that the date/time text are being transformed into links and copying over styling from the main link colour which is black.

On the footer this looks awful and needs changing. I was able to circumnavigate this issue for phone numbers by wrapping the phone number in an anchor tag and applying a tel: prefix to the href attribute;

href="tel: 123"

That works great, but for time/date, I don't know if there are any and if there is any way to get around this issue at all? I'm testing on an iPhone running iOS 9.2.1 and also Outlook 2013. Any way around this please?

https://i.stack.imgur.com/tENgt.png

I already tried this. That targets phone numbers, what's being targeted/created is a calendar link and so that rule is ignored entirely. Doesn't work in iOS 9 Mail app.

Community
  • 1
  • 1
ow_dj
  • 73
  • 2
  • 11
  • That doesn't work, tried that already. It's not making a telephone link so that doesn't apply to the time/date string. – ow_dj Jan 26 '16 at 15:19
  • 1
    http://stackoverflow.com/questions/8249770/meta-format-detection-ios-for-dates ? – Larme Jan 26 '16 at 16:02
  • This isn't a duplicate. The original question refers to phone numbers. This refers to addresses which are not covered in the developer docs... – ow_dj Jan 29 '16 at 11:51

2 Answers2

2

Well after just trying out various things, I found the answer. Note that using spans and such are not a great idea and in some cases don't work due to the automatic creation of links on certain elements.

A way around it is the apply inline styling to the anchor tag that has the webcal type in the href attribute which formats it appropriately.

<a href="webcal:#" style="color: #ffffff; text-decoration: none;">

Whilst this doesn't stop it from becoming a link, it allows you to make the link the same colour and also have more control over the text.

The date/time detection isn't defined in Apple's developer support docs anyway. Only telephone number is (which can also be overcome by using tel).

Phone Links - Apple Developer Support Docs

In fairness this would have been very easy to overcome however the Mail for iOS app works in a very different way to normal browsers, even mobile Safari.

This also did not work;

.class a {
  color: #ffffff;
  text-decoration: none;
}

Email HTML sucks, a lot.

ow_dj
  • 73
  • 2
  • 11
0

unfortunately there's no real fix for this. A dirty fix will be wrapping the date in a <span class="AppleLink"> and style it:

.AppleLink { color: white; text-decoration: none; }
Koen Slagter
  • 66
  • 6