Mobile HTML rendering numbers

Question

I have a mobile WEB Page showing a bank statement. Something like this:

DATE          | DESCRIPTION              | AMOUNT
--------------|--------------------------|---------------
Jan 2nd 2010  | Clothes                  |  USD 1.839.000
Sep 23rd 2010 | Drinks                   |  USD 2.837.000

I am using . as a thousand separator since that's our locale configuration for that.

HTML is very simple. Something like this:

<table>
   <tr>
      <td>DATE</td>
      <td>Clothes</td>
      <td>AMOUNT</td>
   </tr>
   <tr>
      <td>Jan 2nd 2010</td>
      <td>Clothes</td>
      <td>USD 1.839.000</td>
   </tr>
   <tr>
      <td>Sep 23rd 2010</td>
      <td>Drinks</td>
      <td>USD 2.837.000</td>
   </tr>
</table>

The problem I am having is that iPhone's Safari, Android Browsers and some Nokia Browsers are thinking (erroneously) numbers such as 1.839.000 and 2.837.000 are phone numbers hence rendering them as links to make phone calls or do some texting.

My question: Is there a special TAG/ATTRIBUTE/CSSSTYLE to tell mobile browser to show that kind of text as plain text?

Thanks a lot.

Interesting question. Does adding span tags in between help?: `2.837.000` — Pekka, Sep 14 '10 at 20:12
nice! But it's of course kind of a kludge. If you have no phone numbers on the entire page, Kenny's/Brian's suggestion may be better. Anyway, I'll add it as an answer. — Pekka, Sep 14 '10 at 20:25

score 27 · Accepted Answer · answered Sep 14 '10 at 20:14

27

I don't know about Android or Nokia, but for iPhone you could use the meta tag:

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

to disable detecting anything as a phone number.

answered Sep 14 '10 at 20:14

kennytm

510,854
105
1,084
1,005

Unbelievable, finally something that is NOT ignored by Opera Mobile Classic!! This really worked, I'm so moved I'm about to cry :P – andreszs Nov 30 '14 at 22:30
To keep the click2call but remove the blue underline effect: a[href^=tel] { color: inherit; text-decoration: none; } – Anne-Claire Dec 21 '16 at 14:25

score 4 · Answer 2 · answered Dec 19 '13 at 11:48

In case you want to keep the functionality that recognises the phone number as such and allows you to tap it, use this solution:

Since iOS adds a <a href="tel123456789"> tag around the number, all you have to do is make a css rule that styles this tag:

a[href^=tel] { color: inherit; }

credit goes to this Razor Edge Labs article.

Brian Campbell · Answer 3 · 2010-09-14T20:24:35.720

4

Here's how you do it for the iPhone, which seems to work for Android as well; it may work in other browsers, that's all I have to test with at the moment:

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

edited Sep 14 '10 at 20:24

answered Sep 14 '10 at 20:17

Brian Campbell

322,767
57
360
340

score 1 · Answer 4 · answered Sep 14 '10 at 20:12

1

Longshot, but, try writing the period as . - there are smart codes that can disable that for mobile safari, etc, but that only works for one-two devices. If you're lucky, you'll bypass their regex.

answered Sep 14 '10 at 20:12

pp19dd

3,625
2
16
21

Yeah, this (I'm out of votes for today) or maybe some weird unicode character that happens to look like a `.` as a last resort – Pekka Sep 14 '10 at 20:13

score 0 · Answer 5 · answered Sep 14 '10 at 20:26

As discussed in the comments, adding arbitrary spans seems to break detection for the browser in question:

<span>2</span>.837<span>.000</span>

however, an explicit solution in the form of a "don't parse this" attribute or Meta tag would of course be preferable, as it would be more certain to work in the future and for all/most platforms.

Mobile HTML rendering numbers

5 Answers5

Linked