Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved
Problem: Safari browser on iOS devices (iPad/iPhone) will override html/CSS formatting for numberic sequences it recognizes as a telephone number. On iPads, when the phone number is clicked (touched), a dialog to “Add to Contacts” is displayed. On iPhones, a dialog to Call the number is displayed. Safari inserts an html anchor tag in the form of
<a href=”tel:123.456.7890”>123.456.7890</a> around any number sequences it thinks is a phone number.
The Windows browser screenshot (below) is what you want to achieve. There are two phone numbers in the web page. The first one has been "fixed" to retain formatting and allow for iOS/Safari to treat as a phone number. The second one has not been fixed.
Solution 1: Turn off the phone number recognition by adding the following meta tag to your web page <head> section.
In Xara XDProX, this can easily be done using HTML Code Insertion via the Web Properties / Page / HTML code (head) dialog. All phone numbers will now be ignored in Safari and displayed as formatted.Code:<meta name="format-detection" content="telephone=no">
But, what if you want to keep the phone number recognition by iOS devices, but still control the formatting?
Solution 2: Create a custom STYLE in XDProX and add CSS style code to your <head> section to force the phone number format to your liking and consistent with your document.
1. Create your text which includes phone numbers.
2. Select a phone # in your text area, format (bold/italic/color) as desired.
3. With phone # still selected, from the Style Dropdown, select Create style.
4. Give the style a Name (e.g. myPhoneStyle).
5. For Type, select “Character style” option.
6. For Based on, select “a Underlying paragraph style” and click OK.
7. Insert CSS style via Web Properties / Page / HTML code (head) dialog, and click apply.
To test yourself, simply export the web page in the attached .xar file and upload to a test folder on your website (not local hard drive, obviously). Then browse to the location in both your iPad or iPhone and in any Windows browser. (Linux/MacOS should work, but haven't tested.)Code:<style> span.myPhoneStyle a[href^=tel] { color:Green;text-decoration:none;} </style>
REFERENCES:
http://developer.apple.com/library/s.../MetaTags.html
http://www.w3schools.com/cssref/css_selectors.asp
http://banagale.com/view-source-from-safari-on-ipad.htm
Reply With Quote
Bookmarks