CODEWITHSUNDEEP
htmlcsshyperlinkuritel
user4183285
user4183285

Reputation:

Disabling just one phone number from auto formatting?

I have a web application that returns GPS coordinates, sometimes those coordinates get misinterpreted as phone numbers and are then formatted as links by iOS/macOS Safari/mail application. I know that <meta name="format-detection" content="telephone=no"> in the head will disable all phone number from linking, but I just want to do my GPS coordinates. Advice?

Upvotes: 0

Views: 638

Answers (2)

Grant
Grant

Reputation: 6329

The class no-link works for Apple Mail and data-smartmail="disabled" or data-detector="disabled" works for Gmail and other clients. Last resort is splitting numbers with a zero-width non-joiner character like &#x200C;:

ie.

<span style="white-space: nowrap;" class="no-link" data-smartmail="disable">
101&#x200C;604&#x200C;733&#x200C;4
</span>

or

<span style="white-space: nowrap;" class="no-link" data-smartmail="disable">
john&#x200C;@&#x200C;hot&#x200C;mail&#x200C;.&#x200C;com
</span>

Upvotes: 0

CecilMerrell aka bringrainfire
CecilMerrell aka bringrainfire

Reputation: 732

Given that the gps data formated in decimal degrees, and sent as an email as html.

phone number formatting is done by the email client when it detects a phone number and will attempt to have it link to a dialer, or messenger program.

Phone numbers that will get formated

212-389-3934
212.389.3934
(800) 389-3934
1-800-389-3934
(212) 389-3934
212&ndash;389&ndash;3934
212&mdash;389&mdash;3934
212&#x2013;389&#x2013;3934
212&#8211;389&#8211;3934
1&#8211;212&#8211;389&#8211;3934
212&#32;-389&#32;-3934

There are two ways to fix the problem with decimal degrees being formatted as phone numbers.

  1. Have the client fix their email client so it doesn't do this anymore.

or

  1. Trick the email client into thinking that it is already a link by displaying the numbers as so.

<a href=”#” style=”color:#0F3; text-decoration:none”>29.42808 °N -98.48913 °E</a>

Old answer below

! To display gps latitude and longitude, 1st make sure that your html is formatted to be html5 compatible.

next, if that doesn't fix the issue, try the following example,

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_watchposition

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";}
    }

function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

The latitude and longitude are separated and labeled.

Upvotes: 0

Related Questions